CODEWITHSUNDEEP
jqueryjquery-validate
wowzuzz
wowzuzz

Reputation: 1388

Validating multiple checkboxes using jQuery validation

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>

Upvotes: 10

Views: 20325

Answers (2)

Sparky
Sparky

Reputation: 98718

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/

Upvotes: 22

kjetilh
kjetilh

Reputation: 4976

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.

Upvotes: 2

Related Questions