Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    66
    Thanks
    29
    Thanked 0 Times in 0 Posts

    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

    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 all of the html:
    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>
    Here is my js
    Code:
    $(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
    Code:
    checkboxes: { 
              	
                required: function(elem)
                {
                    return $("input.select:checked").length > 0;
                }
                 
    }

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    ok, before you change anything, your checkboxes should not have brackets in it, and they all have the same ID which is invalid html and could very well affect your script. id must always be unique.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •