如何使用jQuery Validator獲取所有無效元素？

Question

我在做什麼：

我需要遍歷所有HTML對象裏面有一些無效的值。這是必要的，因爲我有選項卡頁面，我需要打開發生錯誤的某個特定選項卡。爲了做到這一點，我需要獲得這些對象的父對象。

這是我想解決這個問題：

$form.validate().settings.invalidHandler = function (form, validator) { 
    var errors = validator.numberOfInvalids(); 
    if (errors) { 
     validator.errorList[0].element.focus(); 
     for (var invObj in validator.errorList) { 
      //do something for each invalid object 
     } 
    } 
}; 

其中$形式是<form>對象，有一定的投入，內部驗證。

我以爲在我打電話給$form.validate()或$form.valid()後，將會調用每個無效對象。事實上，它根本不叫。你知道一些更好的方法來完成它嗎？

Answer 1

如何使用jQuery Validator獲取所有無效元素？

這是我想解決這個問題：

你沒有解釋你想要做什麼。

你知道一些更好的方法來實現它嗎？

你還沒有解釋什麼是你想完成什麼，或爲什麼the example in the documentation從來沒有嘗試過。

通常，將其自定義的invalidHander回調放在.validate()方法內。你跟着the documentation？

$("#myform").validate({ 
    // other rules, options, callbacks, etc., 
    invalidHandler: function(event, validator) { 
     var errors = validator.numberOfInvalids(); // <- NUMBER OF INVALIDS 
     console.log(errors); 
    } 
}); 

後正確初始化使用.validate()法的形式，你會得到殘疾人的數量，當表單驗證第一次被觸發。

DEMO：http://jsfiddle.net/t2vdfjyn/

然而，如果你想殘疾人的數量產生的或現有的錯誤被清除後，每一個新的錯誤進行自我更新，那麼invalidHandler沒有使用正確的功能;你需要the showErrors callback而不是...

$("#myform").validate({ 
    // other rules, options, callbacks, etc., 
    showErrors: function(errorMap, errorList) { 
     var errors = this.numberOfInvalids(); // <- NUMBER OF INVALIDS 
     console.log(errors); 

     this.defaultShowErrors(); // <- ENABLE default MESSAGES 
    } 
}); 

DEMO 2：http://jsfiddle.net/t2vdfjyn/1/

---

編輯：

代碼中的註釋：

//do something for each invalid object 

做一些對於每個無效的對象是插件自動處理的內容 ...它基本上是這個插件設計的後半部分。如果你準確地解釋什麼你想要爲每個無效對象做什麼，我可以告訴你哪個jQuery Validate option可以用於此目的。

---

編輯2：

我已經標籤頁，我需要打開發生錯誤的一些特定的標籤。爲了做到這一點，我需要獲得這些對象的父對象。

The showErrors callback function有兩個參數...

• errorMap：鍵/值對，其中所述鍵是指輸入字段的名稱，值要顯示該輸入的消息。

• errorList：一個數組，用於所有當前驗證的元素。包含具有以下兩個屬性的對象：

  • message，類型：字符串，要顯示的輸入消息。
  • element，類型：元素，此條目的DOM元素。

好像您需要了解此處將包含在輸入要素的所有信息。一旦你有了輸入元素的name，你可以使用jQuery來獲取父元素。

showErrors: function(errorMap, errorList) { 
     var errors = this.numberOfInvalids(); // <- NUMBER OF INVALIDS 
     $("#num_invalids").html(errors); 

     console.log(errorMap); 
     $.each(errorMap, function(key, value) { 
      console.log(key); // <- name of invalid field 
      var parent = $('[name="' + key + '"]').parent(); 
      console.log(parent); // <- parent object 
     }); 

     this.defaultShowErrors(); // <- ENABLE default MESSAGES 
    } 

DEMO 3：http://jsfiddle.net/t2vdfjyn/2/