jQuery validation on a checkbox group using class

Question

My question is very similar to jQuery Validation using the class instead of the name value1. I want to validate a checkbox group, such that at least one needs to be checked. By default, both checkboxes are checked, but I want to ensure the user doesn't uncheck both. The checkboxes are

    <div>
    <input type="checkbox" class="channel" name="web" checked />
    <label for="web" class="check">Web</label>
    <input type="checkbox" class="channel" name="mobile" checked />
    <label for="mobile" class="check">Mobile</label>
    </div>

The jquery I have is:

$("#searchForm").validate({
    rules:{
            ...
            ...
            ...
    }
});

$(".channel").rules("add", {  
    required: true, 
     minlength: 1

});

However, this doesn't work quite as expected. If I check neither of the boxes or only the second one (mobile), the form won't submit and I get an error message on the first one. What am I doing wrong?

Richard Neil Ilagan · Accepted Answer · 2011-03-24T09:34:05.767

4

I'm not sure if I'd use jQuery Validation for something like this, but if you just want to make sure that there is at least one checked checkbox in any group (whether that be class, or any other attribute), you can just check the length of any proper selector.

if ($('.channel:checked').length == 0) {
    // validation fails
}

EDIT

Without using Validation, you can stop the submit by doing something like:

$('form').submit(function(e){
    if ($('.channel:checked').length == 0) {
        // validation fails, so stop submit
        e.preventDefault();
    }
});

edited Mar 24 '11 at 09:34

answered Mar 23 '11 at 17:38

Richard Neil Ilagan

14,627
5
48
66

Thanks for your help. I'm using jquery validation for the rest of the form, and use the validation function to handle the form submission as well - if the form passes validation, it disables the submit button and submits the form. – Rachel Mar 24 '11 at 09:28
Yeap, that's what I was thinking you were trying to do. Check out the updated answer above; that should do what you were trying to do without having to deal with explicitly setting jQuery validation rules. – Richard Neil Ilagan Mar 24 '11 at 09:35

score 1 · Answer 2 · answered May 16 '13 at 03:24

If you are using the jQuery plugin Validation, you can set up your HTML like this:

<form class="commentForm" method="get" action="">
    <fieldset>
        <p>
            <label for="transportation">Transportation</label>
            <input class="ccheckbox" type="checkbox" name="transportation" value="Bike">I have a bike <br />
            <input class="ccheckbox" type="checkbox" name="transportation" value="Car">I have a car <br />
            <input class="ccheckbox" type="checkbox" name="transportation" value="Walk">I walk
        </p>
        <p>
            <input class="submit" type="submit" value="Submit"/>
        </p>
    </fieldset>
</form>

You should add the "message" and the "rules" options to your form validation. Use the "depends" property to set up a conditional test that will test for the presence of checked boxes.

        $(".commentForm").validate({
            messages: {
                transportation: {
                    required: "How do you get around?"
                },
            },
            rules: {
                transportation:{
                    required: {
                        depends: function(element) {
                            return $('input[name="transportation"]:checked').length == 0;
                        }
                    }
                }               
            }
        });

jQuery validation on a checkbox group using class

2 Answers2