JavaScript validation of radio buttons

Question

Below it's a quiz built with HTML, CSS, and JavaScript and it has 4 questions and I want to make radio buttons of questions to be selected otherwise it will show an alert saying "Please check an option", but it does not work and I can skip questions by pressing button "Next" and leaving options empty. Any idea how this can be solved?

 let question1 = document.getElementById('pytja1'); let question2 = document.getElementById('pytja2'); let question3 = document.getElementById('pytja3'); let question4 = document.getElementById('pytja4'); let result = document.getElementById('bot-submit'); let nextButtons = document.querySelectorAll('.bot'); for (let i = 0; i < nextButtons.length; i++) { let nextQuestion = nextButtons[i]; nextQuestion.onclick = function() { switchToNextQuestion(this); }; } function switchToNextQuestion(nextQuestion) { let parentId = nextQuestion.parentNode.id; if (parentId === 'pytja1') { question1.style.display = 'none'; question2.style.display = 'block'; } else if (parentId === 'pytja2') { question2.style.display = 'none'; question3.style.display = 'block'; } else if (parentId === 'pytja3') { question3.style.display = 'none'; question4.style.display = 'block'; } } function validateForm() { let radios = document.getElementsByName("q1"); let formValid = false; let i = 0; while (!formValid && i < radios.length) { if (radios[i].checked) formValid = true; i++; } if (!formValid) alert("Select one option"); return formValid; } 

 form { width: 100%; position: relative; float: left; padding-top: 50px; } .quiz { margin: 0px auto; width: 250px; height: 100px; position: absolute; top: 60px; left: 42%; } .quest1, .quest2, .quest3, .quest4 { background-color: cadetblue; font-size: 22px; } .questions1 { margin-left: 28px; background-color: cyan; width: 220px; padding: 10px; font-size: 20px; } .questions2 { background-color: red; } .questions3 { background-color: greenyellow; } .questions4 { background-color: olivedrab; } .bot { margin-top: 10px; } #pytja2, #pytja3, #pytja4 { margin-left: 28px; display: none; width: 220px; padding: 10px; font-size: 20px; } 

 <div id = "results"> <form id="quiz-form"> <div class="quiz"> <div id="pytja1" class="questions1"> <span class="quest1">I am a ?</span><br/> <input type="radio" name="q1" value="male" id="correct"> Male<br/> <input type="radio" name="q1" value="female" id="correct2"> Female<br/> <input type="radio" name="q1" value="other" id="correct3"> Other<br/> <input class="bot" type="button" value="Next" onclick="return validateForm()"/> </div> <div id="pytja2" class="questions2"> <span class="quest2">Football has letters ?</span><br/> <input type="radio" name="q2" value="8" class="correct"> 8<br/> <input type="radio" name="q2" value="5"> 5<br/> <input type="radio" name="q2" value="6"> 6<br/> <input class="bot" type="button" value="Next" /> </div> <div id="pytja3" class="questions3"> <span class="quest3">VW stands for ?</span><br/> <input type="radio" name="q3" value="BMW" /> BMW <br/> <input type="radio" name="q3" value="Volkswagen" class="correct" /> Volkswagen<br/> <input type="radio" name="q3" value="Audi" /> Audi<br/> <input class="bot" type="button" value="Next" /> </div> <div id="pytja4" class="questions4"> <span class="quest4">What year it is ?</span><br/> <input type="radio" name="q4" value="2017" /> 2017<br/> <input type="radio" name="q4" value="2015" /> 2015<br/> <input type="radio" name="q4" value="2019" class="correct" /> 2019<br/> <input id="bot-submit" type="submit" value="Submit" /> </div> </div> </form> </div> 

Answer 1

You can do this by calling your validateForm() function within the click event handler of your next buttons. This function is returning a boolean, if it's true, call switchToNextQuestion() .

To be able to do this we need to make some slight modifications to your code though.

