JSFiddle - React, Tailwind, and code Playground
HTML
<form method="post">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding-left:20px; padding-right:20px">
<table cellspacing="3" cellpadding="2" border="0" width="100%" class="table">
<tr>
<td valign="top">1.</td>
<td valign="top" class="question" colspan="2">Question</td>
</tr>
<tr>
<td></td>
<td width="5"><input value="question1_yes" name="question1" id="question1_yes" type="radio" /></td>
<td><label for="question1_yes">Yes</label></td>
</tr>
<tr>
<td></td>
<td><input value="question1_no" name="question1" id="question1_no" type="radio" /></td>
<td><label for="question1_no">No</label></td>
</tr>
<tr>
<td></td>
<td><input value="question1_dont_know" name="question1" id="question1_dont_know" type="radio" /></td>
<td><label for="question1_dont_know">Don't know</label></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-left:20px; padding-right:20px">
<table cellspacing="3" cellpadding="2" border="0" width="100%" class="table">
<tr>
<td valign="top">2.</td>
<td valign="top" class="question" colspan="2">Question</td>
</tr>
<tr>
<td></td>
<td width="5"><input value="question2_yes" name="question2" id="question2_yes" type="radio" /></td>
<td><label for="question2_yes">Yes</label></td>
</tr>
<tr>
<td></td>
<td><input value="question2_no" name="question2" id="question2_no" type="radio" /></td>
<td><label for="question2_no">No</label></td>
</tr>
<tr>
<td></td>
<td><input value="question2_dont_know" name="question2" id="question2_dont_know" type="radio" /></td>
<td><label...
JavaScript
$(document).on('submit', 'form', function () {
var validate = true;
var unanswered = new Array();
// Loop through available sets
$('.table').each(function () {
// Question text
var question = $(this).find(".question");
// Validate
if (!$(this).find('input').is(':checked')) {
// Didn't validate ... dispaly alert or do something
unanswered.push(question.text());
question.css('color', 'red'); // Highlight unanswered question
validate = false;
}
});
if (unanswered.length > 0) {
msg = "Please answer the following questions:\n" + unanswered.join('\n');
alert(msg);
}
return validate;
});