Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 800
wowzuzz Avatar asked Feb 19 '13 20:02

wowzuzz


2 Answers

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/

like image 166
Sparky Avatar answered Nov 15 '22 18:11

Sparky


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.

like image 33
kjetilh Avatar answered Nov 15 '22 20:11

kjetilh