JK36 JK36 - 5 days ago 6
Javascript Question

Validating My Questionnaire using Jquery

I've created a very basic survey, and I need to validate that all questions have been completed before they get submitted to our database. Doing some research, I managed to find this question asked a number of times and a number of responses. The closest one that comes to answering my requirements is below

$(document).on('submit', 'form', function () {

var validate = true;
var unanswered = new Array();

// Loop through available sets
$('.option').each(function () {
// Question text
var question = $(this).prev().text();
// Validate
if (!$(this).find('input').is(':checked')) {
// Didn't validate ... dispaly alert or do something
unanswered.push(question);

validate = false;
}
});

if (unanswered.length > 0) {
msg = "Please answer the following questions:\n" + unanswered.join('\n');
alert(msg);
}
return validate;
});


The only issue with this is, the script loops through all the radiobuttons and not only does it display the question that has no checked answer in the alert, it also displays the multiple answers (the choices from the radio buttons)

Can someone help me edit the code so it just displays the unanswered questions. I thought I could add another div around the answers, but that didn't help. I'm pretty sure its $(this).prev().text(); that needs to be edited, but not sure how to just grab just the question itself.

my html code

<div class="question option">Question Test 1<br>
<input name="question[1]" type="hidden" value="Test 1 required">
<div class="answer">
<input name="answer[1]" type="radio" value="Strongly agree">Strongly agree<br>
<input name="answer[1]" type="radio" value="Agree">Agree<br>
<input name="answer[1]" type="radio" value="Disagree">Disagree<br>
<input name="answer[1]" type="radio" value="Strongly disagree">Strongly disagree<br>
<input name="id" type="hidden" value="9AE9CBA7">
</div>
</div>
<div class="question option">Question Test 2<br>
<input name="question[2]" type="hidden" value="Test 2 required">
<div class="answer">
<input name="answer[2]" type="radio" value="Strongly agree">Strongly agree<br>
<input name="answer[2]" type="radio" value="Agree">Agree<br>
<input name="answer[2]" type="radio" value="Disagree">Disagree<br>
<input name="answer[2]" type="radio" value="Strongly disagree">Strongly disagree<br>
<input name="id" type="hidden" value="9AE9CBA7">
</div>
</div>
<div class="question option">Question Test 3<br>
<input name="question[3]" type="hidden" value="Test 3 required">
<div class="answer">
<input name="answer[3]" type="radio" value="Strongly agree">Strongly agree<br>
<input name="answer[3]" type="radio" value="Agree">Agree<br>
<input name="answer[3]" type="radio" value="Disagree">Disagree<br>
<input name="answer[3]" type="radio" value="Strongly disagree">Strongly disagree<br>
<input name="id" type="hidden" value="9AE9CBA7">
</div>
</div>

Answer

You could add a span around the question text to make it easy to select.

<div class="question">
    <span class="label">Question Test 1</span><br>
    <input name="question[1]" type="hidden" value="Test 1 required">
    <input name="answer[1]" type="radio" value="Strongly agree">Strongly agree<br>
    <input name="answer[1]" type="radio" value="Agree">Agree<br>
    <input name="answer[1]" type="radio" value="Disagree">Disagree<br>
    <input name="answer[1]" type="radio" value="Strongly disagree">Strongly disagree<br>
    <input name="id" type="hidden" value="9AE9CBA7">
</div>

So the jQuery becomes

$('.question').each(function () {
    //find span element within div.question with class 'label' and get the text
    var question = $(this).find('span.label').text();

    //rest of code...
});
Comments