使用多个单选按钮验证多个选项卡

Question

我有一个表单，它有多个标签，每个标签显示10个问题，包括（真/假）无线电组（由PHP代码生成，所以我不知道他们的名字或将出现多少），我需要在点击下一个按钮时检查它们是否被选中。如果不是，我想向用户显示哪个问题没有被回答（没有警告信息，但它可以在带有绿色或红色检查图标的标签中）。

我试过谷歌搜索问题，但以前的答案都没有在我的情况下使用。

编辑：这是我的代码的一部分：

<form  id="questionForm" action="" method="post" role="form">
  <input type="hidden" name="login" value="<?php echo $_SESSION['login-user']?>"/>
  <input type="hidden" name="pass_user" value="<?php echo $_SESSION['pass_user']; ?>"/>
  <?php
  $blocks_questions = array_chunk($questions, 10);
  foreach($blocks_questions as $cle=>$question_block) {?>
    <div class='tab'>
      <?php
      foreach ($question_block as $key => $question) {
        $id_quiz_qst=$question['id_quiz'].",".$question['id_qst'];?>
        <div class="form-group qst-row">
          <div class="row">
            <div class="col-sm-10"><p><?php echo $question['question'] ?></p>
            </div>
            <div class="col-sm-2">
              <span class="question-rbtn" >
                <span class="switch radio-switch fixed-width-lg">
                  <input name="<?php echo $id_quiz_qst?>" id="<?php echo $id_quiz_qst."_on";?>" value="Vrai" <?php if (isset($_POST[$id_quiz_qst]) && $_POST[$id_quiz_qst]=="Vrai") echo "checked";?> type="radio">
                  <label for="<?php echo $id_quiz_qst."_on";?>" class="radioCheck">Vrai</label>

                  <input name="<?php echo $id_quiz_qst?>" id="<?php echo $id_quiz_qst."_off";?>" value="Faux" type="radio" <?php if (isset($_POST[$id_quiz_qst]) && $_POST[$id_quiz_qst]=="Faux") echo "checked";?>>
                  <label for="<?php echo $id_quiz_qst."_off";?>" class="radioCheck">Faux</label>
                  <a class="slide-button btn"></a>
                  <label style="display:inline; float:right; position:absolute; font-size:18px;">
                    <i class="good icon_check_alt2" style="color:#17944d ;"></i>
                    <i class="not-good icon_close_alt2" style="color:#ff5032 ;"></i>
                  </label>
                </span>
              </span>
            </div>
          </div>
        </div>
      <?php } ?>
    </div>
    <?php
  } ?>
  <div style="overflow:auto;">
    <div class="text-center">
      <a class="next-prev" id="prevBtn" onclick="nextPrev(-1)"><i class="fa arrow_carrot-2left_alt "></i></a>
      <a class="next-prev" id="nextBtn" onclick="nextPrev(1)"><i class="fa arrow_carrot-2right_alt"></i></a>
    </div>
  </div>
  <!-- Circles which indicates the steps of the form: -->
  <div style="text-align:center;margin-top:10px;">
    <span class="step"></span><span class="step"></span><span class="step"></span><span class="step"></span><span class="step"></span>
  </div>
  <div id="submit-area" class="text-center">
    <button id="submit_answers" name="submit_answers" type="submit" onclick="myfunc();" class="btn btn-primary btn-lg">Valider</button>
    <button type="reset" class="btn btn-primary btn-lg">Annuler</button>

  </div>
</form>



