Validating multiple checkboxes using jQuery validation

Question

I am trying to take a number of checkboxes and make sure at least one of these checkboxes is checked using jQuery validation. I haven't had any luck so far. What am I missing? I know my validation is there because it works for other fields, just not for my checkboxes. I put up the code on jfiddle, maybe this will help.

EDIT: I added brackets for my input name=list parameter (list[]). Also in my rules I changed the name parameter from list to 'list[]'. My old code is below. Thanks Sparky!

OLD: <input type='checkbox' name='list' id='fullProduct'></input>

FIXED: <input type='checkbox' name='list[]' id='fullProduct'></input>

Here is my code.

$("#tradeForm").validate({
        rules: {
            startDate: {
                required: true,
                date: true
            },
            endDate: {
                required: true,
                date: true
            },
            showName: {
                required: true,
                minlength: 5
            },
            location: {
                required: true
            },
            list: {
                required: true
            }
        },
        messages: {
            startDate: "*",
            endDate: "*"
    }
});

                <table>
                <tr>
                    <th>Name of Show</th>
                    <td> <input type='text' name='showName'></input></td>
                </tr>
                <tr>
                    <th>Location</th>
                    <td><input type='text' name='location'></input></td>
                </tr>
                <tr>
                    <th><span style='padding-right: 50px;'>Select Literature</span></th>
                    <td><input type='checkbox' name='list' id='fullProduct'></input><span style='font-size: 12px;'>Guide One</span></td>
                    <td><input type='checkbox' name='list' id='oilProduct'></input><span style='font-size: 12px;'>Guide Two</span></td>
                </tr>                               
                <tr>                                
                    <td></td>                       
                    <td><input type='checkbox' name='list' id='diamondProduct'></input><span style='font-size: 12px;'>Guide Three</span></td>
                    <td><input type='checkbox' name='list' id='motorProduct'></input><span style='font-size: 12px;'>Guide Four</span></td>
                </tr>                               
            </table>

The HTML code in your OP is not the same as the code in your jsFiddle, which is also the cause of your problem. `name="list[]"` is not the same as `name="list"`. — Sparky, Feb 19 '13 at 20:45

Sparky · Accepted Answer · 2013-02-19T20:48:10.667

22

The name of your checkbox group is list[], not list, so you must declare the rule as such. Since it contains brackets, [], you must enclose it in quotes:

rules: {
    'list[]': {
        required: true
    }
},

Your jsFiddle: http://jsfiddle.net/ZDz59/1/

edited Feb 19 '13 at 20:48

answered Feb 19 '13 at 20:42

Sparky

98,165
25
199
285

If your form consists of fields using names that aren't legal JavaScript identifiers, you have to quote those names when using the rules option: Is this what you are referring to? – wowzuzz Feb 19 '13 at 20:49
@wowzuzz, Yes, I am referring to this: http://docs.jquery.com/Plugins/Validation/Reference#Fields_with_complex_names_.28brackets.2C_dots.29 – Sparky Feb 19 '13 at 20:53
To change the position of the validation label look here: http://stackoverflow.com/questions/13200659/custom-error-label-placement-using-jquery-validate-for-all-or-some-of-your-erro Fiddle: http://jsfiddle.net/ZDz59/81/ – user2345998 Sep 03 '15 at 14:05
@user2345998, what does your comment have to do with anything here? The question is about an improperly declared rule, not message placement. Please keep comments relevant. Thanks. – Sparky Sep 03 '15 at 14:31
First question after I read the answer was "how to change the position", and I tought it was nice to share a direct link to the solution. Of course I can delete it if you insist. – user2345998 Sep 03 '15 at 14:40
I know your intentions were good. However, it's always best to keep comments relevant. I appreciate it. Thanks. – Sparky Sep 03 '15 at 14:59
@kejo, 7 years ago has nothing to do with this: you are not supposed to be asking any new questions within the comments section. You're supposed to post a new question after doing an SO search. – Sparky Mar 26 '20 at 02:02
Rudeness is not necessary. I will keep it more militaristic if that is how SO works then. So much for open, friendly learning. – kejo Mar 26 '20 at 17:33

score 2 · Answer 2 · answered Feb 19 '13 at 20:14

2

If you only intend one of the checkboxes to checked at all times, use input type="radio" instead.

If not: try change the name attribute of the checkboxes to list[]. As there can multiple checked values it must include the brackets to indicate it is an array. Otherwise the value will be overwritten.

answered Feb 19 '13 at 20:14

kjetilh

4,821
2
18
24

I changed the names to list[] and no luck on my end. It just submits to my form action. It is validating my other fields though. – wowzuzz Feb 19 '13 at 20:17
Try adding `minlength: 1` to the list rule. – kjetilh Feb 19 '13 at 20:23
You could add a click function to untick every box but the one you just clicked – Iesus Sonesson Feb 19 '13 at 20:24

Validating multiple checkboxes using jQuery validation

2 Answers2