Client Side Validation of GridView control with javascript

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