提交表單之前進行驗證

Question

我在做什么
我正在使用jquery來驗證表單，然后再將其發送到服務器。
我正在驗證每個輸入，如果其中任何一個返回false，則調用event.preventDefault()並顯示錯誤。（如果返回true，則不執行任何操作...）

問題
它運行良好，腳本始終在表單發送之前運行，但是現在我正在使用ajax驗證電子郵件-檢查db中是否已經沒有電子郵件或域是否存在...但是當ajax啟動時，表單不會等到它完成並在ajax完成和輸入驗證之前發送自己。

可能有一些解決方案
我可以調用event.preventDefault()和驗證完成后，它我可以嘗試撤消返回true preventDefault通過perhabs unbind ，然后submit通過jQuery的再次提交表單。

或者我可以做onsubmit="checkInputs();" 它應該等到它返回true或false ...

解決方案 -改編自用戶Mirage接受的答案

function validate(){
    $.ajax({
        url: 'http://google.nl',
        async: false,
        type: "POST",
        data: {test:'request'},
        success: function(data){
            console.log(data);
        }
    });    
    return data; // important
}

Answer 1

嘗試添加

async: false

例：

$.ajax({
    url: 'http://google.nl',
    async: false,
    type: "POST",
    data: {test:'request'},
    success: function(data){
        console.log(data);
    }
});

Answer 2

你要：

onsubmit="checkInputs(); return false;"

然后，您將獲取表格，例如：

var frm = document.getElementById("myfrm");
frm.submit();

您可以將以上內容置於驗證邏輯的else條件中。 希望這可以幫助。

Answer 3

您的腳本流應如下所示：

1. 綁定onsubmit處理程序
2. 使用ajax將vars發送到服務器
3. 檢查結果
   1. 驗證時：刪除處理程序並發布表單
   2. 如果為false：顯示錯誤消息，然后重新開始。

並在代碼中：

var handleValidationResponse = function(data) {
    if(data.errors != 0) {
        alert('Sorry my dear user, but you made a mistake');
        return false;
    }
    // aight, so it's all fine
    $('#myForm').off('submit').trigger('submit'); // unbind custom submit handler and post the form
};

$('#myForm').on('submit', function(e) {
    e.preventDefault();

    var $this = $(this);
    var serializedFormData = $this.serializeArray();
    $.post($this.attr('action'), serializedFormData, function(data) {
        handleValidationResponse(data);
    });
});

就是這樣！