JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.js"></script>
<form role="form" action="#" method="post" id="durationForm">
<tr>
<td colspan = "3">Please enter the duration?</td>
</tr>
<tr>
<td width="10%"><input type="number" class="form-control" id="duration" name="duration" required></td>
<label for="duration" class="validateError"></label>
<td width="50%">
<div class="controls">
<label class="radio">
<input type="radio" name="duration" id="duration" value="Hours" required> Hours</label>
<label class="radio">
<input type="radio" name="duration" id="duration" value="Days" required> Days</label>
<label class="radio">
<input type="radio" name="duration" id="duration" value="Unsure" required> Unsure</label>
<label for="duration" class="validateError"></label>
</div>
</td>
</tr>
<button type="submit" class="btn btn-primary">Next</button>
</form>
CSS
.validateError {
color: red;
}
JavaScript
$(document).ready(function () {
// initialize the plugin
$("#durationForm").validate({
errorClass: "validateError"
});
});