JQuery validation plugin - error highlighting problem

Question

I have a form with two text input fields, 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 used:

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

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

• Enter text with text less than 5 characters in text box 1
• Leave text box 2 blank
• Hit send
• Both background text input will be changed to red (this is true)
• Now enter the text with 6 characters in the text box 1 (actual input)
• Leave text box 2 blank
• Hit send
• The background color for both text fields remains red. Where as an expectation is that the background color of text box 1 should not be red.

How to solve this problem?

Answer 1

If you find the answer, you must also provide the unhighlight property.

Adds an error class both to an invalid element and to 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); } }); 

Additional Information

Answer 2

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

What you really have to do is set the background in the form element indirectly by applying a CSS class rule to it. (Is the errorClass argument your callback, which should be the css class to apply on error? In this case, you should use this). That way, when the form submits to you, you can easily reset submit the form and confirm it:

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