1

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

我试过这个，它失败了，原因很明显：

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

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

return false;

checkUsername是 a $.post, whilecheckTitle并且checkMessage只是检查这些字段中是否有任何字符。每个函数都相对验证userValid、titleValid和messageValid，将这些值设置为真或假。两个输入字段和文本区域字段在每个相关函数中都附加了一个模糊部分，因此即使在用户单击提交之前，表单也在验证。

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

本质上，我希望表单等待提交，直到 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 设置的主验证变量，完成后系统重新提交。

4

2 回答 2

0

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

于 2013-04-29T06:04:58.127 回答
0

因为您的验证是异步的，所以您需要做一些小技巧。您可以使用该.data()功能检查您的表单数据是否经过验证。如果不做验证。在验证中，您可以将validated数据设置为 true 并再次触发submitvia jquery。

另外一点，我希望您仍然可以再次验证表单服务器端收到的数据，因为可以绕过 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());
于 2013-04-29T06:07:33.220 回答