如果 ajax 验证器使用 jquery 返回 true，则提交表单答案

【问题标题】：Submit form if ajax validator returns true using jquery如果 ajax 验证器使用 jquery 返回 true，则提交表单
【发布时间】：2011-01-04 19:43:28
【问题描述】：

我不确定我哪里出错了。这个想法是，在提交表单之前，其中一个输入字段通过 ajax 发送到服务器端验证器。如果响应为 1，则输入有效，应提交表单。如果响应为 0，则不应提交表单。问题是我不知道如何在 ajax 请求函数中设置一个变量，以防止表单被提交。这就是我所拥有的：

$("#form").submit(function() {
    var valid= false;
    var input = $("#input").val();
    $.ajax({
       type: "POST",
       url: "validator.php",
       data: "input=" + input,
       success: function(msg){
            valid = (msg == 1) ? true : false;
            if(!valid) {
                $("#valid_input").html("Please enter valid info");
            } else {
                $("#valid_input").html("");
            }
       }
     });
    return valid;
 });

【问题讨论】：

标签： javascript jquery ajax forms

【解决方案1】：

问题是$.ajax 请求是异步的，需要一段时间才能完成。因此该函数在成功函数事件执行之前继续执行并返回 false。

要解决此问题，您可以将 async: false 添加到 AJAX 调用的设置中，但这会暂停执行，直到 AJAX 调用返回。

另一种解决方案是创建一个名为valid 的隐藏输入：

<input type="hidden" name="valid" value="false" />

然后在提交函数中但在 ajax 调用之前创建对来自var $form = $(this) 的引用。然后，如果 AJAX 调用返回有效，则更改此隐藏输入的值，并再次提交表单：

$('input[name="valid"]').val('true');
$form.submit();

然后在提交函数的最后只在隐藏输入的值为真时才返回假：

if ($('input[name="valid"]').val() == 'false') {
    $.ajax({ ... }); // changes the value of the hidden input from false to true
    return false;
}

【讨论】：

在 HTTP 响应到达之前暂停执行是一件坏事，不要那样做。
你不要使用async: false 解决方案，它只是解释了你的情况。请参阅我修改后的答案以获得更明智的解决方案。
好的，我选择了隐藏变量标志，很好。谢谢！
大家好。我正在使用 fancybox 插件加载注册页面。我将 #form.submit() 放在 ajax 成功函数中。它正在重新加载页面并显示空表单，但在一个单独的页面上（不在幻想框内）。当我查看源代码时，它没有有效的“假”。最后，我在 $.ajax({...}) 中放了什么？谢谢。

【解决方案2】：

成功函数在 HTTP 响应到达时运行，因此valid 将始终为 false。

如果有效，则调用表单的 .submit() 方法（并确保您没有名称或 ID 为 submit 的表单控件，因为这会破坏方法）。

【讨论】：

这个问题（因为我的代码当前已设置）是表单提交是初始触发器。因此，当我尝试在 ajax 中调用表单的 .submit() 时，它执行了一个无限循环。
这里的问题是事件处理程序会再次调用这个函数，然后再次进行AJAX调用，无穷大。
调用表单的submit() 方法不应触发submit 事件处理程序。您是在调用 jQuery 提交方法而不是 DOM 提交方法吗？这可能会有所不同。
会不会像$('form#form_id').context.submit()？
不，context 返回任何传递的 DOM 节点。您正在那里传递一个选择器。 jQuery('#form_id')[0].submit() 应该可以完成这项工作。

【解决方案3】：

这是假设您已经加载了 ajax 验证插件和 ajax 表单插件， http://malsup.com/jquery/form/

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

下面的示例将验证所有具有“ajaxForm”类的表单，然后如果有效则通过 ajax 提交...

$( document ).ready( function(){setupForms();} );

function setupForms(){

    var ajaxOptions = { beforeSubmit:checkForm,
                        success:function(){
                               // the ajax was successful
                       }
                      };

    $( '.ajaxForm' ).ajaxForm( ajaxOptions );   
    $( '.ajaxForm' ).validate();
}

function checkForm(data,form){
    var valid = $(form).valid();
    return valid;
}

【讨论】：