如何在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動作發生，它似乎跳過意味着你的代碼總是會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();
    });
});

我假設你的表單中有一個id為myForm的按鈕，如下圖所示：

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

Answer 2

它沒有被提交可能是因為你沒有返回1成功驗證result if condition下面的result

if(result == 1) {

在check.php你的輸出應該是1，就像check.php 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將阻止它在所有情況下提交。