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. 在文本框中小於5個字符1
2. 離開文本框2空白
輸入文本
3. 點擊提交
4. 兩個輸入文本框的背景將變爲紅色（這是正確的）
5. 現在進入其在文本框中輸入6個字符1（有效輸入）
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); 
    } 
}); 

More info

Answer 2

你用來突出誤差控制功能使用jQuery.css()功能，這使該規則在元素上的style屬性CSS屬性backgroundColor設置爲'red'。如果您沒有其他回調函數使用jQuery.css()函數將元素上的背景重置爲inherit，或者重寫/刪除樣式標記中的規則，則該規則將保留原位並且表單元素將繼續存在紅色背景。

你應該真正做的是通過應用css類規則來間接設置窗體元素的背景（你的回調的errorClass參數應該是錯誤應用的css類名嗎？使用它）。當表單提交，你可以很容易地重置表單的外觀和重新驗證這樣的話：

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