Adding validations to see if radio button is not selected

Question

I have the following code:

 <li>1. question 1</li>
<li>
     <input type="radio" name="question1" id="sd1" value="1">Strongly Disagree
     <input type="radio" name="question1" id="d1" value="2">Disagree
     <input type="radio" name="question1" id="n1" value="3">Neither Agree Nor Disagree
    <input type="radio" name="question1" id="a1" value="4">Agree
     <input type="radio" name="question1" id="sa1" value="5">Strongly Agree
</li>
<br/><br/>

<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/>

<li>3.  question 3</li>
<li>
     <input type="radio" name="question3" id="sd3" value="1">Strongly Disagree
     <input type="radio" name="question3" id="d3" value="2">Disagree
     <input type="radio" name="question3" id="n3" value="3">Neither Agree Nor Disagree
     <input type="radio" name="question3" id="a3" value="4">Agree
     <input type="radio" name="question3" id="sa3" value="5">Strongly Agree
</li>
<br/><br/>

  <input type="submit" value="Submit" name="Submit" id="Submit" />

I have such 30 questions. My requirement is that the user must answer all 30 questions.

How do I write javascript function such that a mesage is shown tot he user if he doesnt answer even one of the questions. EDIT:

The problem with my javascript i sthis:

   if ( (thisfrm.question3[0].checked == false) || (thisfrm.question3[1].checked == false) || (thisfrm.question3[2].checked == false) || (thisfrm.question3[3].checked == false) || (thisfrm.question3[4].checked == false))
{
    alert('Please answer question 1');
    return false;
}

the above code is repeated for every question without loop. i.e. it is written for each ques. but even when all ques are answered,it still displays Please answer question 1

you could use this: http://webforms2.googlecode.com/svn/trunk/testsuite/021.html — kinske, Oct 11 '13 at 07:35

Mina · Accepted Answer · 2013-10-11T08:58:39.057

This method makes use of jQuery and checks for unchecked radio buttons in a set of answers

HTML - add a class to your questions <li>

<li>1. question 1</li>
<li class="option">
     <input type="radio" name="question1" id="sd1" value="1">Strongly Disagree
     <input type="radio" name="question1" id="d1" value="2">Disagree
     <input type="radio" name="question1" id="n1" value="3">Neither Agree Nor Disagree
     <input type="radio" name="question1" id="a1" value="4">Agree
     <input type="radio" name="question1" id="sa1" value="5">Strongly Agree
</li>

Javascript

// 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;
});

Example here http://fiddle.jshell.net/6jNpQ/2/

Kyra: Thanks for the reply. Is there a way in which I can give separate alert message for each unanswred ques?? ex: if 1st ques is unanswered , alert the user tht first ques need to be answered and so on — user2822187, Oct 11 '13 at 08:21
Thanks. That was very innovative to let user know the exact ques. I have accepted your answer — user2822187, Oct 11 '13 at 09:18
:) :) Providing full ques was nice instead of just ques number. — user2822187, Oct 11 '13 at 09:49

score 6 · Answer 2 · answered May 19 '14 at 07:42

Below code is more simple and clean for even biggners

if (!$("input[name='html_elements']:checked").val()) {
   alert('Nothing is checked!');
}
else {
  alert('One of the radio buttons is checked!');
}

check out this below fiddle demo

Visit http://jsfiddle.net/creators_guru/DBd79/

score 2 · Answer 3 · answered Oct 11 '13 at 07:40

Check this. Instead of validating each element you can use something like this

for(var i = 1 ; i <= 30 ; i++)
  {
      var radios = document.getElementsByName('question'+i);
      var checked = false;
      for (var j = 0, length = radios.length; j < length; j++) 
      {

         if (radios[j].checked) 
         {
          checked = true;
          break;
         }


       }
       if(!checked)
       {
         alert('Please answer question '+i);
         break;
       }
}

score 1 · Answer 4 · answered Oct 11 '13 at 07:51

It looks like you're using only javascript. I recommend you adding jQuery to make writing javascript easier.

Anyway, only using javascript you can try this:

