jQuery在使用ajax验证后提交表单答案

【问题标题】：jQuery submit form AFTER validating it with ajaxjQuery在使用ajax验证后提交表单
【发布时间】：2014-06-11 21:56:09
【问题描述】：

我有一个表单，其中包含一个需要在服务器端通过验证的棘手字段。所以我需要捕获提交，用这个字段发送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。

【问题讨论】：

标签： javascript jquery ajax validation submit

【解决方案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.
                });
            }
        })
    }
}

【讨论】：

我需要继续定期提交。不是 $.post
@dklingman 我完全同意你关于serialize 这是在这种情况下最好的方法。
我进行了一些搜索，除非采用我建议的方法，否则我发现您正在尝试做的所有事情都不会发生。 link。另一方面，粗鲁也不会给你太多帮助。
你是第三个没有看问题的人。我不需要 AJAX 表单提交
@rinchik 我根据您最新的 cmets 重新考虑了我的答案。

【解决方案2】：

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

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

也许您缺少的一件事是如何使 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;。

【讨论】：

你读过这个问题吗？你知道什么是异步吗？什么是回调？
我并不是要粗鲁，但在什么宇宙中，您的上述作品是我问题的答案？特别是考虑到您的代码与您的 referencing 相矛盾

【解决方案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 验证中断表单提交，因为它仅在按钮级别捕获。（如果需要捕获回车键，请看这个答案：Capturing Enter button to submit form

【讨论】：