In my previous tutorials, I’d explained how to validate radiobuttonlist using jquery, validate checkboxlist using javascript, validate dropdownlist using javascript and other more amazing tutorials on RadioButtonList, Asp.net here.
Validation is one of the greatest security features to prevent your website against spam. We can do validation in two ways. One is from client-side and another is from server-side validation. Now here in this tutorial, I’ll explain how to validate radiobuttonlist from client-side using JavaScript in asp.net.
Now we are going to implement the code, follow the step by step guidelines to validate the drop down list.
Function To Validate Asp.net RadioButtonList Control – [JavaScript]
Following is the JavaScript that we need to use to validate radio button list:
<script type="text/javascript">
function ValidateRadioButtonList() {
var isChecked = false;
var rblImageFormat = document.getElementById("<%=rblImageFormat.ClientID%>");
var radioButtons = rblImageFormat.getElementsByTagName("input");
for (var i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) {
isChecked = true;
break;
}
}
if (!isChecked) {
alert("Please select image format from the list.");
}
return isChecked;
}
</script>
HTML Markup For RadioButtonList Validation – [.aspx]
Following is the complete HTML Markup code for .aspx page:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>RadioButtonList Validation using JavaScript</title>
<script type="text/javascript">
function ValidateRadioButtonList() {
var isChecked = false;
var rblImageFormat = document.getElementById("<%=rblImageFormat.ClientID%>");
var radioButtons = rblImageFormat.getElementsByTagName("input");
for (var i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) {
isChecked = true;
break;
}
}
if (!isChecked) {
alert("Please select image format from the list.");
}
return isChecked;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>Select Image Format</td>
<td>:</td>
<td>
<asp:RadioButtonList ID="rblImageFormat" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Value="1" Text=".jpg" />
<asp:ListItem Value="2" Text=".png" />
<asp:ListItem Value="3" Text=".gif" />
</asp:RadioButtonList>
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td>
<asp:Button ID="btnSave" OnClientClick="return ValidateRadioButtonList();"
runat="server" Text="Save" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
In above sample code, you can examine that I have used OnClientClick=”return ValidateRadioButtonList();” which means we are calling a ValidateRadioButtonList() function on client-click event of btnSave and evaluate image type is selected or not from the radiobuttonlist to validate radio button or radiobuttonlist in asp.net.
Example Result
Download Example
Git Repo
That’s it, this is one of the simplest way to validate radio button list from client-side using javascript or jquery in asp.net.
Let me know if you’ve any questions or doubts about this tutorial by writing down your queries in comment below. I would be happy to provide you my feedback as soon as possible.
Happy Coding!
