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代码也会返回true。

当我取消注释最后一个return false行时，它返回false并且ajax工作正常，但确定表单根本没有提交。那么这段代码中的错误在哪里？

Answer 1

这将始终发布表格。如果要使用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调用返回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();
    }
  }); 
})

表单提交总是返回true，而它应该返回false

1 个答案: