In this article I will explain with an example, how to validate TextBox inside GridView using jQuery on Button Click in ASP.Net.
When the Submit Button is clicked, using a jQuery each loop, all the TextBoxes inside the GridView will be validated and respective Error messages will be displayed using jQuery in ASP.Net.
 
 
HTML Markup
The HTML Markup consists of an ASP.Net GridView with one BoundField column and two TemplateField columns consisting of TextBoxes and a Button.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Item" HeaderText="Item" />
        <asp:TemplateField HeaderText="Price">
            <ItemTemplate>
                <asp:TextBox ID="txtPrice" runat="server" Text='<%# Eval("Price") %>'></asp:TextBox><br />
                <span class="error">Required</span>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Quantity">
            <ItemTemplate>
                <asp:TextBox ID="txtQuantity" runat="server" Text='<%# Eval("Quantity") %>'></asp:TextBox><br />
                <span class="error">Required</span>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit"/>
 
 
Namespaces
You will need to import the following namespace.
C#
using System.Data;
 
VB.Net
Imports System.Data
 
 
Binding the GridView control
Inside the Page Load event handler, the GridView is populated with a dynamic DataTable with some dummy data.
Note: You can learn more about this technique in my article Create DataTable dynamically and bind to GridView in ASP.Net.
 
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Item"), new DataColumn("Price"), new DataColumn("Quantity") });
        dt.Rows.Add("Shirt");
        dt.Rows.Add("Football", 299, 10);
        dt.Rows.Add("Shirt", 545, 15);
        dt.Rows.Add("Disc", 99, 20);
        dt.Rows.Add("Watch", 200, 45);
        dt.Rows.Add("Clock", 670, 97);
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}
 
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As DataTable = New DataTable
        dt.Columns.AddRange(New DataColumn() {New DataColumn("Item"), New DataColumn("Price"), New DataColumn("Quantity")})
        dt.Rows.Add("Shirt")
        dt.Rows.Add("Football", 299, 10)
        dt.Rows.Add("Shirt", 545, 15)
        dt.Rows.Add("Disc", 99, 20)
        dt.Rows.Add("Watch", 200, 45)
        dt.Rows.Add("Clock", 670, 97)
        GridView1.DataSource = dt
        GridView1.DataBind()
    End If
End Sub
 
 
Validating TextBox inside GridView using jQuery
Inside the jQuery document ready event handler, the Submit Button has been assigned a jQuery Click event handler.
When the Submit Button is clicked, the TextBoxes inside the GridView are referenced and using a loop, each TextBox is validated and if the validation fails, the respective Error Label is displayed.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=btnSubmit]").click(function () {
            //Set the Validation Flag to True.
            var isValid = true;
 
            $("[id*=GridView] input[type=text]").each(function () {
                //Reference the Error Label.
                var label = $(this).parent().find("SPAN");
 
                //If Blank, display Error Label.
                if ($(this).val().trim() == "") {
                    label.show();
                    isValid = false;
                } else {
                    label.hide();
                }
            });
 
            return isValid;
        });
    });
</script>
 
 
CSS
The following CSS style is used for the Error Label.
<style type="text/css">
   .error
    {
        color: Red;
        display: none;
    }
</style>
 
 
Screenshot
Validate TextBox inside GridView using jQuery on Button Click in ASP.Net
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code