Your host:
Stephen Chapman

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 skip down to the bottom of the page where you will find my original description of how to do it that was written back in 2001. If you prefer a more modern unobtrusive approach to validating radio buttons then read on.

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.

Validating Radio Buttons Pre-2005

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 - as demonstrated above - 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.

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.

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.

FaceBook Follow

Twitter Follow

Validating Radio Buttons

Validating Radio Buttons Pre-2005

Related Articles