Question

what is wrong with my code? I need to validate a radio button.
it works fine until the last item. after I select Yes or No, I get to submit the form with the last option empty. I cant seem to validate the last option.
also I didnt write this script. I honestly dont understand how it works :/

this is what I have

function valida () {


if (document.example.name.value=="") {
alert ('NAME field is empty!');
return false;
}


else if (document.example.email.value=="") {
alert ('EMAIL field is empty!');
return false;
}



    var radios = document.getElementsByName("yesorno");
    var formValid = false;

    var i = 0;
    while (!formValid && i < radios.length) {
        if (radios[i].checked) formValid = true;
        i++;        
    }

    if (!formValid) alert("Select Yes or No!");
    return formValid;




    var radios = document.getElementsByName("color");
    var formValid = false;

    var i = 0;
    while (!formValid && i < radios.length) {
        if (radios[i].checked) formValid = true;
        i++;        
    }

    if (!formValid) alert("Pick a colour!");
    return formValid;



else {
return true;
}
}










<form name="example" id="example" action="submit-form.php" method="post" onsubmit="return valida();">    
<fieldset>


<label for="name">Name:</label>
<input type="text" name="name" id="name"/>




<label for="email">Email:</label>
<input type="text" name="email" id="email"/>    



<label>Yes or No?</label>    

YES
<input name="yesorno" type="radio" class="radio" value="yes" />

NO
<input name="yesorno" type="radio" class="radio" value="yes" />



<label>Red, green or yellow?</label>    

red
<input name="color" type="radio" class="radio" value="red" />

green
<input name="color" type="radio" class="radio" value="green" />

yellow
<input name="color" type="radio" class="radio" value="yellow" />



<input type="submit" value="submit" />


</fieldset>
</form>

edit:
I found a solution here on stackoverflow. this works for me now:

function valida () {


if (document.example.name.value=="") {
alert ('NAME field is empty!');
return false;
}


else if (document.example.email.value=="") {
alert ('EMAIL field is empty!');
return false;
}



else if ($('input[name=yesorno]:checked').length == 0) {
alert ('Select Yes or No!');
return false;
}


else if ($('input[name=color]:checked').length == 0) {
alert ('Pick a colour!');
return false;
}



else {
return true;
}
}

Answer 1

You’re returning the “Yes/No” validation before the rest of the code can be reached. If the return is enclosed in the if statement, the rest of the code will be reached. Try this:

<script language=javascript>
function valida ()
{


if (document.example.name.value=="")
{
alert ('NAME field is empty!');
return false;
}


else if (document.example.email.value=="")
{
    alert ('EMAIL field is empty!');
    return false;
 }



var radios = document.getElementsByName("yesorno");
var formValid = false;

var i = 0;
while (!formValid && i < radios.length)
{
    if (radios[i].checked) formValid = true;
    i++;        
}

if (!formValid)
{
    alert("Select Yes or No!");
    return formValid;
}




radios = document.getElementsByName("color");
formValid = false;

i = 0;

while (!formValid && i < radios.length)
{
    if (radios[i].checked)
    {
        formValid = true;
    }
    i++;        
}

if (!formValid)
{
alert("Pick a colour!");
return formValid;
}


else
{
return true;
}

}

Name:

Email:

Yes or No?

YES

NO

Red, green or yellow?

red

green

yellow