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?