1. Tech

Your suggestion is on its way!

An email with a link to:

http://javascript.about.com/library/blradio.htm

was emailed to:

Thanks for sharing About.com with others!

Radio Button Validation

The setup and validation of radio buttons appears to be the form field that gives many webmasters the most difficulty in setting up. In actual fact the setup of these fields is the most simple of all form fields to validate as radio buttons only set one value that only needs to be tested when the form is submitted.

The difficulty with radio buttons is that there are at least two and usually more fields that need to be placed on the form that need to be related together and tested as one group. Provided that you use the correct naming conventions and layout for your buttons you will not have any trouble.

Let's begin by looking at a group of radio buttons correctly defined with a validation routine attached to the form's submit button.

 




The above is an example of what we want to achieve. The next step is to look at how to achieve it.

The first thing that we need to look at doing when using radio buttons on our form is to look at how the buttons need to be coded in order for them to function properly as radio buttons. We want it so that when one button is selected then whichever button was previously selected is automatically unselected.

The solution here is to give all of the radio buttons within the group the same name but different values. Here is the code used to code just radio button themselves on the previous page that shows you how this is done.

<input type="radio" name="group1" id="r1" value="1" />
<input type="radio" name="group1" id="r2" value="2" />
<input type="radio" name="group1" id="r3" value="3" />

The creation of multiple groups of radio buttons for the one form is also straightforward. All you need to do is to provide the second group of radio buttons with a different name to that used for the first group.

The name field determines which group that a particular button belongs to. The value that will be passed for a specific group when the form is submitted will be the value of the button within the group that is selected at the time that the form is submitted.

In order for the person filling out the form to have some idea of what each button in our radio button group does we need to provide descriptions for each button. The simplest way to do this is to provide a description as text immediately following the button.

There are a couple of problems though with just using plain text.

  1. The text may be visually associated with the radio button but which text is associated with which button may not be obvious to everyone (particularly those who are listening to the page rather than reading it).
  2. The usual behaviour for text associated with radio buttons in most programs is that clicking on the associated text will select the button and unless we can actually associate the text with the button we can't get it to work that way.

To attach the text to the button so that it is obvious which text belongs to which radio button and also so that clicking on the text will select the button (at least in modern browsers) we need to make a further addition to the code for each button by surrounding the entire button and its associated text within a label.

Here is what the complete HTML for one of the buttons on our example form looks like:

<input type="radio" name="group1" id="r1" value="1" />
<label for="r1"> button one</label>

As the radio button with the id referred to in the for parameter of the label tag is actually contained within the tag itself, the for and id parameters are redundant in some browsers. There are browsers however that are not smart enough to recognise the nesting that will function correctly if these parameters are included so it is worth putting them in so as to maximize the number of browsers on which this code will function.

That completes the coding of the radio buttons themselves. The final step is to set up the radio button validation using Javascript.

Validation of groups of radio buttons may not be obvious but it is straightforward once you know how. The following function will validate for you that one of the radio buttons in a group has been selected:

All that you need to do to use the above function is to call it from within your form validation routine passing it the radio button group that is to be validated and it will return the value of the button within the group that is selected or null if no button in the group is selected.

For example the code that I used in the example form to perform the radio button validation is as follows:

var btn = valButton(form.group1);
if (btn == null) alert('No radio button selected');
else alert('Button value ' + btn + ' selected');

This code was included into the function called by an onclick event attached to the validate (or submit) button on the form. A reference to the whole form was passed as a parameter into the function which uses the "form" argument to refer to the complete form. To validate the radio button group with the name group1 we therefore pass form.group1 to the valButton function.

I said at the start that defining radio buttons and their validation is the simplest of form fields to handle. All of the radio button groups that you will ever need can be handled using the steps that I have covered here.

©2014 About.com. All rights reserved.