Validating Radio Buttons

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. The best way to do this has changed significantly since JavaScript first became available and so many of the other sites that show you how to perform this task will show you the way that was appropriate back before 2005. If you want to use that method of validating radio buttons then see my original radio button validation was written back in 2001. If you prefer the most modern unobtrusive approach to validating radio buttons then see Validating Radio Buttons Without a Loopfor a more modern function and read on for how to attach it to your form.

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

 



The code for the radio button part of the 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 with the same value must still all have the same value if you change them). The same code will handle any number of radio buttons in a group simply by your having assigned them all the same name. Of course you need at least two since a single radio button by itself makes no sense.

<input type="radio" id="s1" name="size" value="s"/>
<label for="s1">Small</label>
<input type="radio" id="s2" name="size" value="m"/>
<label for="s2">Medium</label>
<input type="radio" id="s3" name="size" value="l"/>
<label for="s3">Large</label>

The part of the JavaScript attached to the above form that actually handles the validation of the a group of radio buttons is below. The if statement goes inside your form validation function where you want it to perform the radio button validation. The value returned will be either null if no button is selected or where a button is selected it will be the value associated with the selected button (for if you need to use that in any subsequent JavaScript processing). The message() function will be whatever code you use to display error messages for the form (since alert() is now no longer acceptable since it allows your visitors to turn off subsequent alerts or even JavaScript on the web page now that it is primarily used only for debugging).

Also note that the code is set up to start from the id of the first button rather than the name of the group. This is for consistency with all the other JavaScript form validation which should always be done by referencing the fields by their id rather than their name (which is there for use once the form is submitted to the server and may not even be a name that is valid in JavaScript).

valButton = function(btn) {
for (var i=btn.length-1; i > -1; i--) {
    if (btn[i].checked) return btn[i].value;
  }
  return null;
}
 
if (null === valButton(document.getElementsByName( document.getElementById('s1').name)) {
  message('You must select a radio button');
}

The actual code attached to this web page to perform the validation uses an event listener for the 'submit' event on the form to attach validation for the form into the page and uses preventDefault to prevent the form being submitted (with the attachEvent and returnValue equivalents to allow it to work in IE8 and earlier). The same code shown above will also work if called from an onsubmit event handler but then it would be more obtrusive as it would prevent other processing being able to be added to the submit event without rewriting the existing code.

If you want to make things easier for yourself you can copy my complete form field validation script which includes both radio button validation and regular expression validation for other fields attached to the web page unobtrusively. As with all JavaScript the script tag of course needs to go immediately before the </body> tag.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate