View Full Version : validate that radio buttons are selected

Oct 17th, 2009, 05:55 AM
Hey everyone, I cant seem to get this submitForm Validator to work. It needs to see if one of the two radio buttons are selected. I just cant seem to get it to work, anyone know whats wrong? Thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<script type="text/javascript">
/* <![CDATA[ */
function setFormFocus() {

function validateIt() {
if(document.forms[0].visitor_name.value == ""
|| document.forms[0].phone.value ==""
|| document.forms[0].email.value ==""
|| document.forms[0].area.value ==""
|| document.forms[0].feet.value ==""
|| document.forms[0].bedrooms.value ==""
|| document.forms[0].price.value ==""){

window.alert("You must enter enter information in all text boxes");
return false;
function submitForm(){
var radioSelected = false;
for (var i=0; i<5; ++i) {
if (document.forms[0].contactHow[i].checked == true) {
radioSelected = true;
if (radioSelected == false){
return false;
return true;
/* ]]> */

<body onload="setFormFocus();">
<h1>Real Estate Inquiry</h1>
<form action="FormProcessor.html" method="get" onsubmit="return validateIt(); onsubmit="return submitForm();"
<p>Name<br />
<input type="text" name="visitor_name" size="50" value="Enter your name" onclick="if (this.value == 'Enter your name') this.value = '';" /></p>
<p>E-mail address<br />
<input type="text" name="email" size="50" value="Enter your e-mail address" onclick="if (this.value == 'Enter your e-mail address') this.value = '';" /></p>
<p>Phone<br />
<input type="text" name="phone" size="50" value="Enter your phone number" onclick="if (this.value == 'Enter your phone number') this.value = '';" /></p>
<p>Area of town<br />
<input type="text" name="area" size="50" value="What are of town are you interested in?" onclick="if (this.value == 'What are of town are you interested in?') this.value = '';" /></p>

<p>Property <select name="property_type">
<option value="unselected">Select a Property Type</option>
<option value="condo">Condos</option>
<option value="single">Single Family Homes</option>
<option value="multi">Multifamily Homes</option>
<option value="mobile">Mobile Homes</option>
<option value="land">Land</option>
Sq. feet <input type="text" name="feet" size="5" value="???" onclick="if (this.value == '???') this.value = '';" /> </p>
<p>Bedrooms <input type="text" name="bedrooms" size="5" value="???" onclick="if (this.value == '???') this.value = '';" /> </p>
Maximum price <input type="text" name="price" size="12" value="???" onclick="if (this.value == '???') this.value = '';" /> </p>
<p>How should we contact you? <input type="radio" name="contactHow"value="call_me" /> Call me
<input type="radio" name="contactHow" value="e-mail_me" />
E-mail me</p>
<p><input type="submit" /></p>


Old Pedant
Oct 17th, 2009, 07:08 AM
Well, first of all, you can't have *TWO* onsubmit event handlers for the <form>!!!

onsubmit="return validateIt(); onsubmit="return submitForm();"

Make up your mind, which one will you use???

And then, in the code where you are looking for a checked radio button, you do:

for (var i=0; i<5; ++i)
if (document.forms[0].contactHow[i].checked == true)

But since you only have 2 radio buttons, as soon as you try to do

if (document.forms[0].contactHow[2].checked == true) {

you get an error--which you are of course ignoring--and that means that the function just returns junk to the onsubmit and so the submit takes place.

Old Pedant
Oct 17th, 2009, 07:13 AM
How about if we K.I.S.S.??

function validateIt(form)
if ( form.visitor_name.value == ""
|| form.phone.value ==""
|| form.email.value ==""
|| form.area.value ==""
|| form.feet.value ==""
|| form.bedrooms.value ==""
|| form.price.value =="")
alert("You must enter enter information in all text boxes");
return false;
if ( ! form.contactHow[0].checked && ! form.contactHow[1].checked )
alert("You must check a radio button to tell us how to contact you");
return false;
return true; // always do this properly

and then:

<form action="FormProcessor.html" method="get" onsubmit="return validateIt(this);">

Of course, your validation is pretty sloppy. A person could just enter a single space into all those text fields and you would happily say the form validated just fine.