jQuery驗證插件僅控制錯誤標籤上的CSS

我試圖控制使用jQuery Validate插件時出現的錯誤消息的樣式。我想要應用Bootstrap的label label-danger CSS類。根據文檔，我正在使用errorClass配置屬性。jQuery驗證插件僅控制錯誤標籤上的CSS

$("#frm").validate({ 
    errorClass: "label label-danger" 
});

的問題是該插件也適用這些類的input元件，然後使它們不可見的。

看到一個完整的演示在這裏：http://jsfiddle.net/9me7bmny/

有沒有辦法來指定消息，並獨立於目標元素錯誤CSS類？

來源

2015-06-18 Aheho

此默認演示提供了以下兩種解決方案的基礎上...

默認：http://jsfiddle.net/ndpngtrn/

1 CSS定位...

如果您還沒有更改了默認錯誤消息元素，它將是一個label。您可以使用CSS來獨立於input元素來定位此label元素。這可能是從label的造型中辨別input的造型的最簡單方法。

label.yourerrorclass { 
    /* some styling */ 
} 

input.yourerrorclass { 
    /* some other styling */ 
}

DEMO 1：http://jsfiddle.net/ndpngtrn/3/

2. .validate()選項...

否則，highlight和unhighlight選項控制的類的每個元素中的應用。您將不得不編寫自定義highlight和unhighlight函數來覆蓋默認行爲。由於highlight和unhighlight僅影響輸入元素上的樣式而不影響錯誤標籤，因此您有機會區分這兩者之間的CSS。

錯誤標籤：默認的錯誤/ CSS有效的插件應用內部類。樣式只能通過errorClass和validClass選項分配不同的類或通過更改CSS來更改。
輸入元素：CSS樣式通過highlight和unhighlight函數應用/刪除。默認情況下，與錯誤標籤相同的錯誤/有效CSS類別，但是，您可以替代highlight和unhighlight來應用/刪除所需的任何樣式，從而實現與錯誤標籤不同的樣式。

爲了簡單地從添加/移除的任何類到每個input元件停止highlight和unhighlight，使用return false。 （見註釋行，如果你也想從你的錯誤消息獨立添加/刪除其他類的輸入元素）

highlight: function (element, errorClass, validClass) { 
    return false; 
    //$(element).addClass('foo').removeClass('bar'); 
}, 
unhighlight: function (element, errorClass, validClass) { 
    return false; 
    //$(element).addClass('bar').removeClass('foo'); 
}

的errorClass和validClass參數代表由插件定義各自的默認類。

DEMO 2：http://jsfiddle.net/ndpngtrn/5/

解決方案2應用到您的jsfiddle：http://jsfiddle.net/9me7bmny/2/

來源

2015-06-18 19:22:34 Sparky

jQuery驗證插件僅控制錯誤標籤上的CSS

回答

相關問題