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

JQuery validation plugin - error highlight problem

提问by nmdr

I have a form with two input textboxes, and I have included jQuery validation rules for both:

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

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

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

How do I resolve this problem?

我该如何解决这个问题？

回答by nmdr

Found the answer, you have to provide an unhighlightproperty as well.

找到答案，您还必须提供unhighlight属性。

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);
  }
});

More info

更多信息

回答by Ryan Lynch

The function you used to highlight the error control sets the css property backgroundColorto 'red'using the jQuery.css()function, which puts the rule in the styleattribute on the element. If you don't have another callback function that resets the background on the element to inheritusing 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.

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

What you should really do is set the background on the form element indirectly by applying a css class rule to it (Is the errorClassargument 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:

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

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