JSFiddle - React, Tailwind, and code Playground

by fmdataweb

HTML

<h2>Pick ONLY ONE of question series A, B, or C, and answer all the questions in only that section.</h2>
<p id="error"></p>
<form id="questionnaire" questionnairename="questionnaire" target="#" method="post">
<h3>Series A</h3>
<input class="sectionclear" type="button" value="Clear section">
<ol>
    <li>
        <span class="question">Question A-One</span>
        <span class="answer">
            <input type="radio" id="CriteriaA1_yes" name="CriteriaA1" value="Yes"><label for="CriteriaA1_yes"> Yes</label> &nbsp;<input type="radio" id="CriteriaA1_no" name="CriteriaA1" value="No"> <label for="CriteriaA1_no">No</label>
        </span>
    </li>
    <li>
        <span class="question">Question A-Two</span>
        <span class="answer">
            <input type="radio" id="CriteriaA2_yes" name="CriteriaA2" value="Yes"><label for="CriteriaA2_yes"> Yes</label> &nbsp;<input type="radio" id="CriteriaA2_no" name="CriteriaA2" value="No"> <label for="CriteriaA2_no">No</label>
        </span>
    </li>
    <li>
        <span class="question">Question A-Three</span>
        <span class="answer">
            <input type="radio" id="CriteriaA3_yes" name="CriteriaA3" value="Yes"><label for="CriteriaA3_yes"> Yes</label> &nbsp;<input type="radio" id="CriteriaA3_no" name="CriteriaA3" value="No"> <label for="CriteriaA3_no">No</label>
        </span>
    </li>
</ol>
<h3>Series B</h3>
<input class="sectionclear" type="button" value="Clear section">
<ol>
    <li>
        <span class="question">Question B-One</span>
        <span class="answer">
            <input type="radio" id="CriteriaB1_yes" name="CriteriaB1" value="Yes"><label for="CriteriaB1_yes"> Yes</label> &nbsp;<input type="radio" id="CriteriaB1_no" name="CriteriaB1" value="No"> <label for="CriteriaB1_no">No</label>
        </span>
    </li>
    <li>
        <span class="question">Question B-Two</span>
        <span class="answer">
            <input type="radio" id="CriteriaB2_yes" name="CriteriaB2" value="Yes"><label...

CSS

html {
   font-family: Arial, Tahoma, sans-serif;
   padding: 5px;
}
h2 {
   font-size:1.3em;
   font-weight:bold;
   margin: 0 0 1em 0;
}
h3 {
   font-size:1.1em;
   font-weight:bold;
   margin: 0.75em 0 0.5em 0;
}
.question {
   width: 300px;
   display: inline-block;
   vertical-align: top;
}
.answer {
}
ol {
   list-style: decimal;
}
li {
   margin-left: 1.5em;
}
input[type=submit] {
   padding:3px;
}
#error {
   color:red;
}

JavaScript

$('#questionnaire').on('submit', validate);
$('input.sectionclear').on('click', function() {
    $(this).next().find('input').attr('checked', false);
});
function validate(ev) {
    var sectionsTouched = $('ol').has(':checked'),
       inputs = {},
       errorMessage = '';
    
    if (sectionsTouched.length === 0) {
        errorMessage = 'Please check something before submitting.';
    } else if (sectionsTouched.length > 1) {
        errorMessage = 'Please complete only one of sections ' + namesCommaDelimited(seriesNames(), 'or') + '.';
    } else {
        sectionsTouched.find('input').each(function(i, e) {
            var me = $(e), name = me.attr('name');
            inputs[name] = !!inputs[name] || me.is(':checked');
        });
        $.each(inputs, function(k, v) {
            if (!v) {
                errorMessage = 'Please complete all questions in your selected section.';
            }
            return v;
        });            
    }
    if (errorMessage !== '') {
        $('#error').html(errorMessage);
        ev.preventDefault();
        return false;
    }
    return true;
}


function seriesNames() {
    var names = [];
    $('h3').each(function(i, e) {
        names.push($(e).text());
    });
    return names;
}

function namesCommaDelimited(namesArr, conjunction) {
    var retval = '', i, l = namesArr.length - 1, delimiter = '';
    if (l === 0) {
       return retval;
    }
    for (i = 0; i < l; i += 1) {
        retval += delimiter;
        retval += namesArr[i];
        delimiter = ', ';
    }
    retval += delimiter;
    retval += conjunction;
    retval += ' ';
    retval += namesArr[l];
    return retval;
}