Help needed with Q&A validation

JavaScript
1

I have the following code i which there are 5 questions
i want that all 5 questions should be answered, in case any questions is not filled, user gets validation

    question 1
    <ul class="option">
       <li>  <input type="radio" name="question1" id="sd1" value="1">Strongly Disagree</li>
        <li> <input type="radio" name="question1" id="d1" value="2">Disagree</li>
         <input type="radio" name="question1" id="n1" value="3">Neither Agree Nor Dis<li>agree</li>
      <li>  <input type="radio" name="question1" id="a1" value="4">Agree</li>
      <li>   <input type="radio" name="question1" id="sa1" value="5">Strongly Agree
    </li></ul>
    <br/><br/>
    
    question 2
    <ul class="option">
        <li> <input type="radio" name="question2" id="sd2" value="1">Strongly Disagree</li>
        <li> <input type="radio" name="question2" id="d2" value="2">Disagree</li>
       <li>  <input type="radio" name="question2" id="n2" value="3">Neither Agree Nor Disagree</li>
       <li> <input type="radio" name="question2" id="a2" value="4">Agree</li?
       <li>  <input type="radio" name="question2" id="sa2" value="5">Strongly Agree
    </li></ul>
    <br/><br/>

javascript code is

    // Delegate submit action
    $(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();
            // 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;
    });

i ma getting alert as a blank, only one line is written please answer following questions but no questions number inside

<li>2.  question 2 </li>
<li>
     <input type="radio" name="question2" id="sd2" value="1">Strongly Disagree
     <input type="radio" name="question2" id="d2" value="2">Disagree
     <input type="radio" name="question2" id="n2" value="3">Neither Agree Nor Disagree
    <input type="radio" name="question2" id="a2" value="4">Agree
     <input type="radio" name="question2" id="sa2" value="5">Strongly Agree
</li>
<br/><br/>



// Delegate submit action
$(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();
        // 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;
});
2

Hi there sonikakkar7,

there is no need for “JavaScript”, as we
now have an “HTML” attribute for this. :winky:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<body> 
<h1>Questionaire</h1>
<form action="#">
<fieldset>
 <legend>question 1</legend>
  <ul class="option">
   <li><input type="radio" name="question1" id="sd1" value="1" required><label for="sd1">Strongly Disagree</label></li>
   <li><input type="radio" name="question1" id="d1" value="2"><label for="d1">Disagree</label></li>
   <li><input type="radio" name="question1" id="n1" value="3"><label for="n1">Neither Agree Nor Disagree</label></li>
   <li><input type="radio" name="question1" id="a1" value="4"><label for="a1">Agree</label></li>
   <li><input type="radio" name="question1" id="sa1" value="5"><label for="sa1">Strongly Agree</label></li>
  </ul> 
</fieldset><fieldset>    
<legend>question 2</legend>
 <ul class="option">
  <li><input type="radio" name="question2" id="sd2" value="1" required><label for="sd2">Strongly Disagree</label></li>
  <li><input type="radio" name="question2" id="d2" value="2"><label for="d2">Disagree</label></li>
  <li><input type="radio" name="question2" id="n2" value="3"><label for="n2">Neither Agree Nor Disagree</label></li>
  <li><input type="radio" name="question2" id="a2" value="4"><label for="a2">Agree</label></li>
  <li><input type="radio" name="question2" id="sa2" value="5"><label for="sa2">Strongly Agree</label></li>
 </ul>
</fieldset>  
 <input type="submit">
</form>
</body>
</html>

coothead

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.