In my previous tutorials, I’d explained how to validate checkboxlist using jquery, validate radiobuttonlist using javascript, validate dropdownlist using javascript and other more cracking tutorials on CheckBoxList, 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 another is from server-side validation. Now here in this tutorial, I’ll explain how to validate checkboxlist 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 check box list.
Function To Validate Asp.net CheckBoxList Control – [JavaScript]
Here is the JavaScript function that we need to use to validate checkbox list:
function ValidateCheckBoxList() {
var isChecked = false;
var cblImageFormat = document.getElementById(“<%=cblImageFormat.ClientID%>“);
var chkButtons = cblImageFormat.getElementsByTagName(“input”);
for (var i = 0; i < chkButtons.length; i++) {
if (chkButtons[i].checked) {
isChecked = true;
break;
}
}
if (!isChecked) {
alert(“Please select image format from the list.”);
}
return isChecked;
}
</script>
HTML Markup For CheckBoxList Validation – [.aspx]
Following is the complete HTML Markup code for .aspx page:
<head id=”Head1″ runat=”server”>
<title>CheckBoxList Validation using JavaScript</title>
<script type=”text/javascript”>
function ValidateCheckBoxList() {
var isChecked = false;
var cblImageFormat = document.getElementById(“<%=cblImageFormat.ClientID%>“);
var chkButtons = cblImageFormat.getElementsByTagName(“input”);
for (var i = 0; i < chkButtons.length; i++) {
if (chkButtons[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:CheckBoxList ID=”cblImageFormat” runat=”server” RepeatDirection=”Horizontal”>
<asp:ListItem Value=”1″ Text=”.jpg” />
<asp:ListItem Value=”2″ Text=”.png” />
<asp:ListItem Value=”3″ Text=”.gif” />
</asp:CheckBoxList>
</td>
</tr>
<tr>
<td colspan=”3″> </td>
</tr>
<tr>
<td colspan=”2″> </td>
<td>
<asp:Button ID=”btnSave” OnClientClick=”return ValidateCheckBoxList();”
runat=”server” Text=”Save” />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
In above sample code, you can examine that I have used OnClientClick=”return ValidateCheckBoxList();” which means we are calling a ValidateCheckBoxList() function on client-click event of btnSave and evaluate that the image type is selected or not from the checkboxlist to validate checkbox or checkboxlist in asp.net.
Example Result
