jQuery Validate() Hightlight Error Input Fields

Question

Hi all,

I am using the jQuery Validate() plugin. It's been working just fine, however, I would like to Hightlight the input that has the error in it AFTER SUBMIT. I have tried the:

$(".selector").validate({
  highlight: function(element, errorClass, validClass) {
     $(element).addClass(errorClass).removeClass(validClass);
     $(element.form).find("label[for=" + element.id + "]")
                    .addClass(errorClass);
  },
  unhighlight: function(element, errorClass, validClass) {
     $(element).removeClass(errorClass).addClass(validClass);
     $(element.form).find("label[for=" + element.id + "]")
                    .removeClass(errorClass);
  }
});

...from the http://docs.jquery.com/Plugins/Validation/validate#options page, but am not able to get it to work. Do I need to create the errorClass and validClass css somewhere? does it know which Element somehow? I am a little lost.

Thanks for ideas.

EDIT: Maybe I need to look at my question more closely! I have a field that has a spam deal in it that is equal to 12, but if the user puts in 11, the form tells me there is an error, but doesn't hightlight the input that HAS the error. It will tell me it's required, but not show it if the answer is wrong... any thoughts??

Answer 1

If I understand well, here you have what you need.

The plugin automatically add the class error for those fields with invalid values and add the class valid when the input is correct.

You'd have to assign proper css styles to class error to achieve what you need.

For instance:

input.error {
   border:1px dotted red;
}

Answer 2

I ended up using PHP to check if there was an error. The JS was only validating before the form reloaded.