单选按钮的 JavaScript 验证

Question

下面是一个用 HTML、CSS 和 JavaScript 构建的测验，它有 4 个问题，我想制作要选择的问题的单选按钮，否则它会显示一条警告“请检查一个选项”，但它不会工作，我可以通过按“下一步”按钮并将选项留空来跳过问题。知道如何解决这个问题吗？

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

您可以通过在下一步按钮的点击事件处理程序中调用validateForm()函数来完成此操作。该函数返回一个 bool 值，如果为 true，则调用 switchToNextQuestion()。

为了能够做到这一点，我们需要对您的代码进行一些细微的修改。

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

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

这里我们使用新参数调用 validateForm，该参数告诉输入对话框的函数进行验证。

修改后的validateForm函数:

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;
}

最后一个工作示例:

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>