I'm trying to ensure that at least one checkbox is selected. I'm using the query validate plugin.
here is the checkbox html
Here is all of the html:HTML Code:<!-- 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 jsHTML Code:<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Validate Example | aLittleCode</title> <meta name="viewport" content="width=device-width"> <link href="style.css" rel="stylesheet"> <!-- js files linked at bottom --> </head> <body> <div class="container"> <div class="page-header"> <h1>jQuery Validate Example</h1> <p>with styles from Twitter Bootstrap</p> </div> <div class="row"> <div class="span12"> <form action="" id="contact-form" class="form-horizontal"> <fieldset> <legend>Sample Contact Form <small>(will not submit any information)</small></legend> <!-- password INPUT --> <div class="control-group"> <label class="control-label" for="password">password</label> <div class="controls"> <input id="password" name="password" type="password" maxlength="50" value="" class="input-xlarge"> </div> <!-- close controls --> </div><!-- close control group --> <!-- password confirm INPUT --> <div class="control-group"> <label class="control-label" for="password_confirm">password confirm</label> <div class="controls"> <input id="password_confirm" name="password_confirm" type="password" maxlength="50" value="" class="input-xlarge"> </div> <!-- close controls --> </div><!-- close control group --> <!-- TEXT INPUT --> <div class="control-group"> <label class="control-label" for="name">Your Name</label> <div class="controls"> <input type="text" class="input-xlarge" name="name" id="name"> </div> <!-- close controls --> </div><!-- close control group --> <!-- EMAIL - text input area --> <div class="control-group"> <label class="control-label" for="email">Email Address</label> <div class="controls"> <input type="text" class="input-xlarge" name="email" id="email"> </div><!-- close controls --> </div><!-- close control group --> <!-- Text area --> <div class="control-group"> <label class="control-label" for="message">Your Message</label> <div class="controls"> <textarea class="input-xlarge" name="message" id="message" rows="3"></textarea> </div><!-- close controls --> </div> <!-- close control group --> <!-- select - drop down --> <div class="control-group"> <label class="control-label" for="select">Make Selection</label> <div class="controls"> <select name="select" id="select" class="input-xlarge" > <option value="">Select Request Type</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div><!-- close controls --> </div> <!-- close control group --> <!-- 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 --> <!-- Radio --> <div class="control-group"> <label class="control-label" for="radio">Radio</label> <div class="controls"> <input type="radio" name="radio" id='radio' value="yes">Yes<br> <input type="radio" name="radio" id='radio' value="no" checked="">No </div><!-- close controls --> </div> <!-- close control group --> <div class="form-actions"> <button type="submit" class="btn btn-primary btn-large">Submit</button> <button class="btn">Cancel</button> </div> </fieldset> </form> </div><!-- .span --> <!-- <div class="offset1 span2"> <div class="well"> <h2>Links</h2> <h3>Validate Plugin</h3> <ul> <li><a href="http://docs.jquery.com/Plugins/Validation/">jQuery Validate Plugin</a></li> <li><a href="http://docs.jquery.com/Plugins/Validation/validate#toptions">Plugin Options</a></li> <li><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">Author's Plugin Page</a></li> <li><a href="https://github.com/jzaefferer/jquery-validation">Github Repository</a></li> </ul> <h3>Other Assets</h3> <ul> <li><a href="http://webdesign.tutsplus.com/freebies/exclusive-freebie-the-kudos-web-icon-set/">Kudos Web Icons (free)</a></li> <li><a href="http://twitter.github.com/bootstrap/">Twitter Bootstrap</a></li> </ul> </div> </div> --><!-- .span --> </div><!-- .row --> <hr> <footer> </footer> </div> <!-- .container --> <!-- ============================================== JavaScript below! --> <!-- jQuery via Google + local fallback, see h5bp.com --> <script src="assets/js/jquery-1.7.1.min.js"></script> <!-- Validate plugin --> <script src="assets/js/jquery.validate.min.js"></script> <!-- Scripts specific to this page --> <script src="script.js"></script> </body> </html>
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 sideCode:$(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
Code:checkboxes: { required: function(elem) { return $("input.select:checked").length > 0; } }
Reply With Quote
Originally Posted by aaron4osu
Bookmarks