問題描述

我有一個帶有兩個輸入文本框的表單，并且我已經包含了兩個輸入文本框的 jQuery 驗證規則:

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 />

我用過:

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. 在文本框 1 中輸入少于 5 個字符的文本
2. 將文本框 2 留空
3. 點擊提交
4. 兩個輸入文本框的背景都會變成紅色(這是正確的)
5. 現在在文本框 1 中輸入一個包含 6 個字符的文本(有效輸入)
6. 將文本框 2 留空
7. 點擊提交
8. 兩個文本框的背景顏色保持紅色.期望文本框 1 的背景顏色不應該是紅色

我該如何解決這個問題?

How do I resolve this problem?

推薦答案

找到答案，您還必須提供 unhighlight 屬性.

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

將錯誤類添加到無效元素及其標簽

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

更多信息

這篇關于JQuery 驗證插件 - 錯誤高亮問題的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！