check that at least 1 checkbox is checked using jQuery Validate plugin
I'm trying to ensure that at least one checkbox is selected. I'm using the query validate plugin.
here is the checkbox html
- <!-- Checkbox -->
- <div class="control-group">
- <label class="control-label" for="checkboxes">Checkboxes</label>
- <div class="controls">
- <input type="checkbox" name="checkboxes[]" id='checkboxes' value="Students">Students<br>
- <input type="checkbox" name="checkboxes[]" id='checkboxes' value="Alumni">Alumni<br>
- <input type="checkbox" name="checkboxes[]" id='checkboxes' value="Business">Business<br>
- <input type="checkbox" name="checkboxes[]" id='checkboxes' value="Faculty">Faculty<br>
- </div><!-- close controls -->
- </div> <!-- close control group -->
Here is my js
- $(document).ready(function(){
- // Validate
- // http://bassistance.de/jquery-plugins/jquery-plugin-validation/
- // http://docs.jquery.com/Plugins/Validation/
- // http://docs.jquery.com/Plugins/Validation/validate#toptions
-
- $('#contact-form').validate({
- rules: {
-
- name: {
- minlength: 2,
- required: true
- },
-
- email: {
- required: true,
- email: true
- },
-
- subject: {
- minlength: 2,
- required: true
- },
-
- message: {
- minlength: 2,
- required: true
- },
- select: {
-
- required: true
- },
- password: {
- required: true,
- minlength: 5
- },
-
- password_confirm: {
- required: true,
- minlength: 5,
- equalTo: "#password"
- },
- checkboxes: {
- //required: true,
- //minlength: 1
- required: function(elem)
- {
- return $("input.select:checked").length > 0;
- }
-
- }
- },
- messages: {
- name: "Enter your name",
- password: {
- required: "Provide a password",
- rangelength: jQuery.format("Enter at least {0} characters")
- },
- password_confirm: {
- required: "Repeat your password",
- minlength: jQuery.format("Enter at least {0} characters"),
- equalTo: "Enter the same password as above"
- },
- email: {
- required: "Please enter a valid email address",
- minlength: "Please enter a valid email address",
- remote: jQuery.format("{0} is already in use")
- },
-
- },
- highlight: function(label) {
- $(label).closest('.control-group').addClass('error');
- },
- success: function(label) {
- label
- .text('OK!').addClass('valid')
- .closest('.control-group').addClass('success');
- }
-
- });
-
- }); // end document.ready
I was trying to keep it as simple as possible and found this example here on site point but it doesn't seem to work how i'm using it. Also i have tried it with and without the array[] added onto the checkboxes. I'm using the [] to process it on the php side
- checkboxes: {
-
- required: function(elem)
- {
- return $("input.select:checked").length > 0;
- }
-
- }