代码之家 › 专栏 › 技术社区 › coder_bro

jquery验证插件-错误突出显示问题

jquery-validate jquery-plugins css jquery

coder_bro · 技术社区 · 15 年前

我有一个带有两个输入文本框的表单,并且我为这两个文本框都包含了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中输入少于5个字符的文本
将文本框2留空
点击提交
两个输入文本框背景都将更改为红色(正确)
现在输入文本框1中有6个字符的文本(有效输入)
保留文本框2为空
命中提交
两个文本框的背景色均为红色。其中,预期文本框1的背景色不应为红色。

如何解决此问题?

2 回复 | 直到 12 年前

Tim Huntrods 12 年前

找到答案,你必须提供 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);
  }
});

More info

Ryan Lynch 15 年前

用于突出显示错误控件的函数设置了css属性 backgroundColor 到 'red' 使用 jQuery.css() 函数,它将规则放入 style 元素的属性。如果没有另一个回调函数将元素的背景重置为 inherit 使用 jQuery .CS.() 函数,或以其他方式重写/删除样式标记中的规则,然后规则将保持原位,并且表单元素将继续具有红色背景。

您真正应该做的是通过对表单元素应用CSS类规则间接地设置其背景(是 errorClass 回调的参数应该是在出错时应用的CSS类名?我觉得你应该用那个)。这样,当表单提交时,您可以轻松地重置表单的外观并重新验证:

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