JQuery validation plugin - error highlight problem

Question

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

<script src="../../Scripts/jquery-validate/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
    $('#respondForm').validate({ onclick: false,
      onkeyup: false,
      onfocusout: false,
      highlight: function(element, errorClass) {
        $(element).css({ backgroundColor: 'Red' });
      },
      errorLabelContainer: $("ul", $('div.error-container')),
      wrapper: 'li',
      rules: {
        'text': {
          required: true,
          minlength: 5,
          maxlength: 10
        },
        integer: {
          required: true,
          range: [0, 90]
        }
      },
      messages: {
        'text': {
          required: "xxx_Required",
          minlength: "XXX Should be greater than 5",
          maxlength: "XXX Cannot be greater than 10"
        },
        integer: {
          required: "is required",
          range:  "is out of range: [0,90]"
        }
      }
    });
  });
</script>
</head>
.
.
.
<input type="text" id="text" name="text" />    
<br />
<input type="text" id="integer" name="integer" />
<br />
<input type="submit" name="submit" value="Submit" />
<br />

I have used:

function(element, errorClass) {
  $(element).css({ backgroundColor: 'Red' });
}

to highlight the error control. Now the problem is that in the following scenario, both the input textboxes remain highlighted (background color: red):

1. Input text with less than 5 characters in text box 1
2. Leave text box 2 blank
3. Hit submit
4. Both input text box background will be changed to red (which is correct)
5. Now enter a text which has 6 characters in text box 1 (valid input)
6. Leave text box 2 empty
7. Hit submit
8. The background color for both the textboxes remains red. Where as the expectation is that the background color of text box 1 should not be red

How do I resolve this problem?

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, will have to provide an unhighlight property as well: Adds the error class to both the invalid element and it's 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