JSFiddle - React, Tailwind, and code Playground

by JakobJingleheimer

HTML

<ul id="age">
<li><span class="required">*</span> How old are you?</li>
    <li><input name="age" type="text" maxlength="3" /><span class="age message" style="display:none;"></span></li>
    <li><input name="age" type="radio" value="777" />I prefer not to answer</li>
    <li><input name="age" type="radio" value="999" />Don't know</li>
</ul>

<div id="p1a">
        <ul id="e_part">
        <li>During 2012, did you already complete at least part of this survey?</li>
            <li><input name="e_part" type="radio" value="0" />No</li>
            <li><input name="e_part" type="radio" value="1" />Yes</li>
            <li><input name="e_part" type="radio" value="7" />I prefer not to answer</li>
            <li><input name="e_part" type="radio" value="9" />Don't know</li>
        </ul>
    
        <ul id="hispanic">
            <li><span class="required">*</span> Do you consider yourself to be Hispanic or Latino?</li>
                <li><input name="hispanic" type="radio" value="0" />No</li>
                <li><input name="hispanic" type="radio" value="1" />Yes</li>
                <li><input name="hispanic" type="radio" value="7" />I prefer not to answer</li>
                <li><input name="hispanic" type="radio" value="9" />Don't know</li>
            </ul>
            <ul id="race">
            <li><span class="required">*</span> Which racial group or groups do you consider yourself to be in? <span class="note">(check all that apply)</span></li>
                <li><input name="race" type="checkbox" value="1" />American Indian or Alaska Native</li>
                <li><input name="race" type="checkbox" value="2" />Asian</li>
                <li><input name="race" type="checkbox" value="3" />Black or African-American</li>
                <li><input name="race" type="checkbox" value="4" />Native Hawaiian or other Pacific Islander</li>
                <li><input name="race" type="checkbox" value="5" />White</li>
                <li><input name="race" type="radio"...

CSS

ul,ol {
    margin-bottom:20px;
}

.message {
    color: red;
    font-weight:bold;
}

.required {
    color:red;
    font-size:140%;
    font-weight:bold;
    position:relative;
    top:4px;
}

JavaScript

var requiredQs = [],
    unansweredQs = [],
    page=2;
    requiredQs[2] = ["age", "e_part", "hispanic", "race", "state"];
    requiredQs[4] = "m_fsx12m";
    requiredQs[5] = "m_sx12m";

function check(pg) {
    for (i = 0; i < requiredQs[pg].length; i++) {
        var question = requiredQs[pg][i],
            $response = $("#"+question).find('input, select').val();
        alert(question + '=' + $response);
        //if ( $("#"+question).is(":visible") ) alert(question);
        if ($("#" + question).is(":visible") && $response.length < 1) {
            $("#datastring").append(unansweredQs[i] + "; ");
            unansweredQs.push(question);
            $("#" + question).addClass("message");
        }
        else { $("#" + question).removeClass("message"); }
    } //for
    //alert('length of unansweredQs[]='+unansweredQs.length+'\n'+'(number of questions with non-response)');
    if (unansweredQs.length > 0) { displayWarning(unansweredQs); }
    else { alert("thanks"); }
}


$("#button").click(function() {
    check(page);
});