jquery表单检查返回true，但需要返回false

Question

我在提交表单时运行此表单检查：

if((formData[4].value == 1 || formData[4].value == 2) && !formData[2].value) { 
    alert('Please fill out the key field');
    return false;
} else {
    $.ajax({
        url: "/ajax/key_check.php",
        cache: false,
        data: "key=" + formData[4].value,
        dataType: "html",
        success: function(data) {
            if(data == 1) {
                alert('Key already exists');
                return false;
            }
        }
    });

    return true;
}

脚本有效，如果数据== 1，它会提醒密钥已经存在，但是表单仍然提交。我认为如果 data == 1 返回 false 会停止处理表单，但是它会继续并添加密钥，并且弹出密钥已经存在消息。如果数据 == 1，如何阻止表单提交？我什至尝试这样做：

if(data == 1) {
    alert('Key already exists');
    return false;
} else {
    return true;
}

然后删除了脚本底部的 return true ，但同样的问题发生了。弹出窗口，但表单仍在处理中。

Answer 1

回调中的return从该回调返回，而不是您想要的父函数...但是您可以获得您想要的效果，就像这样：

if((formData[4].value == 1 || formData[4].value == 2) && !formData[2].value) { 
    alert('Please fill out the key field');
    return false;
} else {
    $.ajax({
        url: "/ajax/key_check.php",
        cache: false,
        data: "key=" + formData[4].value,
        dataType: "html",
        success: function(data) {
            if(data == 1) {
                alert('Key already exists');
            } else {
              $("#someForm")[0].submit();
            }
        }
    });
    return false;
}

它所做的不是直接提交，而是如果检查没问题，调用 *native .submit() method，提交表单并且不再运行这个处理程序。

Answer 2

问题在于 AJAX 请求是异步发生的——它调用你的成功函数在外部函数返回 true。是成功函数（不是你的外层函数）返回false，与表单是否提交无关。

您必须始终从该外部函数返回 false，然后在 AJAX 成功函数中，如果验证成功，unbind the initial submit handler 并使用表单的 .submit() method 正常提交表单：

（在这些代码示例中，我假设 form 是一个包装表单底层 DOM 元素的 jQuery 对象。）

success: function(data) {
    if(data == 1) {
        alert('Key already exists');
    } else {
        form.unbind('submit'); // Prevent the AJAX validation from happening again
        form.submit(); // Submit the form normally
    }
}

或者，您可以调用浏览器的native form.submit() method 并且“unbind”行将不是必需的：

form[0].submit();