Validate at least one checkbox is checked with jQuery Validator

Question

All, I'm trying to make sure at least one of my checkboxes is checked with jQuery Validator before I allow the user to submit the form. If I have the following code for my checkboxes:

<input type="checkbox" value="23" class="select" name="vendor_categories[]">&nbsp;Test1<br />
<input type="checkbox" value="8" class="select" name="vendor_categories[]">&nbsp;Test2<br />
<input type="checkbox" value="9" class="select" name="vendor_categories[]">&nbsp;Test3<br />
<input type="checkbox" value="2" class="select" name="vendor_categories[]">&nbsp;Test4<br />

Then I have the following jQuery code:

$("#register_vendor").validate({
    ignore: "",
    rules: {
        vendor_email: {
            required: true,
            email: true
        },
        vendor_name: "required",
        zip: {
            required: true,
            digits: true,
            minlength: 5
        }
    },
    messages: {
        vendor_email: {
            required: "<br>Please enter an email address!<br><br>",
            email: "<br>Please enter a valid email address!<br><br>"
        },
        vendor_name: "<br>Please enter your vendor name!<br><br>",
        zip: {
            required: "<br>Please enter a zip code!<br><br>",
            digits: "<br>You can only enter in numbers for the zipcode!<br><br>",
            minlength: "<br>The zip code has to be atleast 5 digits!<br><br>"
        }
    },
    invalidHandler: function(e, validator) {
        var errors = validator.numberOfInvalids();
        if (errors) {
            var message = errors == 1
                ? 'You missed 1 field. It has been highlighted below'
                : 'You missed ' + errors + ' fields.  They have been highlighted below';
            alert(message);
        }
        $('.togDesc').show();
    }
});

How would I got

If you weren't using jQuery validator, you could do this very easily: if( !document.querySelector("[name='vendor_categories[]']:checked")) return false; — Niet the Dark Absol
– Niet the Dark Absol, Commented Feb 23, 2012 at 21:08

Madbreaks · Accepted Answer · 2012-02-23 21:14:49Z

3

Write a custom validation function that looks at:

if(0 === $('input.select:checked').size()){
    // Error condition
}

...and raises an error if the result. Side note: having a checkbox input with a class called "select" is confusing.

answered Feb 23, 2012 at 21:14

Madbreaks

19.6k7 gold badges62 silver badges75 bronze badges

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

Comments

Richard · Accepted Answer · 2012-02-23 21:15:46Z

After reading the documentation it appears you're able to write your own callback handlers for the 'required' property. Combining this with a simple select statement, makes it pretty easy (hopefully). I'm unable to test this, but give this a go:

$("#register_vendor").validate({
    ignore: "",
    rules: {
        vendor_email: {
            required: true,
            email: true
        },
        vendor_name: "required",
        zip: {
            required: true,
            digits: true,
            minlength: 5
        },
        category_selected: {
            required: function(elem)
            {
                return $("input.select:checked").length > 0;
            }
        }
    },
    messages: {
        vendor_email: {
            required: "<br>Please enter an email address!<br><br>",
            email: "<br>Please enter a valid email address!<br><br>"
        },
        vendor_name: "<br>Please enter your vendor name!<br><br>",
        zip: {
            required: "<br>Please enter a zip code!<br><br>",
            digits: "<br>You can only enter in numbers for the zipcode!<br><br>",
            minlength: "<br>The zip code has to be atleast 5 digits!<br><br>"
        }
    },
    invalidHandler: function(e, validator) {
        var errors = validator.numberOfInvalids();
        if (errors) {
            var message = errors == 1
                ? 'You missed 1 field. It has been highlighted below'
                : 'You missed ' + errors + ' fields.  They have been highlighted below';
            alert(message);
        }
        $('.togDesc').show();
    }
});

Collectives™ on Stack Overflow

Validate at least one checkbox is checked with jQuery Validator

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related