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

Question

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

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

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

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

有什么方法可以分别为消息和目标元素指定错误 CSS class 吗？

Answer 1

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

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

1. CSS 定位...

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

label.yourerrorclass {
    /* some styling */
}

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

演示 1：http://jsfiddle.net/ndpngtrn/3/

2。 .validate()...

的选项

否则，highlight 和 unhighlight 选项控制类对每个元素的应用。您将不得不编写自定义 highlight 和 unhighlight 函数来覆盖默认行为。由于 highlight 和 unhighlight 仅影响输入元素的样式而不影响错误标签，因此您有机会区分两者 CSS。

错误标签：插件内部应用的默认值error/validCSS类。只能通过 errorClass 和 validClass 选项分配不同的类或更改 CSS.
输入元素：CSS 样式是 applied/removed 通过 highlight 和 unhighlight 函数。默认情况下，与错误标签相同的 error/valid CSS 类，但是，您可以将 highlight 和 unhighlight 覆盖为 apply/remove 任何您想要的样式，从而实现与错误标签不同的样式。

要简单地停止 highlight 和 unhighlight 从 adding/removing 任何类到每个 input 元素，请使用 return false。 （如果您还想 add/remove 其他类独立于您的错误消息，请参阅注释行）

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 参数分别表示插件定义的默认类。

演示 2：http://jsfiddle.net/ndpngtrn/5/

解决方案 2 适用于您的 jsFiddle：http://jsfiddle.net/9me7bmny/2/

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

jQuery Validate plugin controlling CSS on error label only

css

jquery

jquery-validate

twitter-bootstrap