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


$(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


<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?

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.

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!

I just got back to working on the validation. That worked perfectly. Thanks Denk