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
– Sparky, Commented Feb 19, 2013 at 20:45

Sparky · Accepted Answer · 2013-02-19 20:48:10Z

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, 2013 at 20:48

answered Feb 19, 2013 at 20:42

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

8 Comments

wowzuzz Over a year ago

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?

Sparky Over a year ago

@wowzuzz, Yes, I am referring to this: docs.jquery.com/Plugins/Validation/…

user2345998 Over a year ago

To change the position of the validation label look here: stackoverflow.com/questions/13200659/… Fiddle: jsfiddle.net/ZDz59/81

Sparky Over a year ago

@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.

user2345998 Over a year ago

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.

|

kjetilh · Accepted Answer · 2013-02-19 20:14:43Z

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, 2013 at 20:14

kjetilh

4,9862 gold badges21 silver badges26 bronze badges

3 Comments

wowzuzz Over a year ago

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.

kjetilh Over a year ago

Try adding minlength: 1 to the list rule.

Iesus Sonesson Over a year ago

You could add a click function to untick every box but the one you just clicked

Collectives™ on Stack Overflow

Validating multiple checkboxes using jQuery validation

2 Answers 2

8 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related