JSFiddle - React, Tailwind, and code Playground

by Phil Glau

HTML

<script src="http://jquery.bassistance.de/validate/lib/jquery.metadata.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"></script>



<form class="cmxform" method="post" action="" id="editRecord">
<table width="46%" class="record">
<tr>
<td width="21%" valign="top" class="field_name_left"><p>Question 1</p></td>
<td width="15%" valign="top" class="field_data">
<label for="Yes">
<input type="radio" name="Question1" value="Yes" validate = "required:true" /> Yes
</label>
<label for="No">
<input type="radio" name="Question1" value="No" /> No
</label>
<label for="Question1" class="error">You must answer this question to proceed</label>
</td>
<td width="64%" valign="top" class="field_data"><strong>Details:</strong>
<textarea id = "Details1" class="where" name="Details1" cols="25" rows="2" validate="required:'input[name=Question1][value=Yes]:checked'"></textarea></td>
</tr>
<tr>
<td valign="top" class="field_name_left">Question 2</td>
<td valign="top" class="field_data">
<label for="Yes">
<input type="radio" name="Question2" value="Yes" validate = "required:true" /> Yes
</label>
<label for="No">
<input type="radio" name="Question2" value="No" /> No
</label>
<label for="Question2" class="error">You must answer this question to proceed</label>
</td>
<td valign="top" class="field_data"><strong>Details:</strong>
<textarea id = "Details2" class="where" name="Details2" cols="25" rows="2" validate="required:'input[name=Question2][value=Yes]:checked'"></textarea>           </td>
</tr>
<tr >
<td colspan="3">
<input type="submit" name="-edit" value="Finish"></td>
</tr>
</table>
</form>

CSS

.block { display: block; }
form.cmxform label.error { display: none; } 
.error { color: red; }

JavaScript

$.metadata.setType("attr", "validate");
    $(document).ready(function() {
    $("#editRecord").validate();
    });