Question

我编写了一个表单，可以将信息发布到处理它的另一个页面。我想询问用户是否有未选择的选项。我的表格如下：

<form action="answers-of-brain-teaser-questions.php" method="post">
<div>
<div>Question 1</div>
<input name="q1" type="radio" value="1">A. 1
<br />
<input name="q1" type="radio" value="2">B. 4
<br />
<input name="q1" type="radio" value="3">C. 3
<br />
<input name="q1" type="radio" value="4">D. 2
</div>
<div>
<div id="question">Question 2</div>
<input name="q2" type="radio" value="5">A. 1
<br />
<input name="q2" type="radio" value="6">B. 2
<br />
<input name="q2" type="radio" value="7">C. 3
<br />
<input name="q2" type="radio" value="8">D. 4
</div>
</form>

如果单击某些单选按钮，如何向用户显示消息。如果问题没有选择答案（没有选择单选按钮），我只想显示一条消息。例如，如果没有为问题2选择任何选项。

Answer 1

最简单的方法是使用内置的HTML5属性 required 告诉用户他已经离开了一个字段（在我们的例子中是单选按钮））。
如何使用它的一个例子：

<!DOCTYPE HTML>
<html>
    <body>
        <form id="exampleForm" action="#" method="get">
            <input name="q1" type="radio" required="required" value="4">test<br />
            <input name="q1" type="radio" required="required" value="4">test<br />
            <input name="q1" type="radio" required="required" value="4">test<br />
            <input name="sform" type="submit">
        </form>
    </body>
</html>

Answer 2

如果您无法访问JQuery并希望支持不支持required的浏览器，您可以使用以下内容：

var names = new Array("q1", "q2");
var notSelected = new Array();
var checked = "";
for(var i = 0; i < names.length; ++i) {
    var current = getElementsByName(names[i]);
    for(var j = 0; j < current.length; ++j) {
        if(current[j].checked) {
            checked = names[i];
        }
    }
    if(names[i] !== checked)
        notSelected.push(names[i]);
}
if(notSelected.length>0)
    alert("You have to select the following radiogroups: "+notSelected.join(", "));

Answer 3

如果你想通过jquery验证它，它会像 - //在脚本中添加jquery-min.js

function validate(){
  if($("input[name=q2]:checked").length > 0) {
   //Is Valid
  }
}
<form action="answers-of-brain-teaser-questions.php" method="post" onsubmit="validate()">
<div>
<div>Question 1</div>
<input name="q1" type="radio" value="1">A. 1
<br />
<input name="q1" type="radio" value="2">B. 4
<br />
<input name="q1" type="radio" value="3">C. 3
<br />
<input name="q1" type="radio" value="4">D. 2
</div>
<div>
<div id="question">Question 2</div>
<input name="q2" type="radio" value="5">A. 1
<br />
<input name="q2" type="radio" value="6">B. 2
<br />
<input name="q2" type="radio" value="7">C. 3
<br />
<input name="q2" type="radio" value="8">D. 4
</div>
</form>

如果你想在php页面中这样做 - 然后通过 -

检查

if(!isset($_POST['q2'})){
//your msg to user
}

如何使用HTML5和CSS验证表单

3 个答案: