Question

所以我有一个表单，在点击提交时，我想在提交之前进行一些验证。我觉得很直接。所以我在表单上设置了一个提交处理程序，并希望它进行AJAX检查，当它完成时，如果一切正常，继续像往常一样提交。

我尝试了这个，但由于非常明显的原因失败了：

$.when(checkUsername()).done(function (a) {
    checkTitle();
    checkMessage();

    if (userValid && titleValid && messageValid) {
        return true;
    }
});

return false;

checkUsername是$.post，而checkTitle和checkMessage只是检查这些字段中是否有任何字符。每个函数都相对验证userValid，titleValid和messageValid，将这些值设置为true或false。两个输入字段和文本区域字段都附有每个相关功能的模糊，因此即使在用户单击提交之前，表单也在验证。

很明显，最后返回false，表单永远不会提交。但是，我最初在完成之外进行了有效检查（当前返回false是），如果用户输入了3个有效项目，则删除了一个字段并且没有离开它/模糊，并且直接点击提交，它仍然会提交，因为AJAX仍处理，字段没有进行第二轮检查。

基本上，我希望表单在提交之前等待提交。但是submit()函数将在AJAX结束之前处理它的返回，并且我不能把它完成，因为我需要AJAX来触发提交。基本上，一个问题22。

我想出了一些我觉得这样做很乱的方法，但是我现在能想到的唯一方法，可以使用建议，如果这是唯一的方法，或者其他什么选择我有。我知道我可以通过AJAX提交表单，但我希望看到有哪些选项可用。这是一个混乱的方法：

if (validated) return true;
else {
    $form = $(this);
    $.when(checkUsername()).done(function (a) {
        checkTitle();
        checkMessage();

        if (userValid && titleValid && messageValid) {
            validated = true;
            $form.submit();
        }
    });

    return false;
}

在这种情况下，只有ajax设置了一个主验证变量，系统完成后重新提交。

Answer 1

您的解决方案是可行的方法。 .done方法具有不同的上下文，因为它是异步执行，这意味着您的验证方法在调用时总是返回false。

Answer 2

因为您的验证是异步的，所以您需要做一个小技巧。您可以使用.data()函数检查表单数据是否已经过验证。如果没有做验证。在验证中，您可以将validated数据设置为true，并再次通过jquery触发submit。

另外一个注意事项，我希望您仍然可以再次验证表单服务器端收到的数据，因为可以绕过javascript验证。

您需要将$(form)替换为您的表单元素或查询到表单。

$(form).submit(function(event) {
    //check if already validated
    if (!$(this.data("validated")) {

        doValidation();
        //prevent form form submitting because validation is in progress.
        event.preventDefault();
    }

});



function doValidation() {

    //do you validation suff.
    $.when(checkUsername()).done(function(a) {
        checkTitle();
        checkMessage();

        if (userValid && titleValid && messageValid) {
            //mark the form as validated
            $(form).data("validated", true);
            //trigger submit via jquery
            $(form).submit();
        }
    });

}

或者您使用 ajax 方式并使用$.post发布您的表单（仅在您没有文件输入元素时才有效）。

$.post($(form).attr("action), $(form).serialize());

jQuery：AJAX完成后提交表单

2 个答案: