Radio button validation

[derek34]

Hi
I need to determine whether a radio button has been selected in an HTML form.
I've tried searching for scripts online that use it, but they all seem to fail.
this is what I've got so far:
<script language="javascript" type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false;}
else {return true}
}
}
function validate_radio(radio,alerttext){

}
function validate_form(thisform)
{
with (thisform)
{

if (validate_required(screen,"Screenname must be filled out!")==false)
{screen.focus();return false;}

if (validate_required(first,"You must have a first name.")==false)
{first.focus();return false;}

if (validate_required(last,"you must have a last name.")==false)
{last.focus();return false;}

if (validate_required(age,"How old are you?")==false)
{age.focus();return false;}

if (validate_required(occupation,"Please provide a school or occupation")==false)
{occupation.focus();return false;}

if (validate_required(email,"Email must be filled out!")==false)
{email.focus();return false;}

if (validate_required(phone,"Please Provide a phone number.")==false)
{phone.focus();return false;}

if (validate_radio(rent,"Are you renting a computer?")==false)
{rent.focus();return false;}

if (validate_radio(pizza,"Please Choose a type of pizza")==false)
{pizza.focus();return false;}
}
}
</script>
The validate_radio function is the one I'm having trouble with.
Any help is appreciated
Thanks
- Derek

[hrcerqueira]

Use the "checked" property.

[derek34]

I should also say that if a radio button isn't selected then I need to display an alert box.

[hrcerqueira]

if (!radio.checked)
alert('something');

[derek34]

ok so just when I thought I had figured it out, it gets an error. when I use this code:<script language="javascript" type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false;}
else {return true}
}
}
function validate_radio(form,radio,alerttext){

{

var radio_choice = false;


for (counter = 0; counter < form.radio.length; counter++)
{

if (form.radio[counter].checked)
radio_choice = true;
}

if (!radio_choice)
{

alert(alerttext)
return (false);
}
return (true);
}
}
function validate_form(thisform)
{
with (thisform)
{

if (validate_required(screen,"Screenname must be filled out!")==false)
{screen.focus();return false;}

if (validate_required(first,"You must have a first name.")==false)
{first.focus();return false;}

if (validate_required(last,"you must have a last name.")==false)
{last.focus();return false;}

if (validate_required(age,"How old are you?")==false)
{age.focus();return false;}

if (validate_required(occupation,"Please provide a school or occupation")==false)
{occupation.focus();return false;}

if (validate_required(email,"Email must be filled out!")==false)
{email.focus();return false;}

if (validate_required(phone,"Please Provide a phone number.")==false)
{phone.focus();return false;}

if (validate_radio(register.rent,"Are you renting a computer?")==false)
{rent.focus();return false;}

if (validate_radio(register.pizza,"Please Choose a type of pizza")==false)
{pizza.focus();return false;}
}
}
</script>
It validates it and moves on even when there is not radio button selected.
thanks
- Derek

[hrcerqueira]

Your code is a bit weird...

First of all, don't use "with", it's evil, believe me.

Now, it's better for you to rebuild it. Here's a very good way:

On each of your textfields and radio buttons and whatever, besides the name attribute, apply an id to, so you get for example:


<input type="text" name="first" id="first" />


Now, on your validation function, to get the first_name field value, just call:

var first = document.getElementById('first');
if (first.value.length == 0) {
alert ('You must have a first name');
first.focus();
}


The same applies to radio buttons:


<input type="radio" name="rent" id="rent" />

var rent = document.getElementById('rent');
if (!rent.checked) {
alert ('Are you renting a computer?');
rent.focus();
}


And you don't need to check for null values on the textfields, the worst you can get is an empty string, and never a null.

[derek34]

thanks very much hrcerqueira. You simplified things a lot. Now I know how to validate forms...
Great tips.

[derek34]

Hi
there are still a couple of problems with the code...
once all the alert boxes are done being shown, the page submits the form...
Also I need to validate this:What city are you from? <select name="city" id="city">
<option value="none" selected="selected">Please Choose...</option>
<option value="Maple Ridge">Maple Ridge</option>
<option value="Pitt Meadows">Pitt Meadows</option>
<option value="Coquitlam">Coquitlam</option>
<option value="Port Coquitlam">Port Coquitlam</option>
<option value="Langley">Langley</option>
<option value="Surrey">Surrey</option>
<option value="Abbotsford">Abbotsford</option>
<option value="Chilliwack">Chilliwack</option>
<option value="Mission">Mission</option>
<option value="Burnaby">Burnaby</option>
<option value="Vancouver">Vancouver</option>
<option value="New Westminster">New Westminster</option>
</select>

This is the validation code I tried to use:if (city.value == "Please Choose...") {
alert ('What city are you from?');
city.focus();
}
Also, in the radio button for this:Do you need to rent a computer?<input type="radio" name="rent" id="rent" value="yes" />Yes
<input type="radio" name="rent" id="rent" value="no" />No
The radio button displays an alert message properly when there is nothing selected but it also displays when "no" is selected.
Any help is always greatly appreciated....
Thanks
- Derek

[derek34]

oh yeah if you want to see a live version of the form go to: www.ctoanlan.com/testform.htm

[hrcerqueira]

<option value="none" selected="selected">Please Choose...</option>

if (city.value == "Please Choose...") {
alert ('What city are you from?');
city.focus();
}

You have to check for 'none', and not for "Please Choose...", like this:

if (city.value == "none") {
alert ('What city are you from?');
city.focus();
}



Ididn't realized that you have two radio buttons, one fir yes and the other for no, in that case you have to specify different id's, and check for both:

:Do you need to rent a computer?<input type="radio" name="rent" id="rent_yes" value="yes" />Yes
<input type="radio" name="rent" id="rent_no" value="no" />No

And to check for it you would do something like this:


var rent_yes = document.getElementById('rent_yes');
var rent_no = document.getElementById('rent_no');

if (!(rent_yes.checked || rent_no.checked )) {
//if neither one of the radio buttons is checked
//display the alert
}


Hope it helps, Cheers

[derek34]

rigghtt ok that makes sense
I don't know how I thought it could check for the same id.
And I just feel stupid about the "Please choose..." one.
Everything's working now.
Thanks again.

[hrcerqueira]

No problem ;-)