In this article I will explain with an example, how to validate CheckBoxes inside GridView and perform at least one CheckBox checked validation using ASP.Net CustomValidator and JavaScript in ASP.Net.
When the Button is clicked, the ASP.Net CustomValidator triggers the JavaScript function and using a FOR loop, the GridView CheckBoxes are traversed and a validation to make sure whether at least one CheckBox is checked is performed.
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 is an ASP.Net CustomValidator and a Button control. The CustomValidator calls the Validate JavaScript function when the Button is clicked.
<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 namespace.
Binding the ASP.Net GridView control
The GridView is populated with a dynamic DataTable with some dummy data inside the 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
The following JavaScript function that gets executed when the ASP.Net CustomValidator is triggered on the Button click.
First the GridView is referenced and then its internal CheckBoxes are referenced.
Then a loop is executed over the CheckBoxes and a check is performed to make sure that at least one CheckBox is checked.
If at least one 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>
Screenshot
Browser Compatibility
The above code has been tested in the following browsers.
* All browser logos displayed above are property of their respective owners.
Demo
Downloads