Adding validations to see if radio button is not selected

前端 未结 8 1058
误落风尘
误落风尘 2021-01-07 06:30

I have the following code:

 
  • 1. question 1
  • Strongly
  • 相关标签:
    8条回答
    • 2021-01-07 06:34

      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
      }
      
      0 讨论(0)
    • 2021-01-07 06:38

      #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;
      }
      
      0 讨论(0)
    • 2021-01-07 06:42

      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/

      0 讨论(0)
    • 2021-01-07 06:49

      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.');
          }
      });
      
      0 讨论(0)
    • 2021-01-07 06:51

      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")
      }
      
      0 讨论(0)
    • 2021-01-07 06:54

      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;
             }
      }
      
      0 讨论(0)
    提交回复
    热议问题