jQuery：AJAX完成時提交表單

所以我有一個表單，點擊提交後，我想在提交之前進行一些驗證。我覺得挺直觀的。因此，我在表單上設置了一個提交處理程序，並希望它能夠執行AJAX檢查，並在完成後，如果一切正常，請繼續並像往常一樣提交。jQuery：AJAX完成時提交表單

我嘗試這樣做，它失敗很明顯的原因：

$.when(checkUsername()).done(function (a) { 
    checkTitle(); 
    checkMessage(); 

    if (userValid && titleValid && messageValid) { 
     return true; 
    } 
}); 

return false;

checkUsername是$.post，而checkTitle和checkMessage只是檢查，如果任何字符是在這些領域。每個功能相對驗證userValid，titleValid和messageValid，將這些值設置爲true或false。兩個輸入字段和文本區域都與每個相關功能相關聯，所以即使在用戶單擊提交之前，表單也正在驗證。

很顯然，在最後返回false的情況下，表單將永遠不會提交。但是，我原來在done之外有有效的檢查（當前返回false是），並且如果用戶輸入了3個有效項目，然後擦除了一個字段並且沒有離開/模糊，並且直接點擊提交，它仍然會提交，因爲AJAX仍在處理中，這些字段沒有經過第二輪檢查。

本質上，我希望表單等待提交，直到AJAX完成。但是submit()函數將在AJAX完成之前處理它的返回，並且我不能完成它，因爲我需要AJAX觸發提交。本質上，一個捕獲22.

我想出了一些東西，我覺得這是一個混亂的方式做到這一點，但目前我能想到的唯一方法，並可以使用建議，如果這是唯一的方法做它，或我有什麼其他選擇。我知道我可以通過AJAX提交表單，但我希望看到有哪些選項可用。這是凌亂的方法：

if (validated) return true; 
else { 
    $form = $(this); 
    $.when(checkUsername()).done(function (a) { 
     checkTitle(); 
     checkMessage(); 

     if (userValid && titleValid && messageValid) { 
      validated = true; 
      $form.submit(); 
     } 
    }); 

    return false; 
}

在這種情況下，存在僅由AJAX設置一個主驗證變量，並在完成後該系統重新提交。

來源

2013-04-29 RhoVisions

您的解決方案是要走的路。 .done方法由於是異步執行而具有不同的上下文，這意味着您的驗證方法在調用時總是返回false。

來源

2013-04-29 06:04:58 Toverbal

因爲您的驗證是異步的，所以您需要做一些小動作。您可以使用.data()函數來檢查您的表單數據是否經過驗證。如果沒有做驗證。在驗證中，您可以將validated數據設置爲true，並再次通過jquery觸發submit。

另外還有一點需要注意，我希望你仍然可以驗證表單服務器端收到的數據，因爲javascript驗證可以被繞過。

您需要將表單元素或查詢替換爲您的表單中的$(form)。

$(form).submit(function(event) { 
    //check if already validated 
    if (!$(this.data("validated")) { 

     doValidation(); 
     //prevent form form submitting because validation is in progress. 
     event.preventDefault(); 
    } 

}); 



function doValidation() { 

    //do you validation suff. 
    $.when(checkUsername()).done(function(a) { 
     checkTitle(); 
     checkMessage(); 

     if (userValid && titleValid && messageValid) { 
      //mark the form as validated 
      $(form).data("validated", true); 
      //trigger submit via jquery 
      $(form).submit(); 
     } 
    }); 

}

或者你去AJAX的方式和$.post發表您的形式（只有當你有沒有文件輸入元素的作品）。

$.post($(form).attr("action), $(form).serialize());

來源

2013-04-29 06:07:33

jQuery：AJAX完成時提交表單

回答

相關問題