In online surveys you may want users to have to answer a radio button style question. You can set a default value with checked as follows:

<input id="female" name="gender" type="radio" value="F" checked>
<label for="female">Female</label>
<input id="male" name="gender" type="radio" value="M">
<label for="male">Male</label>

However, you have to make a decision what the default with be and for lazy form fillers you might end up with incorrect data.

In HTML5 radio buttons we can use the required attribute ie

<input id="female" name="gender" type="radio" value="F" required>
<label for="female">Female</label>
<input id="male" name="gender" type="radio" value="M">
<label for="male">Male</label>

This is great but comes with the inevitable HTML5 caveats that it just can’t be relied on across all browsers.

So for true radio button validation we need a Javascript solution …. and as ever I’ve used jQuery here to help.

The HTML/CSS Set Up

Firstly lets add some HTML to provide error messages.

<input type="radio" name="gender" value="F" id="female">
<label for="female">Female</label>
<input id="male" name="gender" type="radio" value="M" />
<label for="male">Male</label>
<span class="error"> *Required</span>

The <span> needs to be hidden initially so in the CSS we’ll add:

.error{
display:none;
}

The Javascript

The jQuery is called when the form is submitted. For those in a hurry here is the code:

$('form').submit(function() {
	 $('.error').hide();
	  var radioList = $('input:radio');
	  var radioNameList = new Array();
	  var radioUniqueNameList = new Array();
	  var notCompleted = 0;
	  for(var i=0; i< radioList.length; i++){
		  radioNameList.push(radioList[i].name);
	  }
	  radioUniqueNameList = jQuery.unique( radioNameList );
	  for(var i=0; i< radioUniqueNameList.length; i++){
		  if(typeof($('input:radio[name='+radioUniqueNameList[i]+']:checked').val()) === "undefined"){
			  $('input:radio[name='+radioUniqueNameList[i]+']').parent().find('.error').show();
			  notCompleted++;
		  }
		}
	 if(notCompleted > 0){
		 return false;
	 }else{
		 return true;
	 }
});

View CodePen

How it works?

The Javascript firstly switches off all the .error messages just in case one is already live.

$('.error').hide();

Next a list of the radio buttons is created:

var radioList = $('input:radio');

This will give me a list of all the radio buttons. What we really want are the radio groups. So in order to get this two arrays are created to store all the names and then refine that list of the unique names.

Looping around the radioNameList array we populate radioNameList with all the names. Then jQuery.unique allows use to refine this to an unique list.

Once we have this list of unique radio group names we can loop these checking to see there is a checked value in each group. If a radio group does not have a checked value undefined is returned. When this happens by navigating the DOM we can switch on the related .error message.

The notCompleted variable is used to keep count of things. So if the number of non-completions is greater than zero the form isn’t submitted.

This may seem over engineered but it is designed so that multiple radio button groups can be validated. Here is a fuller example:

View Demo

This can probably be refactored so comments welcomed to refine the idea.

Lazy form fillers – lazy line painters.

Leave a Comment