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操作发生，并且似乎跳过意味着您的代码将始终显示在return true;来自checkInputData() return false。如果按照以下方式使用，则无需提交$.ajax。

我使用$.get调用代替async，因为它允许您控制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(); }); });属性，但它基本上做同样的事情。您可以阅读更多相关信息here。

myForm

我假设您的表单中有一个ID为<input type="submit" value="Submit Form" />的按钮，如下所示：

{{1}}

Answer 2

未提交可能是因为您未在1下面的result成功验证if condition

if(result == 1) {

在check.php中，如果输入有效，则输出应为1，如echo '1';。并确保在它之前或之后没有任何其他输出。

Answer 3

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

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

}

Answer 4

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


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

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

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

4 个答案: