Validating Radio Buttons

What follows is my original description of how to validate radio buttons written back in 2001. At that time this was the only way to do the validation. Since then developments in JavaScript have introduced ways to perform radio button validation in far less obtrusive ways however the less obtrusive code is slightly more complicated and has a significant overhead if you do not use that approach for all of your field validations (as you ought to). Of course many people still use this means of validating radio buttons simply because the code is easier for them to understand.

So you want to put radio buttons on a form on your page but don't know how to go about validating that one has been selected or determining which one has been selected.

Well here we have a form containing three radio buttons to show you how to do it.


2nd
3rd
 

The code to make this form follows. Note that the highlighted parts of this code will be referenced within the validation javascript, you can call them what you like but you must name fields consistently (ie. all fields shown highlighted here and in the javascript with the same name must still all have the same name if you rename them.

<form name="myform">
<input type="radio" value="1st value" name="myradiobutton" />1st<br />
<input type="radio" value="2nd value" name="myradiobutton" />2nd<br />
<input type="radio" value="3rd value" name="myradiobutton" />3rd<br />&nbsp;<br />
<input type="submit" name="submitit" onclick="valbutton(myform);return false;" value="Validate" />
<input type="reset" name="reset" value="Clear" />
</form>

The javascript that this form uses to validate that a radio button has been selected follows. An alert advising that you must select a button will display if no button is selected. When a button is selected, the value of the myOption field will contain the number of the button selected. Note that the buttons are numbered starting from zero. In this instance for the purpose of illustration, we simply display an alert advising which button was selected (shown in italics).

function valbutton(thisform) {
// place any other field validations that you require here
// validate myradiobuttons
myOption = -1;
for (i=thisform.myradiobutton.length-1; i > -1; i--) {
if (thisform.myradiobutton[i].checked) {
myOption = i; i = -1;
}
}
if (myOption == -1) {
alert("You must select a radio button");
return false;
}
alert("You selected button number " + myOption
+ " which has a value of "
+ thisform.myradiobutton[myOption].value);

// place any other field validations that you require here
thisform.submit(); // this line submits the form after validation
}

It should be a relatively simple matter for you to take the above form field definitions and javascript and incorporate it into your form. Note that the javascript does not require amending to handle as many radio buttons within the same group as you require, you simply assign them all the same name within the form.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate