How to remove error class using jQuery Validate?

Question

I have a form that adds an error class to the parent div for a set of checkboxes using the jQuery Validate plugin. However, when a checkbox is selected, the error class is removed but the CSS styling remains. Any ideas what I'm doing wrong?

Example: http://jsfiddle.net/qK3SC/

HTML:

<form name="itemForm" id="itemForm" method="post">
<div id="boxes">
    <input type="checkbox" id="check1" class="require-one" value="1" /> Item #1
    <input type="checkbox" id="check2" class="require-one" value="2" /> Item #2
</div>
<div id="freetext">
    <input type="text" class="required" />
</div>
<input type="submit" />
</form>

Javascript:

$.validator.addMethod('require-one', function(value) {
    return $('.require-one:checked').size() > 0;
}, 'Please check at least one box.');

var checkboxes = $('.require-one');
var checkbox_names = $.map(checkboxes, function(e, i) {
    return $(e).attr("name")
}).join(" ");

$("#itemForm").validate({
    groups: {
        checks: checkbox_names
    },
    errorPlacement: function(error, element) {
        if (element.is(':checkbox')) {
            $(element).parent('div').addClass('checkbox-error');

        }
        return true;
    }
});

UPDATE:

I was able to use the highlight/unhighlight methods to get the error class to work for the checkboxes, but now the error class for my other elements are not working (i.e. text inputs and dropdowns). See: http://jsfiddle.net/qK3SC/7/

Regarding your "update" and jsFiddle #7 above: Using "highlight", you are now applying your green check-box error class to everything including the text box. See: jsfiddle.net/qK3SC/10 — Sparky
– Sparky, Commented Dec 19, 2011 at 20:06
You also created a custom Validator method called require-one but I don't see it being used anyplace. — Sparky
– Sparky, Commented Dec 19, 2011 at 20:26
@Sparky672 your last fiddle is close to what i'm looking for. it is difficult to show the validation for textboxes, so ideally, i'd like to turn the text of the checkboxes red and the background of the text input red. If you look at my first fiddle (jsfiddle.net/qK3SC), I am doing that, but the checkbox error class doesn't get removed when one is selected. Any ideas? — Michael
– Michael, Commented Dec 20, 2011 at 12:37

Michael · Accepted Answer · 2012-02-05 23:38:40Z

1

Combined the logic.

http://jsfiddle.net/qK3SC/13/

answered Feb 5, 2012 at 23:38

Michael

2,29416 gold badges49 silver badges80 bronze badges

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

Comments

Shoogle · Accepted Answer · 2011-12-18 09:22:33Z

0

Have you tried using the success option in your validate method? like

    $("#itemForm").validate({
groups: {
    checks: checkbox_names
},
errorPlacement: function(error, element) {
    if (element.is(':checkbox')) {
        $(element).parent('div').addClass('checkbox-error');

    }
    return true;
},
 success: function(){
       $('.checkbox-error').removeClass('.checkbox-eror');
}
    });

edited Dec 18, 2011 at 9:22

answered Dec 18, 2011 at 5:01

Shoogle

2061 silver badge14 bronze badges

2 Comments

Michael Over a year ago

This doesn't seem to be working. jsfiddle.net/qK3SC/6. The error class isn't removed from the parent div (text is still green in example).

Michael Over a year ago

I was able to use the highlight/unhighlight methods to get the error class to work for the checkboxes, but now the error class for my other elements are not working. jsfiddle.net/qK3SC/7

Collectives™ on Stack Overflow

How to remove error class using jQuery Validate?

UPDATE:

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE:

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest