jquery - JQuery 验证插件 - 错误高亮问题

Question

我有一个带有两个输入文本框的表单，并且我已经包含了两者的 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' });
}

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

1. 在文本框 1 中输入少于 5 个字符的文本
2. 将文本框 2 留空
3. 点击提交
4. 两个输入文本框背景都会变成红色（这是正确的）
5. 现在在文本框 1 中输入一个包含 6 个字符的文本（有效输入）
6. 将文本框 2 留空
7. 点击提交
8. 两个文本框的背景颜色保持红色。期望文本框1的背景颜色不应该是红色

我该如何解决这个问题？

Answer 1

找到答案，您还必须提供一个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);
  }
});

更多信息

Answer 2

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

您真正应该做的是通过对其应用 css 类规则来间接设置表单元素的背景（errorClass回调的参数是否应该是在错误时应用的 css 类名？在这种情况下，您应该使用它）。这样，当表单提交时，您可以轻松地重置表单的外观并重新验证：

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