JSFiddle - React, Tailwind, and code Playground
HTML
<form method="post" action="process.php" id='editRecord'>
<table border="1" class="record">
<tr>
<td width="88%" valign="top" class="field_name_left">A1</td>
<td width="12%" valign="top" class="field_data">
<input type="radio" name="CriteriaA1" value="Yes">Yes<input type="radio" name="CriteriaA1" value="No">No</td>
</tr>
<tr>
<td width="88%" valign="top" class="field_name_left">A2</td>
<td valign="top" class="field_data">
<input type="radio" name="CriteriaA2" value="Yes">Yes<input type="radio" name="CriteriaA2" value="No">No</td>
</tr>
<tr>
<td width="88%" valign="top" class="field_name_left">A3</td>
<td valign="top" class="field_data"> <input type="radio" name="CriteriaA3" value="Yes">Yes<input type="radio" name="CriteriaA3" value="No">No</td>
</tr>
<tr>
<td width="88%" valign="top" class="field_name_left">A4</td>
<td valign="top" class="field_data">
<input type="radio" name="CriteriaA4" value="Yes">Yes<input type="radio" name="CriteriaA4" value="No">No</td>
</tr>
<tr>
<td width="88%" valign="top" class="field_name_left">A5</td>
<td valign="top" class="field_data">
<input type="radio" name="CriteriaA5" value="Yes">Yes<input type="radio" name="CriteriaA5" value="No">No</td>
</tr>
<tr>
<td valign="top" class="field_name_left" colspan="2"> </td>
</tr>
<tr>
<td valign="top" class="field_name_left" colspan="2"><strong>OR</strong></td>
</tr>
<tr>
<td valign="top" class="field_name_left" colspan="2"> </td>
</tr>
<tr>
<td valign="top" class="field_name_left">B1</td>
<td valign="top"...
JavaScript
$(function() {
$("#editRecord").submit(function(){
// is anything checked?
if(!checkEmpty()){
$("#error").html("Please check something before submitting");
//alert("nothing Checked");
return false;
}
// Only A _OR_ B
if(isAorB()){
$("#error").html("Please complete A or B, not both");
//alert("please complete A or B, not both");
return false;
};
// all A's or all B's
if(allAorBChecked()){
$("#error").html("It appears you have not completed all questions");
//alert("missing data");
return false;
};
if(haveNo()){
// we're going on, but sending "type = C"
}
//alert("all OK");
return true;
});
});
function checkEmpty(){
var OK = false;
$(":radio").each(function(){
if (this.checked){
OK = true;
}
});
return OK;
}
function isAorB(){
var OK = false;
var Achecked = false;
var Bchecked = false;
$(":radio").each(function(){
var theChar=this.name.charAt(8);
// if we have an A checked remember it
if(theChar == "A" && this.checked && !Achecked){
Achecked = true;
}
if(Achecked && theChar == "B" && !Bchecked){
if(this.checked){
Bchecked = true;
}
}
if (Achecked && Bchecked){
OK = true;
}
});
return OK;
}
function allAorBChecked(){
var notOK = false;
var Achecked = false;
$(":radio").each(function(){
// skip through to see if we're doing...