JQueryvalidation插件 – 错误突出显示问题

我有一个带有两个输入文本框的表单，我已经包含了两个jQueryvalidation规则：

  $(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]" } } }); });   . . .  
  
  
 

我用过：

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

突出显示错误控制。 现在的问题是，在以下场景中，两个输入文本框都保持突出显示（背景颜色：红色）：

1. 在文本框1中输入少于5个字符的文本
2. 将文本框2留空
3. 命中提交
4. 两个输入文本框背景都将更改为红色（这是正确的）
5. 现在输入文本框1中有6个字符的文本（有效输入）
6. 将文本框2留空
7. 命中提交
8. 两个文本框的背景颜色仍为红色。 期望的是文本框1的背景颜色不应该是红色

我该如何解决这个问题？

Answer 1

找到答案，你必须提供一个unhighlight属性。

将错误类添加到invalid元素及其标签

 $(".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); } }); 

更多信息

Answer 2

用于突出显示错误控件的函数使用jQuery.css()函数将css属性backgroundColor为'red' ，该函数将规则放在元素的style属性中。 如果你没有另一个回调函数来重置要使用jQuery.css()函数inherit的元素的背景，或者以其他方式覆盖/删除样式标记中的规则，那么规则将保留在原位并且表单元素将继续有红色背景。

你真正应该做的是通过对它应用一个css类规则来间接设置表单元素的背景（你的回调的errorClass参数应该是一个css类名来应用于错误吗？我应该使用那个）。 这样，当表单提交时，您可以轻松地重置表单的外观并重新validation：

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