我有一个带有两个输入文本框的表单,并且我包括了两个的jQuery验证规则:
<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 />
我用过了:
function(element, errorClass) { $(element).css({ backgroundColor: 'Red' }); }
突出显示错误控制。现在的问题是,在以下情况下,两个输入文本框都保持突出显示(背景色:红色):
我该如何解决这个问题?
找到答案后,您还必须提供一个unhighlight属性。
unhighlight
将错误类添加到无效元素及其标签中
$(".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); } });