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验证错误类不从字段中删除

回答

相关问题