In this article I will explain with an example, how to validate TextBox inside GridView using JavaScript on Button Click in ASP.Net.
When the Submit Button is clicked, using a FOR loop, all the TextBoxes inside the GridView will be validated and respective Error messages will be displayed using JavaScript 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.
Below the GridView, there is a Button which has been assigned an OnClientClick event handler.
<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" OnClientClick="return Validate()" />
 
 
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 JavaScript
When the Submit Button is clicked, the following JavaScript function is called.
Inside this function, 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">
    function Validate() {
        //Reference the GridView.
        var grid = document.getElementById("<%=GridView1.ClientID %>");
 
        //Reference all INPUT elements.
        var inputs = grid.getElementsByTagName("INPUT");
 
        //Set the Validation Flag to True.
        var isValid = true;
        for (var i = 0; i < inputs.length; i++) {
            //If TextBox.
            if (inputs[i].type == "text") {
                //Reference the Error Label.
                var label = inputs[i].parentNode.getElementsByTagName("SPAN")[0];
 
                //If Blank, display Error Label.
                if (inputs[i].value == "") {
                    label.style.display = "block";
                    isValid = false;
                } else {
                    label.style.display = "none";
                }
            }
        }
 
        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 JavaScript 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