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

Question

我不知道我哪里出错了。 这个想法是在提交表单之前，其中一个输入字段通过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;
 });

Answer 1

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

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

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

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

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

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

然后在submit函数结束时，如果隐藏输入的值为true，则仅返回false：

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

Answer 2

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

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

Answer 3

这假设您已经加载了ajax validate插件和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;
}