AspnetO

We code, that works!

  • Home
  • Asp.net
  • MVC
  • Interview Questions
You are here: Home / Asp.net / CheckBoxList Validation: Validate CheckBoxList using JavaScript in Asp.net

CheckBoxList Validation: Validate CheckBoxList using JavaScript in Asp.net

By: Mayank Modi | Falls In: Asp.net | Last Updated: Oct 10, 2020

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:

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

HTML Markup For CheckBoxList 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>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″>&nbsp;&nbsp;</td>
</tr>
<tr>
<td colspan=”2″>&nbsp;&nbsp;</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

CheckBoxList Validation using JavaScript in Asp.net

Download Example

Icon

CheckBoxList Validation From Client-side Sample Code

1 file(s) 21.67 KB
Download This Example

Git Repo

git clone https://github.com/immayankmodi/check-box-list-validation-client-side.git

Signup Today And Get Latest Tutorials For Free!

Subscribe to us and get free latest tutorials notifications whenever we publish a new contents.

<

About Mayank Modi

Mayank is a web developer and designer who specializes in back-end as well as front-end development. He's a Founder & Chief Editor of AspnetO. If you'd like to connect with him, follow him on Twitter as @immayankmodi.

Leave a Reply Cancel reply

Search Your Topic



Social Connections

  • 1,438 Fans
  • 3,098 Followers
  • 51 Followers
  • 1,559 Subscribers

Get Latest Tutorials For Free



Top Posts

  • CSS3 Transition: fadeIn and fadeOut like Effects to Hide Show Elements
  • Top 10 OOPS Concepts In C# .NET With Examples
  • Show Confirm Message Box from Code-behind in Asp.net
  • Call JavaScript Function from Code-behind in Asp.net C# Vb
  • Pass Multiple Parameters in Asp.net QueryString Example

Contribute to AspnetO

If you want to contribute your unique blog articles or tutorials (Free / Paid) to AspnetO in any languages, you're most welcome. Just send me your previous articles, and topics on which you are interested to post an tutorial. Contact us at email listed in contact us page. Selected candidates will be contacted.

Search by Tags

Ado.net Ajax appSettings Asp.net C# CheckBox CheckBoxList ConnectionStrings Control CSS CSS3 Difference Download DropDownList Export Facebook fadeIn fadeOut fadeTo fadeToggle File File Extension FileUpload Function GridView IIS Interview Questions JavaScript jQuery MVC OOP RadioButtonList RDP Repeater Send Mail Solutions Split SQL Stored Procedure TextBox Upload Validation VB Web.config Web Hosting

The Man Behind AspnetO

Mayank Modi

Hi there,

Myself Mayank Modi, a Full Stack Developer (.NET Stack) and a blogger from Surat, India.

I'm welcoming you to my blog - AspnetO, a programmers community blog where we code, that works!

I started AspnetO as a hobby and now we're growing day by day. We're now having 5000+ programmers that get benefits and learn new things about website design and development under our community blog.

Here at AspnetO, I write about Beginners to Advance level of tutorials on programming languages like Asp.net using C# and Vb.net, MVC, SQL Server, JavaScript, jQuery etc. In sort, all about .NET Framework and website development stuff and sometimes sharing tips and tricks that can help you to grow up your programming skills.

You can get more details about me and my blog at About us page.

Subscribe To Newsletter

Enter your email address to subscribe to this blog and receive notifications of new posts right to your inbox

Join 1000+ other subscribers

<

Recent Posts

  • Main Difference between SessionState and ViewState in Asp.net
  • How to Get appSettings Value from Web.config File?
  • How to Get ConnectionString from Web.config in Asp.net?
  • Difference between appSettings and connectionStrings in Web.config
  • Get Folder Files List and Export to CSV in .NET
  • Get Files List From Directory Recursively in C# Vb.net
  • Get Hash Value From Current Page URL In jQuery
  • Handle Multiple Submit Buttons in Single MVC Form

Copyright © 2014 - 2021 · All Rights Reserved.

About | Copyrights | Privacy | Terms | Contact | Advertise | Sitemap
Previous Split String into Array using jQuery split function in Asp.net
Next RadioButtonList Validation: Validate RadioButtonList using JavaScript in Asp.net