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.
SHARE

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..