jQuery validate error class not removing from field

Question

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?

Thanks.

Here's a jsfiddle of the issue.

Here's my script:

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

});

Here's my 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>

Here's my CSS:

input.error { 
    background: red; 
}

For text fields, you should be using the require_from_group method from the additional-methods.js file. Then this additional error message manipulation would have been unnecessary. — Sparky
– Sparky, Commented Dec 19, 2014 at 17:59

Mathew Thompson · Accepted Answer · 2013-03-06 11:22:43Z

2

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");

Fiddle: http://jsfiddle.net/u4WM4/3/

answered Mar 6, 2013 at 11:22

Mathew Thompson

56.5k15 gold badges131 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Stephen Over a year ago

Thanks for this Matty. I've applied your answer to my code and it does the job!

Mathew Thompson Over a year ago

@Stephen No problems, glad I could help!

Sparky Over a year ago

You should not be manipulating classes within the rule/method because the plugin already handles all of this automatically. Besides, the whole thing was unnecessary in the first place because the the additional-methods.js file contains the require_from_group method which fully handles making one or more fields from a group of fields required.

Collectives™ on Stack Overflow

jQuery validate error class not removing from field

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related