我已尝试使用此代码在带有3个单选按钮输入的表单上设置验证,以便在未检查所有按钮时向用户发出警报! ..但是当我尝试它时,即使检查了所有按钮,它也会给我错误警告..任何想法为什么?
这是我的表格
<form name="form1" action="mark.php" onsubmit="return validateForm()" method="post">
<tr>
<th> Your attendance<font size="4" > </font></th>
<td> <input type="radio" name ="v1" value = "4" onclick="updateTotal();"/></td>
<td> <input type="radio" name ="v1" value = "3" onclick="updateTotal();" /></td>
<td> <input type="radio" name ="v1" value = "2" onclick="updateTotal();" /></td>
<td> <input type="radio" name ="v1" value = "1" onclick="updateTotal();" /></td>
</tr>
<tr>
<th > Your grades <font size="4" > </font></th>
<td> <input type="radio" name ="v2" value = "4" onclick="updateTotal();" /></td>
<td> <input type="radio" name ="v2" value = "3" onclick="updateTotal();" /></td>
<td> <input type="radio" name ="v2" value = "2" onclick="updateTotal();" /></td>
<td> <input type="radio" name ="v2" value = "1" onclick="updateTotal();" /></td>
</tr>
<tr>
<th >Your self-control <font size="4" > </font></th>
<td> <input type="radio" name ="v3" value = "4" onclick="updateTotal();" /></td>
<td> <input type="radio" name ="v3" value = "3" onclick="updateTotal();" /></td>
<td> <input type="radio" name ="v3" value = "2" onclick="updateTotal();" /></td>
<td> <input type="radio" name ="v3" value = "1" onclick="updateTotal();" /></td>
</tr>
我试过这个javascript代码
<script type="text/javascript">
function validateForm(formData){
if(!this.v1.checked && !this.v2.checked && !this.v3.checked){
alert('answer all questions please');
return false;
}
return true;
}
</script>
答案 0 :(得分:2)
第一个问题是你需要在validateForm()中传递表单:
<form name="form1" action="mark.php" onsubmit="return validateForm(this)" method="post">
^ pass this
下一个问题是,当this.v1
不存在时,您正在检查this
,它应该是formData.v1
。
最后一个问题是你无法检查是否选中了单选按钮组,formData.v1
是nodeList
所以你需要循环它。请使用辅助函数groupChecked()
查看下面的示例。
function groupChecked(group)
{
for(var i=0; i<group.length; i++)
{
if(group[i].checked)
{
return true;
}
}
return false;
}
function validateForm(formData){
if(!(groupChecked(formData.v1) && groupChecked(formData.v2) && groupChecked(formData.v3))){
alert('answer all questions please');
return false;
}
return true;
}
答案 1 :(得分:0)
分别给出A,B和C单选按钮,您希望所有情况除之外的所有按钮都被选中。 (未选中其中一个按钮)
!(A && B && C)
或换句话说:
!A || !B || !C
翻译成代码,这是:
if (!(this.v1.checked && this.v2.checked && this.v3.checked)) {
经过一些挖掘后,你不能只检查一组无线电中的一个是否被检查过。您需要单独循环节点(this.v1 [i] .checked)并检查它们。如果你使用像jQuery这样的框架,那就更容易了。
答案 2 :(得分:0)
如果使用jquery,则更容易,所以添加行
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
添加功能:
function validate(){
$("input[name=v1]").each(function(){
if($(this).is(":checked")){
return false;
}
});
$("input[name=v2]").each(function(){
if($(this).is(":checked")){
return false;
}
});
$("input[name=v3]").each(function(){
if($(this).is(":checked")){
return false;
}
});
return true;
}
所以......你可以重构这段代码。