驗證單選按鈕和復選框
[英]Validating radio buttons and checkboxes
問題描述
我在獲取代碼以驗證單選按鈕和復選框時遇到一些問題。 我可以為我的文本區域弄清楚，但是我似乎無法用其他輸入解決問題。
我不太確定還要采取什么其他步驟，尤其是對於這些多選題。 讓我知道您的建議，將不勝感激。
function validateForm() { var x = document.forms["quiz"]["text1"].value; if (x == "") { alert("Oops, you forgot the text!"); return false; } else if (x == "yes" || x == "Yes" || x == "YES") { return true; } } function formSubmit() { document.getElementById("quiz").submit(); } function reset() { document.getElementById("reset").reset(); } function validate() { var a = document.getElementById("rad1").required; var b = document.getElementById("op1").required; var c = document.getElementById("rad2").required; if (a == false || b == false || c == false) { alert("Oops, you forgot something!") } }
<h4>First, Let's take a small quiz! What type of Developer am I?</h4> <form name="quiz" id="quiz" method="post"> <table> <tr> <td> <label for="ques1">Do you ever think about how you would design a web page?</label> </td> <td> <input type="radio" value="no" name="rad1">NO <input type="radio" value="yes" name="rad1">YES </td> </tr> <tr> <td> <label for="ques2">If yes, which of these are your main priorities when thinking of the design? If no, please check N/A</label> </td> <td> <input type="checkbox" name="op1"> Ease of Use <input type="checkbox" name="op1"> Graphics & Content <input type="checkbox" name="op1"> The Data Collected <input type="checkbox" name="op1"> N/A </td> </tr> <tr> <td> <label for="ques3">Do you enjoy conducting research, asking questions, and building reports?</label> </td> <td> <input type="radio" value="no" name="rad2">NO <input type="radio" value="yes" name="rad2">YES </td> </tr> <tr> <td> <label for="ques4">Does hacking a system or stopping a system from being hacked sound interesting to you? Type Yes or No:</label> </td> <td> <input type="text" name="text1" maxlength="3"> </td> </tr> <tr> <td></td> <td> <input type="button" value="Finished!" id="submit" onclick="return validateForm(document.getElementById('quiz'))"> <input type="reset" id="reset"> </td> </tr> </table> </form>
1 個解決方案
解決方案1
0 2018-11-06 06:33:09
請檢查以下修改過的HTML。 我已用您期望的驗證重新修改。 通過代碼來了解一下
<!DOCTYPE html> <html> <head> <script> function validateForm() { debugger; if(!validate()) { var x = document.forms["quiz"]["text1"].value; if (x == "") { alert("Oops, you forgot the text!"); return false; } else if (x == "yes" || x == "Yes" || x== "YES") { alert("Alright"); return true; } } } function formSubmit() { document.getElementById("quiz").submit(); } function reset() { document.getElementById("reset").reset(); } function validate() { debugger; var a1 = document.getElementById("rad1").checked; var a2 = document.getElementById("rad2").checked; var a3 = document.getElementById("rad3").checked; var a4 = document.getElementById("rad4").checked; var b1 = document.getElementById("op1").checked; var b2 = document.getElementById("op2").checked; var b3 = document.getElementById("op3").checked; var b4 = document.getElementById("op4").checked; if ((a1 == false && a2 == false) || (a3 == false && a4 == false) || (b1 == false && b2 == false && b3 == false && b4 == false)) { alert("Oops, you forgot first three questions!") return false; } } </script> </head> <body> <h4>First, Let's take a small quiz! What type of Developer am I?</h4> <form name="quiz" id="quiz" method="post"> <table> <tr> <td> <label for="ques1">Do you ever think about how you would design a web page?</label> </td> <td> <input type="radio" value="no" id="rad1">NO <input type="radio" value="yes" id="rad2">YES </td> </tr> <tr> <td> <label for="ques2">If yes, which of these are your main priorities when thinking of the design? If no, please check N/A</label> </td> <td> <input type="checkbox" id="op1"> Ease of Use <input type="checkbox" id="op2"> Graphics & Content <input type="checkbox" id="op3"> The Data Collected <input type="checkbox" id="op4"> N/A </td> </tr> <tr> <td> <label for="ques3">Do you enjoy conducting research, asking questions, and building reports?</label> </td> <td> <input type="radio" value="no" id="rad3">NO <input type="radio" value="yes" id="rad4">YES </td> </tr> <tr> <td> <label for="ques4">Does hacking a system or stopping a system from being hacked sound interesting to you? Type Yes or No:</label> </td> <td> <input type="text" name="text1" maxlength="3"> </td> </tr> <tr> <td></td> <td> <input type="button" value="Finished!" id="submit" onclick="return validateForm(document.getElementById('quiz'))"> <input type="reset" id="reset"> </td> </tr> </table> </form> </body> </html>
單選按鈕未驗證
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.