utilizing the validation capabilities of the jQuery validation plugin
check out: http://jsfiddle.net/Kn3v5/205/
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<div>
<form id="everything">
<label for="dd1">Select the best option</label>
<br/>
<select name="dd1" id="dd1" class="required">
<option value="">None</option>
<option value="o1">option 1</option>
<option value="o2">option 2</option>
<option value="o3">option 3</option>
</select>
<br/>
<br/>
<input id="agreement" name="agreement" type="checkbox"><b> I accept the TOS</b>
<br/>
<input type="submit" />
</div>
</form>
There are multiple fields which show error messages on their right side. The issue is that the validation message for the checkbox is appearing between the checkbox and its label.
[checkbox]
[validation message] [label]
Desired layout:
[checkbox] - [label]
[validation message]
Is there a way to achieve this? Your help is appreciated!