Form radio button validation

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Crashin
Forum Contributor
Posts: 223
Joined: Mon May 06, 2002 3:42 pm
Location: Colorado

Form radio button validation

Post by Crashin »

Okay, a train leaves Denver going 70 miles per hour. Another train leaves Chicago going 65...

Just kidding...I've got a form that I want to validate upon submission. The form looks like this:

Code: Select all

...other form elements
<tr>
	<td valign="top" class="body">Phone Number<font color="ff0000">*</font>:</td>
	<td><input type="text" name="required-Phone" size="30"></td>
</tr>
<tr>
	<td valign="top" class="body">Product Interest<font color="ff0000">*</font>:</td>
	<td class="body"><input type="radio" class="no_border" value="Windows" name="required-platform">Windows
		<input type="radio" class="no_border" value="Macintosh" name="required-platform">Macintosh</td>
</tr>
<tr>
	<td valign="top" class="body">Comments:</td>
	<td><textarea name="Comments" cols="37" rows="6"></textarea></td>
</tr>
...more form elements
My validation looks like this:

Code: Select all

<script language="JavaScript">
<!--
function do_submit() &#123;
	if ( ( document.forms&#1111;1].elements&#1111;0].value == "" ) || ( document.forms&#1111;1].elements&#1111;1].value == "" ) || ( document.forms&#1111;1].elements&#1111;2].value == "" ) || ( document.forms&#1111;1].elements&#1111;3].value == "" ) || ( document.forms&#1111;1].elements&#1111;4].value == "" ) || ( document.forms&#1111;1].elements&#1111;5].value == "" ) || ( document.forms&#1111;1].elements&#1111;6].value == "" ) || ( document.forms&#1111;1].elements&#1111;7].value == "" ) ) &#123;
		alert( "All fields with an * are required." );
		return false;
	&#125;
	else
		document.forms&#1111;1].submit() ;
&#125;
//-->
</script>
The validation for the radio buttons is returning a false positive when no radio button is checked. Sooo...how can I make sure the user is selecting one of the radio button selection? :?:
User avatar
Crashin
Forum Contributor
Posts: 223
Joined: Mon May 06, 2002 3:42 pm
Location: Colorado

Post by Crashin »

Oh, and yes...I did search for this but, in the immortal words of Bono, "I still...haven't found...what I'm looking for." :)
User avatar
phpScott
DevNet Resident
Posts: 1206
Joined: Wed Oct 09, 2002 6:51 pm
Location: Keele, U.K.

alternative

Post by phpScott »

another way to do this is:
function validate()
{
f.=document.formName;
if(f.required-Phone.value == "")
{
alert("a phone number is required");
f.required-Phone.focus();
}

do this for all form items for a text areas then for the checkboxes

if(!f.requiredplatform[0].checked)
{
if(!f.requiredplatform[1].checked)
{
alert("please check something");
}
}

I had to remove the - in the required-platform as the javascript was trying to subtract platform from required.

One great advantage of doing this is that with a line like
f.required-Phone.focus();
you can set the cursor on the spot that needs to be filled out.

phpScott
User avatar
mydimension
Moderator
Posts: 531
Joined: Tue Apr 23, 2002 6:00 pm
Location: Lowell, MA USA
Contact:

Post by mydimension »

not sure what to do with the JS. but you could set one of the radio buttons as a default value and then at least something is selected and cannot return a nukk value. the only danger in this is if someone skips this part of the form, then their information getts misinturpreted.
User avatar
phpScott
DevNet Resident
Posts: 1206
Joined: Wed Oct 09, 2002 6:51 pm
Location: Keele, U.K.

the JS

Post by phpScott »

the JS goes where it usualy goes inside the <script> tags </script>

I tested the code before i submitted it so it does work at least on my debugger.

With the radio buttons much like checkboxes, testing for its value doesn't accoumplish much. The DOM places radio button groups into an array in the same order that they appear in the form so checking all buttons in a group is neccessary to determine which one is checked. Luckly in this case there was only two to check.
thanks to my handy dandy JS book I always keep handy.

phpScott
lovasco
Forum Newbie
Posts: 15
Joined: Fri May 17, 2002 4:25 am
Location: Milan - Italy

Post by lovasco »

A question to phpScott. In your reply, could you explain how the first statement (f.=document.formName) works ? Does it copy the entire form object onto the f. variable so that you can easely test it ?
Thanks,
Luca
User avatar
Crashin
Forum Contributor
Posts: 223
Joined: Mon May 06, 2002 3:42 pm
Location: Colorado

Post by Crashin »

Thanks for the replies! I've found that JS was trying to subtract also, and the form is being sent to another script, that I didn't write, for processing and so is relying on the variable names staying the same. I'm going to have to try to get to that script and make those changes, but that'll work.

Lovasco, what setting the f variable to document.formName does is it basically truncates the first two levels of the Document Object Model, so you have to use less code throughout the rest of your checking. So, instead of having to check this everytime:

Code: Select all

document.formName.formElement.value=""
you only have to check:

Code: Select all

f.formElement.value=""
Hope that clears it up! :) phpScott, was that your intent with setting that variable?
lovasco
Forum Newbie
Posts: 15
Joined: Fri May 17, 2002 4:25 am
Location: Milan - Italy

Post by lovasco »

Thank you, phpScott.
Bye
User avatar
phpScott
DevNet Resident
Posts: 1206
Joined: Wed Oct 09, 2002 6:51 pm
Location: Keele, U.K.

setting the f varialbe

Post by phpScott »

Yes Crashin that is exactly why i wanted to set that variable. :) If there is a way that I can get around typing I will try to do it. What is happing is that you are creating a object called 'f' in this case from all the elements of the form and using js dot notation to now access that objects properties.

phpScott

see even if you didn't know it you are kinda sorta doing object orientated programming. :roll:
Post Reply