var questions = 30;
var answer_checked = false;
var one_not_checked = false;
for (var i = 1; i <= questions; i++) {
    for (var j=0; j < document.getElementsByName('question'+i).length; j++) {
        answer_checked = answer_checked || (thisfrm['question'+i][j].checked == true);
    }
    one_not_checked = one_not_checked || !answer_checked;
    answer_checked = false;
}

if (one_not_checked) {
    // your message to the user as one answer is not checked
}

score 0 · Answer 5 · answered Oct 11 '13 at 07:33

0

Something like this?

if ($('input[type=radio]:checked').length <= 0) {
    alert("No radio checked")
}

Or do it by name?

if ($('input[name=question1]:checked').length <= 0) {
    alert("No radio checked")
}

answered Oct 11 '13 at 07:33

Ruddy

9,795
5
45
66

score 0 · Answer 6 · answered Oct 11 '13 at 07:35

0

You should use logical operator && for your condition

if ( (thisfrm.question3[0].checked == false) && 
     (thisfrm.question3[1].checked == false) && 
     (thisfrm.question3[2].checked == false) && 
     (thisfrm.question3[3].checked == false) && 
     (thisfrm.question3[4].checked == false) )

answered Oct 11 '13 at 07:35

Tun Zarni Kyaw

2,099
2
21
27

It worked thanks!! Any way I can put this in loop so that I wont have to write it for 30 questions? The name attribute of each is named as : question1,question2,question3.... so on – user2822187 Oct 11 '13 at 08:35

score 0 · Answer 7 · edited May 23 '17 at 12:13

Here is the answer for your question. You can check this also.

Just using this code I have write it for your code. Please see below

HTML Code

<form method="POST" action="/echo/html/?html=;delay=3;">
    <ul>
        <li class="question">1) question 1</li>
        <li class="answers">
            <input type="radio" name="question1" id="11" value="1" />Strongly Disagree
            <input type="radio" name="question1" id="12" value="2" />Disagree
            <input type="radio" name="question1" id="13" value="3" />Neither Agree Nor Disagree
            <input type="radio" name="question1" id="14" value="4" />Agree
            <input type="radio" name="question1" id="15" value="5" />Strongly Agree
        </li>

        <li class="question">2) question 2</li>
        <li class="answers">
            <input type="radio" name="question2" id="21" value="1" />Strongly Disagree
            <input type="radio" name="question2" id="22" value="2" />Disagree
            <input type="radio" name="question2" id="23" value="3" />Neither Agree Nor Disagree
            <input type="radio" name="question2" id="24" value="4" />Agree
            <input type="radio" name="question2" id="25" value="5" />Strongly Agree
        </li>

        <li class="question">3) question 3</li>
        <li class="answers">
            <input type="radio" name="question3" id="31" value="1" />Strongly Disagree
            <input type="radio" name="question3" id="32" value="2" />Disagree
            <input type="radio" name="question3" id="33" value="3" />Neither Agree Nor Disagree
            <input type="radio" name="question3" id="34" value="4" />Agree
            <input type="radio" name="question3" id="35" value="5" />Strongly Agree
        </li>
    </ul>
    <input type="submit" value="Submit" name="Submit" id="Submit" /> 
</form>

Javascript Code

$("form").submit(function () {
    var allChecked = true;
    $('li.answers').each(function () {
        if (!$(':radio', this).is(':checked')) {
            allChecked = false;
            return false;
        }
    });
    if (!allChecked) {
        alert('Please fill the form completely...');
        return false;
    } else {
        alert('You have filled the complete form.');
    }
});

score 0 · Answer 8 · answered May 07 '18 at 03:48

#by javascript

function validate(){
if (checkRadio("question1") && checkRadio("question2") && checkRadio("question3")){
 return true;
}else{
alert("Please answer all Questions!");
 return false;
}
}
function checkRadio(name){
 var radio = document.forms.myForm[name];
for (var option in radio){
if(radio[option].checked){
 return true;
}
}
return false;
}

Adding validations to see if radio button is not selected

8 Answers8

Linked