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

}