Validate ASP.NET RadioButtonList using jQuery
ASP.NET RadioButtonList control is used to create a group of radio buttons, where all are rendered as an individual <input type=radio></input>. So in this post, I will show you how to validate ASP.NET RadioButtonList using jQuery.
Let's declare a RadioButtonList.
<asp:RadioButtonList ID="rdlList" runat="server">
<asp:ListItem Text="jQuery" Value="jQuery"></asp:ListItem>
<asp:ListItem Text="JavaScript" Value="JavaScript"></asp:ListItem>
<asp:ListItem Text="Prototype" Value="Prototype"></asp:ListItem>
<asp:ListItem Text="Dojo" Value="Dojo"></asp:ListItem>
<asp:ListItem Text="Mootools" Value="Mootools"></asp:ListItem>
</asp:RadioButtonList>
As you can see there are 5 radio buttons and the validation would be to select at least one option. For demo, I will validate the radiobuttonlist on click of button. We can use length property to find out, if any radio button is selected or not.
$("#rdlList :radio:checked").length; will return 1 if anything is selected, otherwise 0.
$(document).ready(function() {
$('#btnSubmit').on('click', function(e) {
var cnt = $("#rdlList :radio:checked").length;
if (cnt == 0)
{
alert('Select any option.');
e.preventDefault();
}
else
alert('Well Done!!!!');
});
});?
Note: This code will work only with jQuery 1.7 or higher version as I have used .on() method to bind the click event and .on was introduced in jQuery 1.7. So if you are using below version then you can either .live() or .bind() method.
Suggested Post,
Feel free to contact me for any help related to jQuery, I will gladly help you.
