Question

我有一个表单，其中包含一个棘手的字段，需要在服务器端通过验证。所以我需要捕获提交，发送带有此字段的ajax请求，获取结果，如果结果有效则继续表单提交，其他明智的停止提交和显示消息。

我该怎么做？

我在事件和回调的“大局”中迷失了一点。

这是我到目前为止所拥有的。

$("form").submit(function( event ) {
    event.preventDefault();
    return check();
});


function check() {

    var field = $('#myFiled').val();
    if (!field ) {
        show.error('Please enter VIN number and try again.');
        return false;
    }
    $.getJSON('MyURL', function(data){
        if (!data.valid) show.error('Invalid entry! Please try again.');
    })
}

更新请阅读问题。如果验证成功，我需要continue regular表单提交。不是通过AJAX。

Answer 1

$("form").submit(function( event ) {
    event.preventDefault();
    checkAndSubmit();
});


function checkAndSubmit() {

    var field = $('#myFiled').val();
    if (!field ) {
        show.error('Please enter VIN number and try again.');
    }
    else {
        $.getJSON('MyURL', function(data){
            if (!data.valid) {
                show.error('Invalid entry! Please try again.');
            }
            else {
                $.post('yourFromPostURL', $('form').serialize(), function(data){
                    //show something of success or failure.
                });
            }
        })
    }
}

Answer 2

根据您的check()函数判断，您已经了解了基本的JavaScript验证。如果您希望表单的验证失败，请使其.submit()方法返回false，否则返回true。

只需处理AJAX请求返回的数据，就像处理field变量一样。

也许你遗漏的一件事是如何使check()从getJSON函数内部返回false。答案就是变量范围的简单问题。

var data;
$.getJSON('MyURL', function(data_){
        data = data_;

    });
if (!data.result) return false;

由于JavaScript具有功能范围，data仍然可以访问.getJSON()。

还有一件事，.getJSON()是异步 AJAX请求，这意味着您的验证功能将在不等待请求结果的情况下完成。您希望使用 syncrhonous ajax请求，因此在验证完成之前，check()函数将无法完成。但是，无法使.getJSON()同步，因此您必须使用.ajax()方法。请参阅this post。

编辑：您的问题是，如果没有验证错误，则不返回值。您必须return true;。

Answer 3

AJAX表单提交的替代方法是阻止表单提交并在按钮级别执行验证。

$('#submitButtonID').click(function (e) {
    e.preventDefault();
    //start your AJAX validation
    checkAndSubmit();
}

然后验证并在成功后，您仍然可以定期提交表格。

function checkAndSubmit() {
    var field = $('#myField').val();
    if (!field ) {
        show.error('Please enter VIN number and try again.');
    }
    else {
        $.getJSON('MyURL', function(data){
            if (!data.valid) {
                show.error('Invalid entry! Please try again.');
            }
            else {
                $('form').submit();
            }
        });
    }
}

服务器端验证将在发布时运行，但您不会通过AJAX验证中断表单提交，因为它仅在按钮级别捕获。（如果您需要捕获Enter按钮，请参阅此答案：Capturing Enter button to submit form

jQuery提交表单后用ajax验证它

3 个答案: