將jquery.validate與bootstrap popover集成

Question

我有一個使用jquery.validate插件驗證的注冊表格。

現在，如果表單無效，我想將validate的結果放入bootstrap popover中，但實際上，我不知道如何執行此操作。

一些幫助？

Answer 1

jQuery.validate插件有一個名為errorPlacement的方法。

這需要兩個參數：

error ：驗證器在該元素上創建的錯誤消息。
element ：正在驗證的元素。

驗證器在此處發送錯誤/有效消息，您可以在那里處理所有放置邏輯。 我傾向於將所有內容放入.setDefaults然后初始化驗證程序。

例：

jQuery.validator.setDefaults({
   ignore: "",
   errorPlacement: function (error, element){
       // Insert error messgae placement logic here
   }
});

Answer 2

為了顯示和隱藏錯誤提示，您需要使用errorPlacement和success回調函數。

由於您沒有顯示自己的代碼，因此使用Tooltipster插件進行類似的設置，只是讓您了解如何使用這些回調函數。 根據需要調整Bootstrap彈出式窗口或您可能使用的任何其他工具提示插件。

$(document).ready(function () {

    $('#myform').validate({
            // rules and options here,
            errorPlacement: function (error, element) {
                // construct tooltip with message as per plugin method
                $(element).tooltipster('update', $(error).text());  
                // show tooltip as per plugin method
                $(element).tooltipster('show');
            },
            success: function (label, element) {
                // hide tooltip as per plugin method
                $(element).tooltipster('hide');
            }
    });

});

演示： http : //jsfiddle.net/kyK4G/

參考： https : //stackoverflow.com/a/14741689/594235

文檔： http : //jqueryvalidation.org/validate