jQuery表单提交，防止默认操作，然后提交

Question

我正在使用jQuery重写html表单的提交事件：

$('#contact-form').submit(function(event) {
    event.preventDefault();
});

event.preventDefault()暂时阻止实际表单的发布。然而，在我做了一些异步验证之后，我希望迫使post再次提交表单：

$('#contact-form').submit(function(event) {
    event.preventDefault();

    asyncValidationHere(function(valid) {
        if(!valid) { return; }

        // Turn off the custom form submit event handler now since valid
        $('#contact-form').off('submit');

        // Submit (do the actual form post)
        $('#contact-form').submit();
    });
});

然而，我从来没有看到这份表格张贴。调用$('#contact-form').off('submit')，然后尝试提交$('#contact-form').submit()似乎不起作用。

有什么想法吗？

Answer 1

$('#contact-form').on("submit", function(event) {
    event.preventDefault();

    var that = this; // that is the form

    asyncValidationHere(function(valid) {
        if(!valid) { return; }

        $(that).off("submit"); // to guarante the function won't be invoked

        that.submit(); // submit the form
    });
});

注意:在节点(表单)上调用 that.submit(); (不要与jQuery.submit混淆)，它提交表单(这里是MDN上的文档)。

Answer 2

您可以从异步函数内部触发submit事件，并传递一些成功标志。然后，在提交事件的处理程序中，可以根据是否存在该标志来调用preventDefault。类似于：

$('#contact-form').submit(function(event) {

    if (!event.data.valid) {

        event.preventDefault();

        asyncValidationHere(function(valid) {
            if(!valid) { return; }

            // Submit (do the actual form post)
            $('#contact-form').trigger('submit', {valid: true});
        });
    }
});