javascript - 如何在 AJAX 验证后使用 jQuery 提交表单？

Question

我的表单有一项输入，需要在提交前进行验证。验证成功后，我尝试提交表单，但它没有提交。

我的代码是这样的:

$(document).ready(function() {
    $("#myForm").submit(function () {
        checkInputData();
        return false;  // to prevent default submit
    });
});

验证函数:

function checkInputData() {
    var id = $($("#id")).val();  // value, which needs to be validated
    $.get("check.php?id=" + id,  
        function(result){  
            if(result == 1) {  
                //if the result is 1, need to submit
                $("#myForm").unbind(); // to prevent recursion?
                $("#myForm").submit(); // doesnt work
            } else {  
                // dont submit, give some visual feedback, etc...
            }  
    });
}

我做错了什么？谢谢。

Answer 1

您需要返回 AJAX 验证请求的结果。您可以通过将此检查设置为 async: false 来执行此操作，这意味着 checkInputData() 将等待结果返回，您可以返回它，控制提交表格。

在您的代码中，它不会等待 $.get 操作发生，它似乎会跳过，这意味着您的代码将始终显示为 return true; checkInputData() 调用。如果如下使用，您不需要在提交中返回false。

我使用 $.ajax 调用代替 $.get 因为它允许您控制 async 属性，但是它基本上做同样的事情。您可以阅读更多相关信息 here .

function checkInputData() {
    var value = $("#id").val();  // Value to be validated
    var passedValidation = false;
    $.ajax("check.php?id=" + value, {
        async: false,
        success: function(result){
            // Do whatever check of the server data you need here.
            if(result == "1") {  
                // Good result, allow the submission
                passedValidation = true;
            } else {
                // Show an error message
            }
        }
    });
    return passedValidation;
}

$(document).ready(function() {
    $("#myForm").on("submit", function () {
        return checkInputData();
    });
});

我假设你有一个如下所示的按钮，在你的表单中，id 为 myForm:

<input type="submit" value="Submit Form" />