0

我已经尝试使用此代码在具有 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>
4

3 回答 3

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;
}
于 2012-11-29T14:54:06.327 回答
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 这样的框架，那就更容易了。

于 2012-11-29T14:41:40.057 回答
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;
}

所以......你可以重构这段代码。

于 2012-11-29T14:56:09.053 回答