Validation of radio button group using jQuery validation plugin
With newer releases of jquery (1.3+ I think), all you have to do is set one of the members of the radio set to be required and jquery will take care of the rest:
<input type="radio" name="myoptions" value="blue" class="required"> Blue<br />
<input type="radio" name="myoptions" value="red"> Red<br />
<input type="radio" name="myoptions" value="green"> Green
The above would require at least 1 of the 3 radio options w/ the name of "my options" to be selected before proceeding.
The label suggestion by Mahes, btw, works wonderfully!
use the following rule for validating radio button group selection
myRadioGroupName : {required :true}
myRadioGroupName is the value you have given to name attribute
You can also use this:
<fieldset>
<input type="radio" name="myoptions[]" value="blue"> Blue<br />
<input type="radio" name="myoptions[]" value="red"> Red<br />
<input type="radio" name="myoptions[]" value="green"> Green<br />
<label for="myoptions[]" class="error" style="display:none;">Please choose one.</label>
</fieldset>
and simply add this rule
rules: {
'myoptions[]':{ required:true }
}
Mention how to add rules.
As per Brandon's answer. But if you're using ASP.NET MVC which uses unobtrusive validation, you can add the data-val attribute to the first one. I also like to have labels for each radio button for usability.
<span class="field-validation-valid" data-valmsg-for="color" data-valmsg-replace="true"></span>
<p><input type="radio" name="color" id="red" value="R" data-val="true" data-val-required="Please choose one of these options:"/> <label for="red">Red</label></p>
<p><input type="radio" name="color" id="green" value="G"/> <label for="green">Green</label></p>
<p><input type="radio" name="color" id="blue" value="B"/> <label for="blue">Blue</label></p>
Another way to validate is like this.
var $radio = $('input:radio[name="nameRadioButton"]');
$radio.addClass("validate[required]");
I hope my example will help you