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

Ant*_*ony 2 javascript forms ajax jquery

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

Mar*_*row 7

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

要解决这个问题,您可以添加async: falseAJAX调用的设置,但这会暂停执行,直到AJAX调用返回.

另一种解决方案是以以下形式创建隐藏输入valid:

<input type="hidden" name="valid" value="false" />
Run Code Online (Sandbox Code Playgroud)

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

$('input[name="valid"]').val('true');
$form.submit();
Run Code Online (Sandbox Code Playgroud)

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

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