提交表单之前进行验证

Question

我在做什么
我正在使用jquery来验证表单，然后再将其发送到服务器。
我正在验证每个输入，如果其中任何一个返回false，则调用event.preventDefault()并显示错误。（如果返回true，则不执行任何操作...）

问题
它运行良好，脚本始终在表单发送之前运行，但是现在我正在使用ajax验证电子邮件-检查db中是否已经没有电子邮件或域是否存在...但是当ajax启动时，表单不会等到它完成并在ajax完成和输入验证之前发送自己。

可能有一些解决方案
我可以调用event.preventDefault()和验证完成后，它我可以尝试撤消返回true preventDefault通过perhabs unbind ，然后submit通过jQuery的再次提交表单。

或者我可以做onsubmit="checkInputs();" 它应该等到它返回true或false ...

解决方案 -改编自用户Mirage接受的答案

function validate(){
    $.ajax({
        url: 'http://google.nl',
        async: false,
        type: "POST",
        data: {test:'request'},
        success: function(data){
            console.log(data);
        }
    });    
    return data; // important
}

Answer 1

尝试添加

async: false

例：

$.ajax({
    url: 'http://google.nl',
    async: false,
    type: "POST",
    data: {test:'request'},
    success: function(data){
        console.log(data);
    }
});

Answer 2

你要：

onsubmit="checkInputs(); return false;"

然后，您将获取表格，例如：

var frm = document.getElementById("myfrm");
frm.submit();

您可以将以上内容置于验证逻辑的else条件中。 希望这可以帮助。

Answer 3

您的脚本流应如下所示：

1. 绑定onsubmit处理程序
2. 使用ajax将vars发送到服务器
3. 检查结果
   1. 验证时：删除处理程序并发布表单
   2. 如果为false：显示错误消息，然后重新开始。

并在代码中：

var handleValidationResponse = function(data) {
    if(data.errors != 0) {
        alert('Sorry my dear user, but you made a mistake');
        return false;
    }
    // aight, so it's all fine
    $('#myForm').off('submit').trigger('submit'); // unbind custom submit handler and post the form
};

$('#myForm').on('submit', function(e) {
    e.preventDefault();

    var $this = $(this);
    var serializedFormData = $this.serializeArray();
    $.post($this.attr('action'), serializedFormData, function(data) {
        handleValidationResponse(data);
    });
});

就是这样！