表单提交总是 return true 而它应该 return false

Question

我在使用此代码提交之前验证表单

<form method="post" onsubmit="return reg()">
<table>
<tr>
<td>Name</td>
<td><input type="text" name="username" id="username" autocomplete="off" ></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" id="password" autocomplete="off" ></td>
</tr>
<tr>
<td>Email</td>
<td><input type="email" name="email" id="email" autocomplete="off"></td>
</tr>
<tr>
<td>Phone</td>
<td><input type="text" name="phone" id="phone" autocomplete="off" placeholder="001**********"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="register" id="register" value="register"></td>
</tr>
</table>
</form>

和这个js代码

function reg(){
    var user = $("#username").val(),
        pass = $("#password").val(),
        city = $("#city").val(),
        email = $("#email").val(),
        phone = $("#phone").val();

    if(user.length<4){
        alert('short name');
        return false;
    }
    else if(pass.length<6) {
        alert('password error');
        return false;
    }
    else if(city.length<3) {
        alert('city error');
        return false;
    }
    else if(phone.length<6) {
        alert('phone error');
        return false;
    }
    else{
        $.post('ajax/checkex.php?user='+user+"&email="+email).done(function (data) {
            if(data.indexOf('user') !== -1){
                alert('user name is not available');
                return false;
            }
            else if(data.indexOf('email') !== -1){
                alert('email address is already registered');
                return false;
            }
            else if(data.indexOf('available') !== -1){
                return true;
            }
        });
      //return false;
    }
}

但是表单总是提交，ajax 代码根本不起作用。它甚至不会像 alert(data).

那样提醒里面的任何东西

js 代码 returns 正确，即使名称和电子邮件之前已经注册。

当我取消注释最后一个 return false 行时，它 returns false 和 ajax 工作正常但确保表单根本没有提交。那么这段代码哪里出错了？

Answer 1

那将永远是 post 表格。如果要提交带有jquery的表单，可以使用submit事件。

您可以使用 event.preventDefault 方法来阻止提交表单。

一个简单的例子

$("myForm").submit(function(ev){
   ev.preventDefault();
   //Check if the inputs are valid
   if( formvalid ){
      $.ajax() //Make your ajax call 
   }
})

另见：Submit a form using jQuery

编辑：如果您的 ajax 调用 returns false

，则不应提交

$("myForm").submit(function(ev){
  $.ajax({
    url: "url",
    type: "post",
    async: false, //To make the ajax call synchronous
    success: function(valid){
      if(!valid)
        ev.preventDefault();
    }
  }); 
})

表单提交总是 return true 而它应该 return false

form submit always return true while it should return false

forms

validation

ajax

jquery