JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<form class="form-horizontal" method="post" id="inputForm">
<input type="hidden" name="recid" value="1">
<table class="table table-condensed table-hover table-bordered">
<h2>Input Form</h2>
<tr>
<td>Question 1.</td>
<td>
<div class="controls">
<label class="radio inline">
<input type="radio" name="q1" value="Yes" required>Yes</label>
<label class="radio inline">
<input type="radio" name="q1" value="No" required>No</label>
<label for="q1" class="error"></label>
</div>
</td>
<td>Please answer Yes or No</td>
</tr>
</table>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-primary">Continue</button>
<button type="reset" class="btn">Reset</button>
</div>
</div>
</form>
CSS
.control-group, .error {
color: red;
}
JavaScript
$("#page-form").validate({
highlight: function (element, errorClass, validClass) {
$(element).closest(".control-group").addClass(errorClass).removeClass(validClass);
},
unhighlight: function (element, errorClass, validClass) {
$(element).closest(".control-group").addClass(validClass).removeClass(errorClass);
}
});