JQuery validation plugin - error highlight problem
Solution 1
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);
}
});
Solution 2
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();
coder_bro
Updated on April 07, 2020Comments
-
coder_bro about 4 years
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):
- Input text with less than 5 characters in text box 1
- Leave text box 2 blank
- Hit submit
- Both input text box background will be changed to red (which is correct)
- Now enter a text which has 6 characters in text box 1 (valid input)
- Leave text box 2 empty
- Hit submit
- 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?