jQuery Validate plugin controlling CSS on error label only

Question

I'm trying to control the styling of the error message that appears when using the jQuery Validate plugin. I want to apply the label label-danger CSS classes from Bootstrap. I'm using the errorClass configuration attribute according to the documentation.

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

The problem is the plugin also applies these classes to the input element, which then renders them invisible.

See a full demo here: http://jsfiddle.net/9me7bmny/

Is there any way to specify the error CSS class for the message and the target element independently?

Answer 1

This default demo provides the basis for two solutions below...

Default: http://jsfiddle.net/ndpngtrn/

---

1. CSS targeting...

If you have not changed the default error message element, it will be a label. You would use CSS to target this label element independently from the input elements. This is probably the easiest way to discriminate the styling of the input from the styling of the label.

label.yourerrorclass {
    /* some styling */
}

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

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

---

2. Options for .validate()...

Otherwise, the highlight and unhighlight options control the application of classes to each element. You would have to write custom highlight and unhighlight functions to over-ride the default behavior. Since highlight and unhighlight only affect the styling on the input element and not the error labels, you have an opportunity to discriminate CSS between the two.

• error labels: default error/valid CSS classes applied internally by the plugin. Style can only be changed by assigning different classes via the errorClass and validClass options or by changing the CSS.

• input elements: CSS styles are applied/removed via the highlight and unhighlight functions. By default, the same error/valid CSS classes as the error labels, however, you can over-ride highlight and unhighlight to apply/remove any styles you wish, thereby achieving a different style than the error labels.

To simply stop highlight and unhighlight from adding/removing any classes to each input element, use a return false. (see the commented out lines if you also want to add/remove other classes to your input elements independently from your error messages)

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

The errorClass and validClass arguments represent the respective default classes defined by the plugin.

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

Solution 2 applied to your jsFiddle: http://jsfiddle.net/9me7bmny/2/