不要回調元素是否無效

Question

我有這樣的代碼，驗證我的形式：

jQuery("form#theform").validate({   
     rules: { 
      email_again: { 
       equalTo: "#email" 
      } 
     } 
    }); 

這個工作，但是，我需要做的功能，而email_again是不相等的。我需要訪問函數中的'元素'。

所以，我想答案可能看起來像

rules: { 
      email_again: { 
       equalTo: "#email" 
       invalidcallback: function(element){ 
        // do sth with element 
       } 

      } 
     } 
    }); 

我不覺得這事上的文檔。

---

編輯：

斯帕克讓我幾乎沒有：

rules: { 
     email: { 
      required: true 
     }, 
     email_again: { 
      equalTo: "#email" 
     } 
    }, 
    highlight: function(element, errorClass, validClass) { 
     // custom code for 'email_again' field 
     if (element.name === "email_again") { 
      console.log('email_again in error'); 
     } 
     // default 'highlight' code below 
     if (element.type === "radio") { 
      this.findByName(element.name).addClass(errorClass).removeClass(validClass); 
     } else { 
      $(element).addClass(errorClass).removeClass(validClass); 
     } 
    } 
} 

現在，我需要知道被打破規則。我需要知道，這是「equalTo」這樣我就可以找到兄弟標籤和添加一個類到它：

jQuery(element).siblings('label').addClass('error NotEqualTo'); 

或者，如果我有equalTo「比較」（在這種情況下#email）我可以自己做相等的比較，並做適當的addClass。

Answer 1

rules: { 
    email_again: { 
     // list of only methods/rules 
     equalTo: "#email" // <- this is a valid method/rule 
     invalidcallback: function(element) { // <- INVALID - this is not a method/rule 
      .... 
     } 
    } 
} 

沒有任何特定於任何特定字段的回調函數無效時。只允許列出鍵值對的字段：rules對象字面值內的規則。您所需的回調函數不是公認的規則。

但是，有a callback that's fired every time any field is invalid called highlight。使用爲您的email_again字段封裝自定義代碼的條件。一定要包含默認的highlight代碼，否則你會破壞該插件。

highlight: function(element, errorClass, validClass) { 
    // custom code for 'email_again' field 
    if (element.name === "email_again") { 
     console.log('email_again in error'); 
    } 
    // default 'highlight' code below 
    if (element.type === "radio") { 
     this.findByName(element.name).addClass(errorClass).removeClass(validClass); 
    } else { 
     $(element).addClass(errorClass).removeClass(validClass); 
    } 
} 

證明了概念DEMO：http://jsfiddle.net/r98g06kz/

---

編輯：

既然你想改變類的應用方式，簡單地調整默認代碼.. 。

highlight: function(element, errorClass, validClass) { 
    if (element.type === "radio") { 
     this.findByName(element.name).addClass(errorClass).removeClass(validClass); 
    } else { 
     if (element.name === "email_again") { 
      // your custom class 
      $(element).siblings('label').addClass('error NotEqualTo'); 
     } else { 
      $(element).addClass(errorClass).removeClass(validClass); 
     } 
    } 
} 

然後你還需要在unhighlight回調如下...

unhighlight: function(element, errorClass, validClass) { 
    if (element.type === "radio") { 
     this.findByName(element.name).removeClass(errorClass).addClass(validClass); 
    } else { 
     if (element.name === "email_again") { 
      // your custom class 
      $(element).siblings('label').removeClass('error NotEqualTo'); 
     } else { 
      $(element).removeClass(errorClass).addClass(validClass); 
     } 
    } 
}