Validate GridView with CheckBox (at least one checked) using JavaScript in ASP.Net

Validation of CheckBoxes inside GridView is performed using ASP.Net CustomValidator with a client side JavaScript validation function.

In this article I will explain how to validate CheckBoxes inside GridView and perform at least one checked validation using JavaScript in ASP.Net.

Validation of CheckBoxes inside GridView is performed using ASP.Net CustomValidator with a client side JavaScript validation function.

HTML Markup

The HTML Markup consists of an ASP.Net GridView with three columns and the first column being a TemplateField with a CheckBox placed inside it.

Below the GridView there’s a CustomValidator and a Button control.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">

    <Columns>

        <asp:TemplateField>

            <ItemTemplate>

                <asp:CheckBox ID="CheckBox1" runat="server" Text='<%# Eval("Id") %>' />

            </ItemTemplate>

        </asp:TemplateField>

        <asp:BoundField DataField="Name" HeaderText="Name" />

        <asp:BoundField DataField="Country" HeaderText="Country" />

    </Columns>

</asp:GridView>

<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Please select at least one record."

    ClientValidationFunction="Validate" ForeColor="Red"></asp:CustomValidator>

<br />

<asp:Button ID="Button1" runat="server" Text="Submit" />

   

Namespaces

You will need to import the following namespaces.

using System.Data;

Binding the GridView control

I have created a dynamic DataTable with some dummy data and it has been bind to the GridView control in Page Load event.

  protected void Page_Load(object sender, EventArgs e)

{

    if (!this.IsPostBack)

    {

        DataTable dt = new DataTable();

        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country") });

        dt.Rows.Add(1, "John Hammond", "United States");

        dt.Rows.Add(2, "Mudassar Khan", "India");

        dt.Rows.Add(3, "Suzanne Mathews", "France");

        dt.Rows.Add(4, "Robert Schidner", "Russia");

        GridView1.DataSource = dt;

        GridView1.DataBind();

    }

}

 

CustomValidator JavaScript Validation function

Below is the JavaScript function that gets executed when the CustomValidator is triggered on the button click. It first gets the GridView and its internal CheckBoxes and then a loop is executed to check whether the CheckBoxes are checked or unchecked.

If a CheckBox is found checked then the IsValid variable is set to true else it is set to false.

<script type="text/javascript">

    function Validate(sender, args) {

        var gridView = document.getElementById("<%=GridView1.ClientID %>");

        var checkBoxes = gridView.getElementsByTagName("input");

        for (var i = 0; i < checkBoxes.length; i++) {

            if (checkBoxes[i].type == "checkbox" && checkBoxes[i].checked) {

                args.IsValid = true;

                return;

            }

        }

        args.IsValid = false;

    }

</script>