jQuery Validation错误类影响Select元素

Question

When a validation error occurs on a <select> form element after pressing the submit button, the errorClass appears to be applied to the <select> element which is not what I want. errorClass should only be applied to the error message.

Question: How can we avoid that problem?

jsFiddle : http://jsfiddle.net/ufTn8/

---

Update

jsfiddle : http://jsfiddle.net/SPK3D

If you take a look at updated code, when the error occurs, the class alert is not applied to the error element until u click on the error element... this strange behavior is seen in both Chrome and Firefox.

Somehow $(element).siblings('label.error').addClass('alert'); did not add the alert class initially...

Answer 1

You can use the highlight and unhighlight callback functions to apply whatever class you wish to whatever element you wish. Below are the default functions. By including them as options inside .validate() , you can over-ride these defaults with whatever code you wish.

    highlight: function( element, errorClass, validClass ) {
        if ( element.type === "radio" ) {
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).addClass(errorClass).removeClass(validClass);
        }
    },
    unhighlight: function( element, errorClass, validClass ) {
        if ( element.type === "radio" ) {
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
        } else {
            $(element).removeClass(errorClass).addClass(validClass);
        }
    }

EDIT :

Regarding OP's amended question,

"Somehow $(element).siblings('label.error').addClass('alert'); did not add the alert class initially..."

That's because you are trying to select label.error and it does not exist yet. You must have a label.error before you can select it and apply .alert ... those two things can't happen simultaneously.

A workaround might include changing the default errorClass for the plugin to .alert and then using highlight and unhighlight to apply whatever other classes need to be applied to the select element.

See: http://jsfiddle.net/SPK3D/1/