jQuery Validation，提交時顯示有效/無效表單選項卡

我有一個帶有Tabs的表單，並且有一個簡單的函數用於在用戶在它們之間移動時驗證表單選項卡。（使用jQuery，引導和jquery.validate）jQuery Validation，提交時顯示有效/無效表單選項卡

標籤驗證功能

var validateTab = function(element) { 

    var _element = $(element); 
    var validatePane = _element.attr('data-target'); 
    var isValid = $(validatePane + ' :input').valid(); 
    var _li = _element.parent(); 

    // console.log(validatePane + " - " + isValid); 

    if (isValid) { 
     _li.removeClass('alert-danger'); 
     _li.addClass('alert-success'); 
    } else { 
     _li.removeClass('alert-success'); 
     _li.addClass('alert-danger'); 
    } 
}; // end function validateTab

我正在聽引導 'hidden.bs.tab' 事件，並調用該函數。

// Validate Tab on tab switch. 
$(document).on('hidden.bs.tab', 'a[data-toggle="tab"]', function(e) { 
    validateTab(e.currentTarget); 
});

預期上述作品，但我想的形式也提交時要做到這一點。我添加了一個簡單的循環來獲取每個選項卡，並打電話的jQuery validateTab（）在invalidHandler（）驗證

invalidHandler: function(event, validator) { 
    console.log('invalid form'); 
    $('#myForm').append(
    '<div class="alert alert-danger alert-dismissable">' + 
    '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">' + 
    '&times;' + 
    '</button>' + 
    '<strong>Error: </strong>' + 
    '<span>Please correct the problems and try again.</span>' + 
    '</div>' 
); 

    // ADDED THIS CODE AND STARTED RUNNING INTO PROBLEMS. 
    var $tabs = $('#myTab li a'); 
    $tabs.each(function(key, ele) { 
    // IF last Tab of form is Valid form submits regardless of other errors. 
    validateTab(ele); 
    }); 

}

這個作品有一個例外......當最後一個選項卡是有效的形式突然提出，即使有在其他選項卡上出現錯誤。它似乎調用有效覆蓋任何以前的調用或在調用invalidHandler之前設置的任何內容。整個表格突然提交，就好像它已經被成功驗證一樣。

一個完整的例子可以在這裏找到。 https://jsfiddle.net/qcean237/1/

當前沒有對TAB 4進行驗證，所以即使沒有提供其他所需字段，每次都會提交表單。

我應該以不同的方式或在不同的地方驗證選項卡來更新失敗的提交上的選項卡外觀？

感謝，彌敦道

來源

2017-04-10 Nathan

確切地說，它一直運行，直到在最後一個選項卡上調用valid（）。當最後一個標籤驗證整個表單被認爲是有效的。在invalidHandler（）裏面調用valid（）會覺得很骯髒，但是到目前爲止我已經想到了。 – Nathan

*「在invalidHandler（）中調用'valid（）''感覺髒'*〜這就是你的根本問題。 – Sparky

的invalidHandler僅火災時，形式是無效的，而當形式是有效的submitHandler僅火災。也就是說，您的validateTab()函數也會通過調用.valid()來觸發驗證。換句話說，當invalidHandler已經知道這個表單是無效的時候，通過使invalidHandler檢查有效性來打破這個插件......這是你失敗的根源。 invalidHandler和submitHandler僅在確定後才被調用......不是同時發生，否則無法知道應該觸發哪個處理程序。

不管怎麼說，只需運行validateTab()當你點擊按鈕...

$('button').on('click', function() { var $tabs = $('#myTab li a'); $tabs.each(function(key, ele) { validateTab(ele); }); });

DEMO：https://jsfiddle.net/qcean237/2/

來源

2017-04-10 16:35:54 Sparky

謝謝！我完全錯過了解決這個jquery.validate內部的問題。 – Nathan

你並不需要一個驗證invalidHandler內的每個標籤的代碼。由於當您提交表單時，所有選項卡都已經在表單內部進行驗證。

只需從invalidHandler

$tabs.each(function(key, ele) { 
    validateTab(ele); 
});

刪除下列行這裏是一個fiddle除去以上後，一切工作正常。

來源

2017-04-10 16:49:42

該OP特別聲明，*「但我希望在提交表格時也這樣做」* – Sparky

您的回答對我有意義..很好的解釋。謝謝！！ –

jQuery Validation，提交時顯示有效/無效表單選項卡

回答

相關問題