jQuery驗證錯誤類不從字段中刪除

我有一個自定義的jQuery驗證方法（基於Sparky's answer的相關問題），檢查以確保來自一組四個文本字段中的一個文本字段中有一個值。這工作正常，除了我剛纔注意到，即使錯誤消息在某個字段中輸入值時消失，錯誤類仍保留在原位，所以文本字段在錯誤顏色中突出顯示（本例中爲紅色背景）。jQuery驗證錯誤類不從字段中刪除

關於如何解決這個問題的任何想法？

謝謝。

這是一個jsfiddle的問題。

這裏是我的腳本：

$(document).ready(function() { 

    $.validator.addMethod("textboxrule", function (value, element) { 
     return ($('#my_text_field_1').val() != '' || $('#my_text_field_2').val() != '' || $('#my_text_field_3').val() != '' || $('#my_text_field_4').val() != '') 
    }, "Select at least one of these four"); 

    $('.my_form').validate({ // initialize the plugin 
     errorLabelContainer: ".form_errors", 
     wrapper: "li", 
     groups: { 
      somename: "my_text_field_1 my_text_field_2 my_text_field_3 my_text_field_4" 
     }, 
     rules: { 
      'my_text_field_1': { 
       textboxrule: true 
      }, 
      'my_text_field_2': { 
       textboxrule: true 
      }, 
      'my_text_field_3': { 
       textboxrule: true 
      }, 
      'my_text_field_4': { 
       textboxrule: true 
      } 
     }, 
     submitHandler: function (form) { // for demo 
      alert('valid form submitted'); // for demo 
      return false; // for demo 
     } 
    }); 

});

這裏是我的HTML：

<form class="my_form" method="post" action="#"> 
    <div> 
     <ul class="form_errors"></ul> 
    </div> 
    <p> 
<label>My text field 1</label> 
<input id="my_text_field_1" name="my_text_field_1" type="text" value="" /></p> 

<p> 
    <label>My text field 2</label> 
    <input id="my_text_field_2" name="my_text_field_2" type="text" value="" /> 
</p> 

<p> 
    <label>My text field 3</label> 
    <input id="my_text_field_3" name="my_text_field_3" type="text" value="" /></p> 

<p> 
    <label>My text field 3</label> 
    <input id="my_text_field_4" name="my_text_field_4" type="text" value="" /></p> 

    <input type="submit" value="Submit" /> 
</form>

這裏是我的CSS：

input.error { 
    background: red; 
}

來源

2013-03-06 Stephen

對於文本字段，你應該使用[了'require_from_group'方法（http://jqueryvalidation.org/require_from_group-method/）從[了'附加-methods.js'文件]（http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/additional-methods.js）。那麼這個額外的錯誤信息操作就不必要了。 – Sparky 2014-12-19 17:59:43

您需要延長您的驗證方法來去除錯誤類如果它通過驗證。試試這個：

$.validator.addMethod("textboxrule", function (value, element) { 
    var returnValue = ($('#my_text_field_1').val() != '' || $('#my_text_field_2').val() != '' || $('#my_text_field_3').val() != '' || $('#my_text_field_4').val() != ''); 

    if (returnValue) { 
     $("#my_text_field_1, #my_text_field_2, #my_text_field_3, #my_text_field_4").removeClass("error"); 
    } 

    return returnValue; 
}, "Select at least one of these four");

小提琴：http://jsfiddle.net/u4WM4/3/

來源

2013-03-06 11:22:43 mattytommo

感謝這個馬蒂。我已將您的答案應用於我的代碼，並完成了這項工作！ – Stephen 2013-03-06 13:33:09

@Stephen沒問題，很高興我可以幫忙！ – mattytommo 2013-03-06 13:44:36

您不應該在規則/方法中操作類，因爲插件已經自動處理所有這些。此外，整個事情首先是不必要的，因爲[additional-methods.js'文件]（http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/additional-methods.js ）包含[require_from_group'方法]（http://jqueryvalidation.org/require_from_group-method/），它完全處理從一組所需字段中的一個或多個字段。 – Sparky 2014-12-19 17:58:49

jQuery驗證錯誤類不從字段中刪除

回答

相關問題