为什么我的单选按钮验证不起作用答案

【问题标题】：Why isnt my radio button validation working为什么我的单选按钮验证不起作用
【发布时间】：2023-03-19 10:15:01
【问题描述】：

我正在建立一个约会网站，我下载了这个预装文本框但想使用单选按钮的模板，当我尝试更改它时，我无法验证我的单选按钮，因此它不会让你进入下一个选项卡不回答问题。

我还没试过很多

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>
* {
  box-sizing: border-box;
}

body {
  background:url(img/background.jpg) ;
}

#regForm {
  background-color: rgba(255,255,255,0.8);
  margin: 100px auto;
  font-family: Raleway;
  padding: 40px;
  width: 70%;
  min-width: 300px;
  border-radius:35px;
}

h1 {
  text-align: center;  
}

input {
  padding: 10px;

  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
  background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
  display: none;
}

button {
  background-color: #4CAF50;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

#prevBtn {
  background-color: #bbbbbb;
}

/* Make circles that indicate the steps of the form: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;  
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

.step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #4CAF50;
}
</style>
<body>

<form method="post" id="regForm" action="">


  <!-- One "tab" for each step in the form: -->
  <div class="tab"> 
  <h1>Vraag 1</h1>
  <p> Zoek je naar een serieuze relatie of een fling?</p>
    <input type="radio"  oninput="this.className = ''" name="vraag1" required="required"> Serieuze relatie
    <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag1" required="required"> Fling 
  </div>


  <div class="tab"> 
  <h1>Vraag 2</h1> 
  <p> Hoelang wil je dat je volgende relatie duurt?</p>

    <input type="radio"  oninput="this.className = ''" name="vraag2" required="required"> Een Nacht
    <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag2" required="required"> Een paar maanden
   <br>
   <input type="radio"  oninput="this.className = ''" name="vraag2" required="required"> Meer dan een jaar
    <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag2" required="required"> Rest van je leven
  </div>


  <div class="tab"> 
  <h1>Vraag 3</h1>
  <p> Ben je sportief of niet sportief?</p>
    <input type="radio"  oninput="this.className = ''" name="vraag3" required="required"> Sportief
    <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag3" required="required"> Niet sportief
  </div>


  <div class="tab"> 
  <h1>Vraag 4</h1>
  <p> Ben je uitgaand of verlegen?</p>
    <input type="radio"  oninput="this.className = ''" name="vraag4" required="required"> Uitgaand
    <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag4" required="required"> Verlegen
  </div>

  <div class="tab"> 
  <h1>Vraag 5</h1>
  <p>   Wat vind je belangrijker familie of vrienden?</p>
    <input type="radio"  oninput="this.className = ''" name="vraag5" required="required"> Familie
    <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag5" required="required"> Vrienden
  </div>

  <div class="tab"> 
  <h1>Vraag 6</h1>
  <p> In je vrije tijd vind je leuker om uit te gaan of thuis blijven?</p>
    <input type="radio"  oninput="this.className = ''" name="vraag6" required="required"> Uitgaan
    <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag6" required="required"> Thuis blijven
  </div>

  <div class="tab"> 
  <h1>Vraag 7</h1>
  <p> Ben je een ochtend of nacht persoon?</p>
    <input type="radio"  oninput="this.className = ''" name="vraag7" required="required"> Ochtend persoon
    <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag7" required="required"> Nacht persoon
  </div>

  <div class="tab"> 
  <h1>Vraag 8</h1>
  <p> Ben je een hond of kat persoon?</p>
    <input type="radio"  oninput="this.className = ''" name="vraag8" required="required"> Hond
    <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag8" required="required"> Kat
  </div>

  <div class="tab"> 
  <h1>Vraag 9</h1>
  <p> Vind je leuker om boeken te lezen of TV te kijken?</p>
    <input type="radio"  oninput="this.className = ''" name="vraag9" required="required"> Boeken lezen
    <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag9" required="required"> TV kijken
  </div>

  <div class="tab"> 
  <h1>Vraag 10</h1>
  <p> Als je iemand voor het eerst ontmoet wat valt je als eerst op?</p>
    <input type="radio"  oninput="this.className = ''" name="vraag10" required="required"> Ogen
    <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag10" required="required"> Glimlach
   <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag10" required="required"> Haar
   <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag10" required="required"> Neus
  </div>

    <div class="tab"> 
  <h1>Vraag 11</h1>
  <p> Ben je meer zorgeloos of intense?</p>
    <input type="radio"  oninput="this.className = ''" name="vraag11" required="required"> Zorgeloos
    <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag11" required="required"> Intense
  </div>

    <div class="tab"> 
  <h1>Vraag 12</h1>
  <p> Vind je leuker om een grote of kleine groep van vrienden te hebben?</p>
    <input type="radio"  oninput="this.className = ''" name="vraag12" required="required"> Grote groep vrienden
    <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag12" required="required"> Kleine groep vrienden
  </div>

  <div class="tab"> 
  <h1>Vraag 13</h1>
  <p> Welke film genre vind je leuker?</p>
    <input type="radio"  oninput="this.className = ''" name="vraag13" required="required"> Komedie film
    <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag13" required="required"> Actie film
   <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag13" required="required"> Horror film
   <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag13" required="required"> Romantische film
  </div>

   <div class="tab"> 
  <h1>Vraag 14</h1>
  <p> Wat wil je liever eindeloze liefde of eindeloze geld?</p>
    <input type="radio"  oninput="this.className = ''" name="vraag14" required="required"> Eindeloze liefde
    <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag14" required="required"> Eindeloze geld
  </div>

   <div class="tab"> 
  <h1>Vraag 15</h1>
  <p> Als je een sms krijgt zou je</p>
    <input type="radio"  oninput="this.className = ''" name="vraag15" required="required"> Meteen beantwoorden
    <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag15" required="required"> 5-10 minuten wachten
   <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag15" required="required"> Een paar uren wachten
   <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag15" required="required"> Volgende dag beantwoorden
  </div>

  <div class="tab"> 
  <h1>Vraag 16</h1>
  <p> Als je de optie had, wat zou je liever doen?</p>
    <input type="radio"  oninput="this.className = ''" name="vraag16" required="required"> Skydiven
    <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag16" required="required"> Bungee jumpen
   <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag16" required="required"> Met haaien zwemmen
  </div>

   <div class="tab"> 
  <h1>Vraag 17</h1>
  <p> Wat zou je liever eten?</p>
    <input type="radio"  oninput="this.className = ''" name="vraag17" required="required"> Pizza
    <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag17" required="required"> Pasta
   <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag17" required="required"> Salade
   <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag17" required="required"> Burgers
  </div>

    <div class="tab"> 

  <h1>Vraag 18</h1>
  <p> Ben je meer zelfstandig of ben je meer afhankelijk van anderen?</p>
    <input type="radio"  oninput="this.className = ''" name="vraag18" required="required"> Zelfstandig
    <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag18" required="required"> Afhankelijk van anderen
  </div>

  <div class="tab"> 
  <h1>Vraag 19</h1>
  <p> Hou je van avonturen?</p>
    <input type="radio"  oninput="this.className = ''" name="vraag19" required="required"> Ja
    <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag19" required="required"> Nee
  </div>

   <div class="tab"> 
  <h1>Vraag 20</h1>
  <p> Welk soort muziek vind je het leukst?</p>
    <input type="radio"  oninput="this.className = ''" name="vraag20" required="required"> Pop
    <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag20" required="required"> Rock
   <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag20" required="required"> Rap
   <br>
   <input type="radio" placeholder="Last name..."  oninput="this.className = ''" name="vraag20" required="required"> Latin
  </div>

  <div style="overflow:auto;">
    <div style="float:right;">
      <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
      <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
    </div>
  </div>
  <!-- Circles which indicates the steps of the form: -->
  <div style="text-align:center;margin-top:40px;">
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>

  </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("nextBtn").innerHTML = "Submit";
  } else {
    document.getElementById("nextBtn").innerHTML = "Next";
  }
  //... 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("regForm").submit();
    return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
}

function validateForm() {
    document.querySelectorAll('input[name="radio"]:checked').length > 0
  // This function deals with validation of the form fields
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  // A loop that checks every input field in the current tab:
  for (i = 0; i < y.length; i++) {
    // If a field is empty...
    if (y[i].value == "") {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      // and set the current valid status to false
      valid = false;
    }
  }
  // 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>

</body>
</html>

如果选中该选项卡上的单选按钮，我希望它输出有效 = true，否则我希望它输出有效 = false

【问题讨论】：

document.querySelectorAll('input[name="radio"]:checked').length > 0 进行检查，然后什么也不做。
请始终添加相关的 HTML、CSS 和 JavaScript，以便我们复制您的问题并提供有效的答案。
现在好点了吗？

标签： javascript css validation radio-button

【解决方案1】：

用这个替换你的 validateForm() 函数：

    function validateForm() {

  let tabs = document.getElementsByClassName("tab");
  let radios = tabs[currentTab].getElementsByTagName("input");
  let valid = false;

  for(radio of radios){
    if(radio.checked){ valid = true; }
  }

  return valid;
}

您的所有代码都有一个工作示例：https://codepen.io/anon/pen/VObXYr

如果需要，请随意添加错误类，我无法弄清楚您想要如何做事，但您的验证使用上述解决方案有效。

【讨论】：

【解决方案2】：

错误 =

 document.querySelectorAll('input[name="radio"]:checked').length > 0

没有 IF，var xx = ..

对 css 的一个更改：

.tab {
  display: none;
  height:250px;
}

一切：

const
  Vraag    = document.getElementsByClassName("tab"),
  StepIn   = document.getElementsByClassName("step"),
  LastVrag = Vraag.length -1,
  Bt_Prev  = document.getElementById("prevBtn"),
  Bt_Next  = document.getElementById("nextBtn");
  
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab

function showTab(n)
{
  Vraag[n].style.display = "block";                              // display the specified tab of the form.
  Bt_Prev.style.display  = (n===0) ? "none" : "inline";          // fix the Previous buttons
  Bt_Next.textContent    = (n < LastVrag) ? "Next" : "Submit";   // fix the Next buttons

  for (let i = 0; i <= Vraag; i++)           
  {             
    StepIn[i].classList.remove('active');       //  clear all steps indicator:
  }
  StepIn[n].classList.add('active');            // set "active" class on the current step:    
}

function nextPrev(addValue)
{
  if ( 1===addValue && !CurrentTabValid() )
    return;
  
  Vraag[currentTab].style.display = "none";    // Hide the current tab:

  currentTab += addValue;
  
  if (currentTab > LastVrag)                     // when reached the end of the form...
  {
    document.getElementById("regForm").submit(); // theform gets submitted:
    return;
  }
  showTab(currentTab);                           // Otherwise, display the correct tab:
}

function CurrentTabValid()
{
  let OKi = ( 0 < Vraag[currentTab].querySelectorAll('input[type=radio]:checked').length );

  Vraag[currentTab].querySelectorAll('input').forEach(inPut=>{

    if (OKi) { inPut.classList.remove('invalid') }
    else     { inPut.classList.add('invalid') }
  }) 

  if (OKi) {  StepIn[currentTab].classList.add('finish')  }

  return OKi;
}

    * {
      box-sizing: border-box;
    }
    body {
      background: url(img/background.jpg);
    }
    #regForm {
      background-color: rgba(255, 255, 255, 0.8);
      margin: 100px auto;
      font-family: Raleway;
      padding: 40px;
      width: 70%;
      min-width: 300px;
      border-radius: 35px;
    }
    h1 {
      text-align: center;
    }
    input {
      padding: 10px;
      font-size: 17px;
      font-family: Raleway;
      border: 1px solid #aaaaaa;
    }
    /* Mark input boxes that gets an error on validation: */
    input.invalid {
      background-color: #ffdddd;
    }
    /* Hide all steps by default: */
    .tab {
      display: none;
      height:250px;
    }
    button {
      background-color: #4CAF50;
      color: #ffffff;
      border: none;
      padding: 10px 20px;
      font-size: 17px;
      font-family: Raleway;
      cursor: pointer;
    }
    button:hover {
      opacity: 0.8;
    }
    #prevBtn {
      background-color: #bbbbbb;
    }
    /* Make circles that indicate the steps of the form: */
    .step {
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbbbbb;
      border: none;
      border-radius: 50%;
      display: inline-block;
      opacity: 0.5;
    }
    .step.active {
      opacity: 1;
    }
    /* Mark the steps that are finished and valid: */
    .step.finish {
      background-color: #4CAF50;
    }

  <form method="post" id="regForm" action="">

    <!-- One "tab" for each step in the form: -->
    <div class="tab">
      <h1>Vraag 1</h1>
      <p> Zoek je naar een serieuze relatie of een fling?</p>
      <input type="radio" oninput="this.className = ''" name="vraag1" required="required"> Serieuze relatie
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag1" required="required">
      Fling
    </div>

    <div class="tab">
      <h1>Vraag 2</h1>
      <p> Hoelang wil je dat je volgende relatie duurt?</p>

      <input type="radio" oninput="this.className = ''" name="vraag2" required="required"> Een Nacht
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag2" required="required">
      Een paar maanden
      <br>
      <input type="radio" oninput="this.className = ''" name="vraag2" required="required"> Meer dan een jaar
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag2" required="required">
      Rest van je leven
    </div>

    <div class="tab">
      <h1>Vraag 3</h1>
      <p> Ben je sportief of niet sportief?</p>
      <input type="radio" oninput="this.className = ''" name="vraag3" required="required"> Sportief
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag3" required="required">
      Niet sportief
    </div>

    <div class="tab">
      <h1>Vraag 4</h1>
      <p> Ben je uitgaand of verlegen?</p>
      <input type="radio" oninput="this.className = ''" name="vraag4" required="required"> Uitgaand
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag4" required="required">
      Verlegen
    </div>

    <div class="tab">
      <h1>Vraag 5</h1>
      <p> Wat vind je belangrijker familie of vrienden?</p>
      <input type="radio" oninput="this.className = ''" name="vraag5" required="required"> Familie
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag5" required="required">
      Vrienden
    </div>

    <div class="tab">
      <h1>Vraag 6</h1>
      <p> In je vrije tijd vind je leuker om uit te gaan of thuis blijven?</p>
      <input type="radio" oninput="this.className = ''" name="vraag6" required="required"> Uitgaan
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag6" required="required">
      Thuis blijven
    </div>

    <div class="tab">
      <h1>Vraag 7</h1>
      <p> Ben je een ochtend of nacht persoon?</p>
      <input type="radio" oninput="this.className = ''" name="vraag7" required="required"> Ochtend persoon
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag7" required="required">
      Nacht persoon
    </div>

    <div class="tab">
      <h1>Vraag 8</h1>
      <p> Ben je een hond of kat persoon?</p>
      <input type="radio" oninput="this.className = ''" name="vraag8" required="required"> Hond
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag8" required="required">
      Kat
    </div>

    <div class="tab">
      <h1>Vraag 9</h1>
      <p> Vind je leuker om boeken te lezen of TV te kijken?</p>
      <input type="radio" oninput="this.className = ''" name="vraag9" required="required"> Boeken lezen
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag9" required="required"> TV
      kijken
    </div>

    <div class="tab">
      <h1>Vraag 10</h1>
      <p> Als je iemand voor het eerst ontmoet wat valt je als eerst op?</p>
      <input type="radio" oninput="this.className = ''" name="vraag10" required="required"> Ogen
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag10" required="required">
      Glimlach
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag10" required="required">
      Haar
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag10" required="required">
      Neus
    </div>

    <div class="tab">
      <h1>Vraag 11</h1>
      <p> Ben je meer zorgeloos of intense?</p>
      <input type="radio" oninput="this.className = ''" name="vraag11" required="required"> Zorgeloos
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag11" required="required">
      Intense
    </div>

    <div class="tab">
      <h1>Vraag 12</h1>
      <p> Vind je leuker om een grote of kleine groep van vrienden te hebben?</p>
      <input type="radio" oninput="this.className = ''" name="vraag12" required="required"> Grote groep vrienden
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag12" required="required">
      Kleine groep vrienden
    </div>

    <div class="tab">
      <h1>Vraag 13</h1>
      <p> Welke film genre vind je leuker?</p>
      <input type="radio" oninput="this.className = ''" name="vraag13" required="required"> Komedie film
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag13" required="required">
      Actie film
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag13" required="required">
      Horror film
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag13" required="required">
      Romantische film
    </div>

    <div class="tab">
      <h1>Vraag 14</h1>
      <p> Wat wil je liever eindeloze liefde of eindeloze geld?</p>
      <input type="radio" oninput="this.className = ''" name="vraag14" required="required"> Eindeloze liefde
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag14" required="required">
      Eindeloze geld
    </div>

    <div class="tab">
      <h1>Vraag 15</h1>
      <p> Als je een sms krijgt zou je</p>
      <input type="radio" oninput="this.className = ''" name="vraag15" required="required"> Meteen beantwoorden
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag15" required="required">
      5-10 minuten wachten
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag15" required="required">
      Een paar uren wachten
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag15" required="required">
      Volgende dag beantwoorden
    </div>

    <div class="tab">
      <h1>Vraag 16</h1>
      <p> Als je de optie had, wat zou je liever doen?</p>
      <input type="radio" oninput="this.className = ''" name="vraag16" required="required"> Skydiven
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag16" required="required">
      Bungee jumpen
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag16" required="required">
      Met haaien zwemmen
    </div>

    <div class="tab">
      <h1>Vraag 17</h1>
      <p> Wat zou je liever eten?</p>
      <input type="radio" oninput="this.className = ''" name="vraag17" required="required"> Pizza
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag17" required="required">
      Pasta
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag17" required="required">
      Salade
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag17" required="required">
      Burgers
    </div>

    <div class="tab">

      <h1>Vraag 18</h1>
      <p> Ben je meer zelfstandig of ben je meer afhankelijk van anderen?</p>
      <input type="radio" oninput="this.className = ''" name="vraag18" required="required"> Zelfstandig
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag18" required="required">
      Afhankelijk van anderen
    </div>

    <div class="tab">
      <h1>Vraag 19</h1>
      <p> Hou je van avonturen?</p>
      <input type="radio" oninput="this.className = ''" name="vraag19" required="required"> Ja
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag19" required="required">
      Nee
    </div>

    <div class="tab">
      <h1>Vraag 20</h1>
      <p> Welk soort muziek vind je het leukst?</p>
      <input type="radio" oninput="this.className = ''" name="vraag20" required="required"> Pop
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag20" required="required">
      Rock
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag20" required="required">
      Rap
      <br>
      <input type="radio" placeholder="Last name..." oninput="this.className = ''" name="vraag20" required="required">
      Latin
    </div>

    <div style="overflow:auto;">
      <div style="float:right;">
        <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
        <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
      </div>
    </div>
    <!-- Circles which indicates the steps of the form: -->
    <div style="text-align:center;margin-top:40px;">
      <span class="step"></span>
      <span class="step"></span>
      <span class="step"></span>
      <span class="step"></span>
      <span class="step"></span>
      <span class="step"></span>
      <span class="step"></span>
      <span class="step"></span>
      <span class="step"></span>
      <span class="step"></span>
      <span class="step"></span>
      <span class="step"></span>
      <span class="step"></span>
      <span class="step"></span>
      <span class="step"></span>
      <span class="step"></span>
      <span class="step"></span>
      <span class="step"></span>
      <span class="step"></span>

    </div>
  </form>

【讨论】：