Question

我正在尝试控制使用jQuery Validate插件时出现的错误消息的样式。我想应用Bootstrap中的label label-danger CSS类。我根据文档使用errorClass配置属性。

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

问题是插件还将这些类应用于input元素，然后将它们呈现为不可见。

请在此处查看完整演示：http://jsfiddle.net/9me7bmny/

有没有办法单独为消息和目标元素指定错误CSS类？

Answer 1

此默认演示为以下两种解决方案提供了基础......

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

<强> 1。 CSS定位......

如果您尚未更改默认错误消息元素，则它将是label。您将使用CSS独立于label元素定位此input元素。这可能是区分input样式与label样式的最简单方法。

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分配不同的类来更改样式。
输入元素：通过highlight和unhighlight函数应用/删除CSS样式。默认情况下，与错误标签相同的错误/有效CSS类，但是，您可以覆盖highlight和unhighlight来应用/删除您希望的任何样式，从而实现与错误不同的样式标签。

要简单地停止highlight和unhighlight向每个input元素添加/删除任何类，请使用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/

jQuery Validate插件仅在错误标签上控制CSS

1 个答案: