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>