CODEWITHSUNDEEP
javascript
Janna Smith
Janna Smith

Reputation: 17

javascript Validation gives alert even when all radio buttons checked

i have tried this code to set a validation on a form with 3 radio buttons inputs to give the user alert when NOT all the buttons has checked! .. but when i tried it , it gives me error alert even when all buttons checked .. any idea why ?

this is my form

   <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>

i have tried this javascript code 

<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>

Upvotes: 0

Views: 847

Answers (3)

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174977

Given A, B and C the radio buttons respectively, you want all of the situations except the one where all of the buttons are checked. (One of the buttons isn't checked)

!(A && B && C)

Or in other words:

!A || !B || !C

Translated to code, this is:

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

After a bit of digging, you can't just check if one of a group of radios is checked like that. You need to loop the nodes individually (this.v1[i].checked) and check those. If you are using a framework like jQuery, it's easier.

Upvotes: 0

jkamizato
jkamizato

Reputation: 196

Is more easy if you use jquery, so add the line

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>

And add function:

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;
}

So... you can refactory this code.

Upvotes: 0

MrCode
MrCode

Reputation: 64526

First problem is you need to pass the form in validateForm():

<form name="form1" action="mark.php" onsubmit="return validateForm(this)" method="post"> 
                                                                   ^ pass this

Next problem is you are checking this.v1 when this doesn't exist, it should be formData.v1.

Final problem is you can't check if a radio button group is checked like that, formData.v1 is a nodeList so you need to loop over it. See my example below using a helper function 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;
}

Upvotes: 2

Related Questions