Client Side Validation Of GridView with JavaScript.
Many people are asking me how to validate GridView with JavaScript. How to get control client Id on client side. This article and attached code snippet shows you to create a validate method in JavaScript and call it from your ASP.NET page's code behind to validate the controls.
In my sample example, I have taken on GridView with checkbox and TextBox in the gridview. Just copy this code in your aspx page. As you can see in the below code, I have a validate method. Thid methods finds each control in a GridView row using getElementById as an object and then checks if it is checked or not and so on.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript">
function validate()
{
for(j=0;j<grd_Cb.length;j++)
{
var obj = document.getElementById(grd_Cb[j]);
if(obj.checked ==true)
{
Checkbol=1;
bool=1;
}
}
if(bool==0)
{
alert(" Please enter atleast one Passenger");
return false;
}
if (Checkbol==1)
{
for(i=0;i<grd_Cb.length;i++)
{
var Obj1 = document.getElementById(grd_Cb[i]);
if(Obj1.checked ==true)
{
var objFirstName=document.getElementById(grdFirstName_Txt[i]);
if(objFirstName.value=="")
{
alert("Line No : "+ [parseInt(i)+1]+ " First name can not be blank");
objFirstName.focus();
return false;
}
var objLastName=document.getElementById(grdLastName_Txt[i]);
if(objLastName.value=="")
{
alert("Line No : "+ [parseInt(i)+1]+ " Last name can not be blank");
objLastName.focus();
return false;
}
}
}
}
return true;
}
</script>
<title>JavaScript Validation on Grid</title>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView runat="server" ID="JavascriptGrid" AutoGenerateColumns="False" Width="100%" OnPreRender="JavascriptGrid_PreRender">
<Columns>
<asp:TemplateField HeaderText="Validate">
<ItemTemplate>
<asp:CheckBox CssClass="textbox" runat="server" ID="ChkValidate" />
</ItemTemplate>
<ItemStyle Width="10px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="First Name">
<ItemTemplate>
<asp:TextBox ID="FirstName" Text='<%#Eval("FirstName") %>' runat="server" Width="140"></asp:TextBox>
</ItemTemplate>
<ItemStyle Width="150px" />
<HeaderStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Last Name">
<ItemTemplate>
<asp:TextBox ID="LastName" Text='<%#Eval("LastName") %>' runat="server" Width="140"></asp:TextBox>
</ItemTemplate>
<ItemStyle Width="140px" />
<HeaderStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Email">
<ItemTemplate>
<asp:TextBox ID="Email" Text='<%#Eval("Email") %>' runat="server" Width="140"></asp:TextBox>
</ItemTemplate>
<ItemStyle Width="140px" />
<HeaderStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Zip">
<ItemTemplate>
<asp:TextBox ID="Zip" Text='<%#Eval("Zip") %>' runat="server" Width="50"></asp:TextBox>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" />
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Button ID="btnValidate" runat="server" Text="ValidateGrid" />
</form>
</body>
</html>
And following code in .cs file of the same page. As you can see on this page, on page's Load event handler, I add an attribute to the button's click event hander onclick and call JavaScript's validate method whenever a button is clicked.
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
btnValidate.Attributes.Add("onclick", "return validate()");
DataTable dt = new DataTable();
DataRow dtRow;
dt.Columns.Add("FirstName");
dt.Columns.Add("LastName");
dt.Columns.Add("Email");
dt.Columns.Add("Zip");
for (int i = 0; i < 4; i++)
{
dtRow = dt.NewRow();
dt.Rows.Add(dtRow);
}
JavascriptGrid.DataSource = dt;
JavascriptGrid.DataBind();
}
protected void JavascriptGrid_PreRender(object sender, EventArgs e)
{
ClientScriptManager cs = Page.ClientScript;
foreach (GridViewRow grdrow in JavascriptGrid.Rows)
{
CheckBox txtgrdValidate = (CheckBox)grdrow.FindControl("ChkValidate");
TextBox txtgrdFirstName = (TextBox)grdrow.FindControl("FirstName");
TextBox txtgrdLastName = (TextBox)grdrow.FindControl("LastName");
TextBox txtgrdEmail = (TextBox)grdrow.FindControl("Email");
TextBox txtgrdZip = (TextBox)grdrow.FindControl("Zip");
cs.RegisterArrayDeclaration("grd_Cb", String.Concat("'", txtgrdValidate.ClientID, "'"));
cs.RegisterArrayDeclaration("grdFirstName_Txt", String.Concat("'", txtgrdFirstName.ClientID, "'"));
cs.RegisterArrayDeclaration("grdLastName_Txt", String.Concat("'", txtgrdLastName.ClientID, "'"));
cs.RegisterArrayDeclaration("grdEmail_Txt", String.Concat("'", txtgrdEmail.ClientID, "'"));
cs.RegisterArrayDeclaration("grdZip_Txt", String.Concat("'", txtgrdZip.ClientID, "'"));
}
}
}
Using the same approach, you may apply client side validation on any other controls or events.