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あります。thisformData.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

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 に答える
0

それぞれ A、B、C のラジオ ボタンを指定すると、すべてのボタンがオンになっている場合を除くすべての状況が必要になります。(ボタンの 1 つがチェックされていません)

!(A && B && C)

または言い換えれば：

!A || !B || !C

コードに変換すると、これは次のとおりです。

if (!(this.v1.checked && this.v2.checked && this.v3.checked)) {

少し掘り下げた後、ラジオのグループの1つがそのようにチェックされているかどうかを確認することはできません。ノードを個別にループして (this.v1[i].checked)、それらをチェックする必要があります。jQuery のようなフレームワークを使用している場合は、簡単です。

于 2012-11-29T14:41:40.057 に答える