<script>
  var currentTab = 0; // Current tab is set to be the first tab (0)
  showTab(currentTab); // Display the current tab

  function showTab(n) {
    // This function will display the specified tab of the form...
    var x = document.getElementsByClassName("tab");
    x[n].style.display = "block";
    //... and fix the Previous/Next buttons:
    if (n == 0) {
      document.getElementById("prevBtn").style.display = "none";
    } else {
      document.getElementById("prevBtn").style.display = "inline";
    }
    if (n == (x.length - 1)) {
      document.getElementById("submit-area").style.display="block";
      document.getElementById("nextBtn").style.display = "none";
    } else {
      document.getElementById("nextBtn").style.display = "inline";
    }
    //... and run a function that will display the correct step indicator:
    fixStepIndicator(n)
  }

  function nextPrev(n) {
    // This function will figure out which tab to display
    var x = document.getElementsByClassName("tab");
    // Exit the function if any field in the current tab is invalid:
    if (n == 1 && !validateForm()) return false;
    // Hide the current tab:
    x[currentTab].style.display = "none";
    // Increase or decrease the current tab by 1:
    currentTab = currentTab + n;
    // if you have reached the end of the form...
    if (currentTab >= x.length) {
      // ... the form gets submitted:
      document.getElementById("questionForm").submit();
      return false;
    }
    // Otherwise, display the correct tab:
    showTab(currentTab);
  }
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");

  function changeColor(){
    x = document.getElementsByClassName("tab");
    y = x[currentTab].getElementsByTagName("input");

  }
  function validateForm() {
    // This function deals with validation of the form fields
    var x, y, i, good, not_good, valid = true;
    x = document.getElementsByClassName("tab");
    y = x[currentTab].getElementsByTagName("input");
    good = document.getElementsByClassName("good");
    not_good = document.getElementsByClassName("not-good");

    // A loop that checks every input field in the current tab:
    //  alert(y[0].getElementById("btv").name);
    var indexinc =0;
    for (i = 0; i < y.length; i++) {
      // If a field is empty...
      //y[i].parentNode.className =     y[i].parentNode.className.replace("invalid","");
      if (!y[i].checked) {
        indexinc++;
        // add an "invalid" class to the field:
        not_good[i].style.display="block";
        // and set the current valid status to false
        valid = false;
      }
      else{
        good[i].style.display="block";
        valid = true;
      }
    }
    if(indexinc == 10)//Verify that he did answer all 22 questions and check that we have the 22 inputs not 44 inputs (vrai/faux)
    valid = true;
    // If the valid status is true, mark the step as finished and valid:
    if (valid) {
      document.getElementsByClassName("step")[currentTab].className += " finish";
    }
    return valid; // return the valid status
  }
  function fixStepIndicator(n) {
    // This function removes the "active" class of all steps...
    var i, x = document.getElementsByClassName("step");
    for (i = 0; i < x.length; i++) {
      x[i].className = x[i].className.replace(" active", "");
    }
    //... and adds the "active" class on the current step:
    x[n].className += " active";
  }
</script>

Answer 1

你可以使用你的html结构来评估这个，使用querySelectorAll并验证是否选择了一个部分的至少一个单选按钮，这个函数可以工作，但我建议他们将它们放在一个类或IIFE中，以避免将它们声明为全球范围......

function nextTab(e) {
  if (validate(e)){
   console.log("go to next tab");
  } 
}
function validate(element) {
  let val = true;
  let select = element.closest("section");
  select.querySelectorAll('.radio-container').forEach(function(container){
    let radioChecked = container.querySelectorAll("input:checked");
    container.style.backgroundColor = "white";
    if(!radioChecked.length) {
      val = val && false;
      container.style.backgroundColor = "red";
    }
  });
  return val;
}

<section id="tab1">
  <div class="radio-container">
    <input type="radio" name="gender" value="male"> Male
    <input type="radio" name="gender" value="female"> Female
    <input type="radio" name="gender" value="other"> Other
  </div>
  <div class="radio-container">
    <input type="radio" name="gender1" value="male"> Male
    <input type="radio" name="gender1" value="female"> Female
    <input type="radio" name="gender1" value="other"> Other
  </div>
  <div class="radio-container">
    <input type="radio" name="gender2" value="male"> Male
    <input type="radio" name="gender2" value="female"> Female
    <input type="radio" name="gender2" value="other"> Other
  </div>
  <button type="button" onclick="nextTab(this)">Continue</button>
</section>

UPDATE

您可以使用相同的想法，您可以使用currentTab变量获取选项卡部分，在此选项卡中，您可以获得所有“.question-rbtn”元素，使用这些元素，您可以验证是否至少有一个单选按钮是检查...

function nextPrev(n) {

    // Validate radio buttons
    if(!validate()) return;

    // This function will figure out which tab to display
    var x = document.getElementsByClassName("tab");
    // Exit the function if any field in the current tab is invalid:
    if (n == 1 && !validateForm()) return false;
    // Hide the current tab:
    x[currentTab].style.display = "none";
    // Increase or decrease the current tab by 1:
    currentTab = currentTab + n;
    // if you have reached the end of the form...
    if (currentTab >= x.length) {
      // ... the form gets submitted:
      document.getElementById("questionForm").submit();
      return false;
    }
    // Otherwise, display the correct tab:
    showTab(currentTab);
  }

  function validate() {
  let val = true;
  let select = document.getElementsByClassName("tab")[currentTab];
  select.querySelectorAll('.question-rbtn').forEach(function(container) 
  {
    let radioChecked = container.querySelectorAll("input:checked");
    container.style.backgroundColor = "white";
    if(!radioChecked.length) {
      val = val && false;
      container.style.backgroundColor = "red";
    }
  });
  return val;
}