如何在AJAX验证后使用jQuery提交表单？

Question

我的表单有一个输入需要在提交之前进行验证。成功验证后，我尝试提交表单，但不提交。

我的代码如下所示：

$(document).ready(function() { 
    $("#myForm").submit(function() { 
     checkInputData(); 
     return false; // to prevent default submit 
    }); 
}); 

验证功能：

function checkInputData() { 
    var id = $($("#id")).val(); // value, which needs to be validated 
    $.get("check.php?id=" + id, 
     function(result){ 
      if(result == 1) { 
       //if the result is 1, need to submit 
       $("#myForm").unbind(); // to prevent recursion? 
       $("#myForm").submit(); // doesnt work 
      } else { 
       // dont submit, give some visual feedback, etc... 
      } 
    }); 
} 

我到底做错了什么？谢谢。

Answer 1

您需要从AJAX验证请求中返回结果。您可以通过将此检查设置为async: false来执行此操作，这意味着checkInputData()将等待结果返回，并且您可以将其返回，从而控制表单的提交。

在您的代码中，它不会等待$.get动作发生，它似乎跳过了意味着您的代码始终显示为checkInputData()呼叫的return true;。如果按以下方式使用，则无需提交return false。

我已经使用代替$.get的$.ajax调用，因为它可以让你控制async属性，但它本质上是做同样的事情。你可以阅读更多关于它here。

function checkInputData() { 
    var value = $("#id").val(); // Value to be validated 
    var passedValidation = false; 
    $.ajax("check.php?id=" + value, { 
     async: false, 
     success: function(result){ 
      // Do whatever check of the server data you need here. 
      if(result == "1") { 
       // Good result, allow the submission 
       passedValidation = true; 
      } else { 
       // Show an error message 
      } 
     } 
    }); 
    return passedValidation; 
} 

$(document).ready(function() { 
    $("#myForm").on("submit", function() { 
     return checkInputData(); 
    }); 
}); 

我假设你有一个按钮，如下面的表格内的ID myForm：

<input type="submit" value="Submit Form" /> 

Answer 2

 $(document).ready(function() { 
      $("#myForm").submit(function (e) { 
       checkInputData(); 
       //return false; // to prevent default submit <-- THIS IS WRONG 


       e.preventDefault(); //Try this :) 
      }); 
     }); 

返回false将阻止它在所有情况下提交。

Answer 3

它没有得到提交的可能是因为你没有在下面if condition

if(result == 1) { 

上验证成功返回1为result在check.php你的输出应该是1，像echo '1';如果输入有效。并确保在它之前或之后没有任何其他输出。

Answer 4

AMember是正确的你总是返回false，也有一些解决方案。一种解决方案是让你将验证绑定到一个按钮元素或任何不会提交表单的元素。

HTML

<form id="myForm"> 
    . 
    input elements 
    . 
    <button class= "submit" type="button" onclick="submit">Submit</button> 
</form> 

文档准备

$(function() 
{ 
    var $submit = $(".submit"); 

    $submit.click(function() 
    { 
    checkInputData(); 

    }); 
}); 

验证回调函数

function checkInputData() 
{ 
    var id = $('#id').val(); // value, which needs to be validated 

    $.get("check.php?id=" + id, function(result) 
    { 
     if(result == 1) 
     { 
      var $myForm = $("#myForm"); 

      //if the result is 1 submit. 
      $myForm.submit(); 
     } 
     else 
     { 
      // dont submit, give some visual feedback, etc... 
     } 
    }); 

}