为什么我的Jquery命令不会停止表单提交过程?

时间:2012-10-22 21:10:06

标签: jquery

我收到确认密码不匹配的错误消息,但我的数据库仍然添加了新的列表!为了使脚本停止提交表单,我需要做什么?我对编码的理解非常薄弱!

<script src="scripts/jquery.js" type="text/javascript">
jQuery(function(){
  $("#submit").click(function(){
    $(".error").hide();
    var hasError = false;
    var passwordVal = $("#password").val();
    var checkVal = $("#repeatpassword").val();
    if (passwordVal == '') {
      $("#password").after('<span class="error">Please enter a password.</span>');
      hasError = true;
    } else if (checkVal == '') {
      $("#repeatpassword").after('<span class="error">Please re-enter your password.</span>');
      hasError = true;
    } else if (passwordVal != checkVal ) {
      $("#repeatpassword").after('<span class="error">Passwords do not match.</span>');
      hasError = true;
    }
    if(hasError == true) {return false;}
  });
});
</script>
<form method="post" name="form1" action="<?php echo $editFormAction; ?>">
  <table align="center">
    <tr valign="baseline">
      <td nowrap align="right">First name:</td>
      <td><input type="text" name="firstname" value="" size="32"></td>
    </tr>
    <tr valign="baseline">
      <td nowrap align="right">Last name:</td>
      <td><input type="text" name="lastname" value="" size="32"></td>
    </tr>
    <tr valign="baseline">
      <td nowrap align="right">Email:*</td>
      <td><input type="text" name="email" value="" size="32"></td>
    </tr>
    <tr valign="baseline">
      <td nowrap align="right">Password:*</td>
      <td><input type="password" name="password" value="" size="32"></td>
    </tr>
    <tr valign="baseline">
      <td nowrap align="right">Repeat Password:*</td>
      <td><input type="password" name="repeatpassword" value="" size="32"></td>
    </tr>
    <tr valign="baseline">
      <td nowrap align="right" valign="top">Channel url:*</td>
      <td><textarea name="channelurl" cols="50" rows="1"></textarea></td>
    </tr>
    <tr valign="baseline">
      <td nowrap align="right">Channel name:*</td>
      <td><input type="text" name="chanelname" value="" size="32"></td>
    </tr>
    <tr valign="baseline">
      <td nowrap align="right">Description:</td>
      <td><textarea name="description" cols="32" rows="6"></textarea></td>
    </tr>
    <tr valign="baseline">
      <td nowrap align="right">Video 1:* </td>
      <td><input type="text" name="embedd1" value="" size="32"></td>
    </tr>
    <tr valign="baseline">
      <td nowrap align="right">What game is it?</td>
      <td><input type="text" name="game1" value="" size="32"></td>
    </tr>
    <tr valign="baseline">
      <td nowrap align="right">Video 2:</td>
      <td><input type="text" name="Embedd2" value="" size="32"></td>
    </tr>
    <tr valign="baseline">
      <td nowrap align="right">What game is it?</td>
      <td><input type="text" name="game2" value="" size="32"></td>
    </tr>
    <tr valign="baseline">
      <td nowrap align="right">Keywords to describe and find your channel*</td>
      <td><input type="text" name="keywords" value="" size="32"></td>  
    </tr>
    <tr valign="baseline">
      <td nowrap align="right">&nbsp;</td>
      <td><input type="submit" value="Channel Create"></td>
    </tr>
  </table>
  <input type="hidden" name="chanelID" value="">
  <input type="hidden" name="MM_insert" value="form1">
</form>

2 个答案:

答案 0 :(得分:3)

我建议绑定到表单的提交事件,然后完全阻止默认操作开始,只在您希望提交时提交。

$("#formid").submit(function(event){
   event.preventDefault();

   // validate form
   var valid = true;

   if (valid) {
       this.submit();
   }
});

这可以防止您的表单因错误或逻辑问题而意外提交(除非逻辑问题涉及valid 的值)。

答案 1 :(得分:0)

尝试绑定到表单的 submit()事件,而不是按钮的 click()事件。

所以,在第三行,而不是

$("#submit").click(function(){

使用

$("form").submit(function(){