單選按鈕的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

您可以通過在下一個按鈕的click事件處理程序中調用validateForm()函數來完成此操作。 此函數返回一個布爾值，如果為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>