Client-Side Validation for the CheckBoxes Inside a GridView using JavaScript

Client-Side Validation for the CheckBoxes Inside a GridView using JavaScript

Introduction

This code that ensures that at least one checkbox is checked among the checkboxes in a particular column inside a GridView control before submitting a form.

Using the code

I have used a TemplateField inside the GridView and put a CheckBox in the ItemTemplate of the TemplateField.

The HTML code on .aspx page looks like this:

Add this JavaScript in the page’s head section: 

<script type="text/javascript">    var TargetBaseControl = null;            window.onload = function()    {       try       {          //get target base control.          TargetBaseControl =            document.getElementById('<%= this.GridView1.ClientID %>');       }       catch(err)       {          TargetBaseControl = null;       }    }            function TestCheckBox()    {                    if(TargetBaseControl == null) return false;             //get target child control.       var TargetChildControl = "chkBxSelect";                   //get all the control of the type INPUT in the base control.       var Inputs = TargetBaseControl.getElementsByTagName("input");                   for(var n = 0; n < Inputs.length; ++n)          if(Inputs[n].type == 'checkbox' &&             Inputs[n].id.indexOf(TargetChildControl,0) >= 0 &&             Inputs[n].checked)           return true;                          alert('Select at least one checkbox!');       return false;    } </script>

 

Add this in the page’s body section:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">    <Columns>       <asp:BoundField HeaderText="n" DataField="sno">        <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />           <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />       </asp:BoundField>                       <asp:TemplateField HeaderText="Select">             <ItemTemplate>                <asp:CheckBox ID="chkBxSelect" runat="server" />             </ItemTemplate>             <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />             <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />         </asp:TemplateField>      </Columns>   </asp:GridView>  <asp:Button ID="btnPost" runat="server" Text="Post"              OnClientClick="javascript:return TestCheckBox();"              OnClick="btnPost_Click" />