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。

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

另一种解决方案是在名为valid：

的表单中创建隐藏输入

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

然后在提交函数内但在ajax调用之前创建对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 提交的表单控件，因为这会破坏该方法）。< / p>

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;
}

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

3 个答案: