How to Validate RadioButtonList using JavaScript in ASP.Net

In this article I will show you how to validate Raiobuttonlist using javascript in Asp.Net.

Step1:

Here I will add a RadioButtonList and Button to validate the RadioButtonList.

HTML:

 <asp:RadioButtonList ID="RadioButtonList1" runat="server">
      <asp:ListItem Text="One" Value="1"></asp:ListItem>
      <asp:ListItem Text="Two" Value="2"></asp:ListItem>
      <asp:ListItem Text="Three" Value="3"></asp:ListItem>
 </asp:RadioButtonList>
 <asp:Button ID="btnSubmit" runat="server" Text="Validate" OnClientClick="return Validate()" />

Now I will add some javascript code to validate the RadioButtonList. The javascript function will call when user press the submit button. In this code I will call the javascript function using OnClientClick.

Step2:

Javascript:

<script type="text/javascript">
            function Validate() {
                var rb = document.getElementById("RadioButtonList1");  //radiobuttonlist id
                var radio = rb.getElementsByTagName("input"); 
                var isChecked = false;
                for (var i = 0; i < radio.length; i++) {
                    if (radio[i].checked) {
                        isChecked = true;
                        break;
                    }
                }
                if (!isChecked) {
                    alert("Please select an option!");
                }
                return isChecked;
            }
</script>

Full Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo3.aspx.cs" Inherits="Demo.Demo3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:RadioButtonList ID="RadioButtonList1" runat="server">
                <asp:ListItem Text="One" Value="1"></asp:ListItem>
                <asp:ListItem Text="Two" Value="2"></asp:ListItem>
                <asp:ListItem Text="Three" Value="3"></asp:ListItem>
            </asp:RadioButtonList>
            <asp:Button ID="btnSubmit" runat="server" Text="Validate" OnClientClick="return Validate()" />
        </div>
        <script type="text/javascript">
            function Validate() {
                var rb = document.getElementById("RadioButtonList1");  //radiobuttonlist id
                var radio = rb.getElementsByTagName("input");
                var isChecked = false;
                for (var i = 0; i < radio.length; i++) {
                    if (radio[i].checked) {
                        isChecked = true;
                        break;
                    }
                }
                if (!isChecked) {
                    alert("Please select an option!");
                }
                return isChecked;
            }
        </script>
    </form>
</body>
</html>

Demo Screenshots:

Please mail me at hemanta@webcodespider.net if you want any code solution from me.

Thank You 😊

How to Bind/Fill/Populate DropDownList in Asp.Net using Jquery Ajax and Json in C# and VB.Net

WebcodeSpider

Search This Blog

jQuery Latest CDN Links