JQuery验证插件 - 错误突出显示问题 [英] JQuery validation plugin - error highlight problem

问题描述

我有一个带有两个输入文本框的表单，我已经包括了两个jQuery验证规则：

 < script src =../../ Scripts / jquery-validate / jquery.validate.jstype =text / javascript>< / script> 
< script type =text / javascript> 
 $（document）.ready（function（）{
 $（'＃respondForm'）。validate（{onclick：false，
 onkeyup：false，
 onfocusout： 
 highlight：function（element，errorClass）{
 $（element）.css（{backgroundColor：'Red'}）; 
}，
 errorLabelContainer： ，$（'div.error-container'）），
 wrapper：'li'，
 rules：{
'text'：{
 required：true，
 minlength：5，
 maxlength：10 
}，
 integer：{
必需：true，
范围：[0,90] 
} b $ b}，
消息：{
'text'：{
必需：xxx_Required，
 minlength：XXX应大于5，
 maxlength：XXX不能大于10
}，
整数：{
必需：必需，
范围：超出范围：[0,90 ]
} 
} 
}）; 
}）; 
< / script> 
< / head> 
。 
。 
。 
< input type =textid =textname =text/> 
< br /> 
< input type =textid =integername =integer/> 
< br /> 
< input type =submitname =submitvalue =Submit/> 
< br /> 
  

我使用了：

  function（element，errorClass）{
 $（element）.css（{backgroundColor：'Red'}）; 
} 
  

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

1. 在文本框中输入5个字符1


2. 输入文本框2空白




4. 现在输入文本框1中有6个字符的文本（有效输入）


5. 离开


6. 两个文本框的背景颜色保持为红色。其中期望的是文本框1的背景颜色不应为红色

如何解决此问题？

解决方案

找到答案，你必须提供一个 unhighlight / p>

将错误类别添加到无效元素及其标签

  $（。selector）。validate（{
 highlight：function（element，errorClass）{
 $（element）.addClass（errorClass）; 
 （element.form）.find（label [for =+ element.id +]）
 .addClass（errorClass）; 
}，
 unhighlight：function ）{
 $（element）.removeClass（errorClass）; 
 $（element.form）.find（label [for =+ element.id +]）
 .removeClass （errorClass）; 
} 
}）; 
  

更多信息

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?

解决方案

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

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

这篇关于JQuery验证插件 - 错误突出显示问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！