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

Posted 2023-05-09

【中文标题】jQuery在使用ajax验证后提交表单

【英文标题】：jQuery submit form AFTER validating it with 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。

【参考方案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