jQuery验证错误类未从字段中删除 [英] jQuery validate error class not removing from field

问题描述

我有一个用于jQuery验证的自定义方法(基于

I've a custom method for jQuery validate (based on Sparky's answer for a related question) that checks to make sure that one from a group of four text fields has a value in it. This works fine, except I've just noticed that even though the error message disappears when a value has been entered in one of the fields, the error class remains in place so the text fields highlighted in the error colour (red background in this example).

关于如何解决此问题的任何想法?

Any ideas on how this can be fixed?

谢谢.

这是问题的 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; 
}

推荐答案

如果错误类通过验证，则需要扩展您的验证方法以删除该错误类.试试这个:

You'll need to extend your validation method to remove the error class if it passes validation. Try this:

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

这篇关于jQuery验证错误类未从字段中删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！