JQuery validation plugin - error highlight problem

Question

I have a form with two input textboxes, and I have included jQuery validation rules for both:

Answer 1

The function you used to highlight the error control sets the css property backgroundColor to 'red' using the jQuery.css() function, which puts the rule in the style attribute on the element. If you don't have another callback function that resets the background on the element to inherit using the jQuery.css() function, or otherwise overrides/removes the rule in the style tag, then the rule will stay in place and the form element will continue to have a red background.

What you should really do is set the background on the form element indirectly by applying a css class rule to it (Is the errorClass argument to your callback supposed to be a css classname to apply on error? I that case you should use that). That way when the form submits you could easily reset the appearance of the form and revalidate:

$('#theForm .errorClassName').removeClass('errorClassName');
$('#theForm').validate();

Answer 2

Found the answer, you have to provide an unhighlight property as well.

Adds the error class to both the invalid element and its label

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

More info