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，则警报密钥已存在，但表单仍然提交。我想通过返回false，如果data == 1会阻止表单处理，但是它会继续并且仍然添加密钥并弹出密钥已存在的消息。如果数据== 1，如何停止提交表单？我甚至试过这样做：

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

然后在脚本底部删除了返回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是一个jQuery对象，它包装了表单的底层DOM元素。）

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，并且不需要“取消绑定”行：

form[0].submit();