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?
--
View this message in context:
http://old.nabble.com/JQuery-validation-plugin---error-highlight-problem-tp26282040s27240p26282040.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
