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; } });
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:
This can probably be refactored so comments welcomed to refine the idea.
Lazy form fillers – lazy line painters.