javascript - jQuery ajax : how to destroy submit if ajax validation fails?

Question

我在用户设置区域中有电子邮件字段。当然，所有电子邮件都是唯一的，因此我需要在提交表单之前检查电子邮件是否未被其他人使用。

代码如下:

var email = $("input#email-id").val();

$("#form-id").submit(function(){
    $.ajax({
        url: "/ajax/email?email=" + email,
        success: function(data){
            if(data != 'ok'){
                alert("Email is used already");
                return false;
            }
        }
    });
});

因此，如果 data 不是 'ok'，它必须破坏提交表单，因为 if() 返回 false，但它没有，表单照常提交，甚至没有出现警报!

我已经检查了 ajax 答案，它工作正常(如果使用电子邮件，则返回 'user_already')。 那我做错了什么？

谢谢!

Answer 1

因为 ajax 本质上是异步的，所以你不能那样做。如果你真的想这样做，你可以在成功处理程序中提交表单。试试这个。

function submitHandler(){
    var email = $("input#email-id").val();

    $.ajax({
        url: "/ajax/email?email=" + email,
        success: function(data){
            if(data != 'ok'){
                alert("Email is used already");
                return false;
            }
            else{
               //Once the data is ok you can unbind the submit handler and 
               //then submit the form so that the handler is not called this time
               $("#form-id").unbind('submit').submit();
            } 
        }
    });
    return false;//This will prevent the form to submit
}
$("#form-id").submit(submitHandler);