for (let i = 0; i < nextButtons.length; i++) {
  let nextQuestion = nextButtons[i];
  nextQuestion.onclick = function() {

    if (validateForm(i + 1)) {
      switchToNextQuestion(this);
    }
  };
}

Here we're calling validateForm using a newly parameter, which tells the function wich input dialog to validate.

The modified validateForm function:

function validateForm(elementNumber) {
  let radios = document.getElementsByName("q" + elementNumber);
  let formValid = false;
  let i = 0;
  while (!formValid && i < radios.length) {
    if (radios[i].checked) formValid = true;
    i++;
  }
  if (!formValid) alert("Select one option");
  return formValid;
}

Finally a working example:

 let question1 = document.getElementById('pytja1'); let question2 = document.getElementById('pytja2'); let question3 = document.getElementById('pytja3'); let question4 = document.getElementById('pytja4'); let result = document.getElementById('bot-submit'); let nextButtons = document.querySelectorAll('.bot'); for (let i = 0; i < nextButtons.length; i++) { let nextQuestion = nextButtons[i]; nextQuestion.onclick = function() { if (validateForm(i + 1)) { switchToNextQuestion(this); } }; } function switchToNextQuestion(nextQuestion) { let parentId = nextQuestion.parentNode.id; if (parentId === 'pytja1') { question1.style.display = 'none'; question2.style.display = 'block'; } else if (parentId === 'pytja2') { question2.style.display = 'none'; question3.style.display = 'block'; } else if (parentId === 'pytja3') { question3.style.display = 'none'; question4.style.display = 'block'; } } function validateForm(elementNumber) { let radios = document.getElementsByName("q" + elementNumber); let formValid = false; let i = 0; while (!formValid && i < radios.length) { if (radios[i].checked) formValid = true; i++; } if (!formValid) alert("Select one option"); return formValid; } 

 form { width: 100%; position: relative; float: left; padding-top: 50px; } .quiz { margin: 0px auto; width: 250px; height: 100px; position: absolute; top: 60px; left: 42%; } .quest1, .quest2, .quest3, .quest4 { background-color: cadetblue; font-size: 22px; } .questions1 { margin-left: 28px; background-color: cyan; width: 220px; padding: 10px; font-size: 20px; } .questions2 { background-color: red; } .questions3 { background-color: greenyellow; } .questions4 { background-color: olivedrab; } .bot { margin-top: 10px; } #pytja2, #pytja3, #pytja4 { margin-left: 28px; display: none; width: 220px; padding: 10px; font-size: 20px; } 

 <div id="results"> <form id="quiz-form"> <div class="quiz"> <div id="pytja1" class="questions1"> <span class="quest1">I am a ?</span><br/> <input type="radio" name="q1" value="male" id="correct"> Male<br/> <input type="radio" name="q1" value="female" id="correct2"> Female<br/> <input type="radio" name="q1" value="other" id="correct3"> Other<br/> <input class="bot" type="button" value="Next" /> </div> <div id="pytja2" class="questions2"> <span class="quest2">Football has letters ?</span><br/> <input type="radio" name="q2" value="8" class="correct"> 8<br/> <input type="radio" name="q2" value="5"> 5<br/> <input type="radio" name="q2" value="6"> 6<br/> <input class="bot" type="button" value="Next" /> </div> <div id="pytja3" class="questions3"> <span class="quest3">VW stands for ?</span><br/> <input type="radio" name="q3" value="BMW" /> BMW <br/> <input type="radio" name="q3" value="Volkswagen" class="correct" /> Volkswagen<br/> <input type="radio" name="q3" value="Audi" /> Audi<br/> <input class="bot" type="button" value="Next" /> </div> <div id="pytja4" class="questions4"> <span class="quest4">What year it is ?</span><br/> <input type="radio" name="q4" value="2017" /> 2017<br/> <input type="radio" name="q4" value="2015" /> 2015<br/> <input type="radio" name="q4" value="2019" class="correct" /> 2019<br/> <input id="bot-submit" type="submit" value="Submit" /> </div> </div> </form> </div>