Advertisement
Web Developer Resources
You Are Here: ESQSoft.com ¬ javascript ¬ Example of how to validate radio buttons with Javascript
E.S.Q. Software Logo

How to validate radio buttons with JavaScript

A friend recently asked for a code sample showing JavaScript being used to client-side validate the radio inputs of an HTML form. This example took about 15 minutes to build and tweak to her specifications. The techniques used here are very rudimentary, but effective nonetheless. If you have suggestions for other approaches, or additional questions related to this example, be sure to email me. Best wishes!

For more information, you'll want to keep a good javascript reference manual handy.

Choose "3" 1 2 3 4

Choose "2" 1 2 3 4

<script type="text/javascript"> function validateRadio( obj,correct ){ var result = 0; for(var i=0; i<obj.length; i++){ if(obj[i].checked==true && obj[i].value==correct){ result = 1; } } if(!result && obj.value == correct){ result = 1; } return result } function validateSubmit( obj ){ var err = ''; if( !validateRadio( obj.a,3 ) ){ err+='\nFirst radio is wrong'; } if( !validateRadio( obj.b,2 ) ){ err+='\nSecond radio is wrong'; } if( err.length ){ alert('Problem:'+err); return false; } else{ alert('Good Job -- Submitting'); return true; } } </script> <form onsubmit="return validateSubmit(this);" action="#"> Choose "3" <input type="radio" name="a" value="1" onchange="if(!validateRadio(this,3)) alert('Incorrect');"> 1 <input type="radio" name="a" value="2" onchange="if(!validateRadio(this,3)) alert('Incorrect');"> 2 <input type="radio" name="a" value="3" onchange="if(!validateRadio(this,3)) alert('Incorrect');"> 3 <input type="radio" name="a" value="4" onchange="if(!validateRadio(this,3)) alert('Incorrect');"> 4 <p>Choose "2" <input type="radio" name="b" value="1"> 1 <input type="radio" name="b" value="2"> 2 <input type="radio" name="b" value="3"> 3 <input type="radio" name="b" value="4"> 4 </p><p><input type="submit" value="Submit"> </p></form>

Keywords: JavaScript client-side validation radio inputs radio buttons HTML form

Advertisement
Advertisement
Statcounter