SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2011
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning Jquery Validation Errors after checkbox value

    I'm trying to figure out how place my error message either after the first checkbox label or before the check box and move both the checkbox and it's label down.

    here is a simplified version of the form with just the checkboxes. It will make more sense if you go to the form and try to submit. Notice the error message goes between the checkbox and the value.
    http://aaronhaas.com/lp/checkbox.html
    here is the js
    Code:
    $(document).ready(function(){
    
    		$('#contact-form').validate({
    	    rules: {
    	      
    	      "audience[]": { 
              	required: true,
              	minlength: 1    
    		  }, // end checkbox
    
    		  "event_services[]": { 
              	required: true,
              	minlength: 1    
    		  } // end checkbox
    	     
    	    },
    	    messages: { 
    
    	    	"audience[]": "please Select One Checkbox",
    
    	    	"event_services[]": "please Select One Checkbox"
                
                
            },
    	    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
    here is the form (with just the checkbox fields
    Code:
    <form method="POST" action="" id="contact-form" class="form-horizontal" >
      
        <!-- Checkbox -->
    <div class="control-group">
      <label class="control-label" for="audience">Select audience(Select all that apply)</label>
      <div class="controls">
        <input type="checkbox" name="audience[]" value="Students">Students<br>
        <input type="checkbox" name="audience[]" value="Alumni">Alumni<br>
        <input type="checkbox" name="audience[]" value="Business">Business<br>
       <br>
      </div><!-- close controls -->
    </div> <!-- close control group -->
    
    <!-- Checkbox -->
    <div class="control-group">
      <label class="control-label" for="event_services">What type of services do you see needing for this event? (Select all that apply)</label>
      <div class="controls">
        <input type="checkbox" name="event_services[]" value="New web page">Web page<br>
        <input type="checkbox" name="event_services[]" value="flyers"> Flyers<br>
        <input type="checkbox" name="event_services[]" value="Photography">Photography<br>
        <input type="checkbox" name="event_services[]" value="Other">Other
        
      </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>
    </div> <!-- close specific_request_type -->
    </form>

    This maybe more of a DOM CSS issue but it's using values from js so I placed it here.

    The complete version has other fields so I need to find a way to position just the checkbox validation different and the rest needs to stay the same. So $(label).closest('.control-group').addClass('error'); needs to remain, but I need another that will just change the checkbox. Any ideas?

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    41
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It's definatly not a DOM-issue! The default behaviour of the validation plugin is to insert the error-label after the input field. There is a way to change this default behaviour, using the errorPlacement option.

    The errorPlacement option lets you handle the place where the error should be inserted/appended/.... By simply checking the attribute "name" of the element (which didn't pass the validation), you can insert/append/... the error-label anywhere you'd like.
    Code JavaScript:
    errorPlacement: function( label, element ) {
    	if( element.attr( "name" ) === "audience[]" || element.attr( "name" ) === "event_services[]" ) {
    		element.parent().append( label ); // this would append the label after all your checkboxes/labels (so the error-label will be the last element in <div class="controls"> )
    	} else {
    		label.insertAfter( element ); // standard behaviour
    	}
    }

    Any follow-up questions? Shoot!

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2011
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just got back to working on the validation. That worked perfectly. Thanks Denk


Bookmarks

Posting Permissions

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