Client validation gridview ASP.NET

I am going to explain the GridView Control Client Side (Javascript) Validation instead of server side validation controls.

I have a asp.net gridview which have three textboxes and two dropdownlist fields.Following screen shot showing that.

I am checking product code exists or not in database on onblur event




protected void grdBookinStock_RowDataBound(object sender, GridViewRowEventArgs e)
    {
 TextBox txtProductCode = (TextBox)e.Row.FindControl("txtProductCode");
txtProductCode.Attributes.Add("Onblur", "IsProductCodeExist(this.value);");
}


Now Javascript method IsProductCodeExist:


  function IsProductCodeExist(txtProductCode) {
            if (txtProductCode != "") {
                var IsExistsValue = (AjaxFunctions.IsProductCodeExists(txtProductCode)).value;

                if (IsExistsValue == false)
                    alert('Product Code does not exists');
            }
        }


Html code for gridview:

<asp:GridView ID="grdBookinStock" BackColor="LightGoldenrodYellow" BorderColor="Tan"
                                BorderWidth="1px" CellPadding="2" ForeColor="Black" AutoGenerateColumns="False"
                                ShowFooter="True" runat="server" OnRowDataBound="grdBookinStock_RowDataBound">
                                <Columns>
                                    <asp:TemplateField HeaderText="Product Code">
                                        <ItemTemplate>
                                            <asp:TextBox ID="txtProductCode" runat="server" MaxLength="6"></asp:TextBox>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="Owner">
                                        <ItemTemplate>
                                            <asp:DropDownList ID="ddlOwner" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlOwner_SelectedIndexChanged">
                                            </asp:DropDownList>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="Warehouse">
                                        <ItemTemplate>
                                            <asp:DropDownList ID="ddlWarehouse" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlWarehouse_SelectedIndexChanged">
                                            </asp:DropDownList>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="Bin">
                                        <ItemTemplate>
                                            <asp:TextBox ID="txtBin" runat="server" MaxLength="12" Enabled="False"
                                             autocomplete="off" AutoCompleteType="Disabled"></asp:TextBox>
                                            <cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" ServiceMethod="GetCompletionList"
                                                UseContextKey="True" MinimumPrefixLength="1" CompletionInterval="500" EnableCaching="false"
                                                CompletionSetCount="12" TargetControlID="txtBin">
                                            </cc1:AutoCompleteExtender>
                                            <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender2" FilterType="Custom" ValidChars="1234567890-"
                                                TargetControlID="txtBin" runat="server">
                                            </cc1:FilteredTextBoxExtender>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="Quantity">
                                        <ItemTemplate>
                                            <asp:TextBox ID="txtQuantity" runat="server" MaxLength="8" Enabled="False"></asp:TextBox>
                                            <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" FilterType="Numbers" TargetControlID="txtQuantity"
                                                runat="server">
                                            </cc1:FilteredTextBoxExtender>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                </Columns>
                                <FooterStyle BackColor="Tan" />
                                <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
                                <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
                                <HeaderStyle BackColor="Tan" Font-Bold="True" />
                                <AlternatingRowStyle BackColor="PaleGoldenrod" />
                            </asp:GridView>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            &nbsp;
                            </td>
                        <td>
                            &nbsp;
                            <asp:Button ID="btnSave" runat="server" CssClass="control"
                                OnClick="btnSave_Click" OnClientClick="return ValidateData();" Text="Save" />
                            <asp:Button ID="btnCancel" runat="server" CssClass="control"
                                OnClick="btnCancel_Click" Text="Refresh" />
                        </td>
                    </tr>
</Table>


Now I am validate data on save button

Client side Javascript method ValidateData():

function ValidateData() {
            var grid = document.getElementById("<%= grdBookinStock.ClientID %>");
            var cellProductCode;
            var cellOwner;
            var cellWarehouse;
            var cellBin;
            var cellQuantity;
            var cellProductCodeValue;
            var cellOwnerValue;
            var cellWarehouseValue;
            var cellBinValue;
            var cellQuantityValue;
           
            if (grid.rows.length > 0) {
                //loop starts from 1. rows[0] points to the header.
                for (i = 1; i < grid.rows.length; i++) {

                    cellProductCode = grid.rows[i].cells[0];
                    cellOwner = grid.rows[i].cells[1];
                    cellWarehouse = grid.rows[i].cells[2];
                    cellBin = grid.rows[i].cells[3];
                    cellQuantity = grid.rows[i].cells[4];

                    for (j = 0; j < cellProductCode.childNodes.length; j++) {

                        //if childNode type is CheckBox

                        if (cellProductCode.childNodes[j].type == "text") {
                            cellProductCodeValue = cellProductCode.childNodes[j].value;
                            //alert(cellProductCodeValue);

                        }
                    }

                    for (j = 0; j < cellOwner.childNodes.length; j++) {

                        //if childNode type is CheckBox

                        if (cellOwner.childNodes[j].tagName == "SELECT") {
                            cellOwnerValue = cellOwner.childNodes[j].value;
                            // alert(cellOwnerValue);
                        }
                    }

                    for (j = 0; j < cellWarehouse.childNodes.length; j++) {



                        if (cellWarehouse.childNodes[j].tagName == "SELECT") {
                            cellWarehouseValue = cellWarehouse.childNodes[j].value;
                            //alert(cellWarehouseValue);
                        }
                    }

                    for (j = 0; j < cellBin.childNodes.length; j++) {



                        if (cellBin.childNodes[j].type == "text") {
                            cellBinValue = cellBin.childNodes[j].value;
                            //alert(cellBinValue);
                        }
                    }
                    for (j = 0; j < cellQuantity.childNodes.length; j++) {

                        if (cellQuantity.childNodes[j].type == "text") {
                            cellQuantityValue = cellQuantity.childNodes[j].value;
                            // alert(cellQuantityValue);
                        }
                    }

                    if (cellProductCodeValue != "" || cellOwnerValue != "0" || cellWarehouseValue != "" || cellBinValue != "" || cellQuantityValue != "") {
                        if (cellProductCodeValue == "")
                        { alert('Enter product code');return false; }
                        if (cellOwnerValue == "0") {
                            alert('Select owner.'); return false;
                        }
                        if (cellWarehouseValue == "0") {
                            alert('Select warehouse.'); return false;
                        }
                        if (cellBinValue == "") {
                            alert('Enter bin.'); return false;
                        }
                        if (cellQuantityValue == "") {
                            alert('Enter quantity.'); return false;
                        }


                    }
                    function SetWarehouseIdtoHdnField() {
                       var hdn =document.getElementById('ctl00_ContentPlaceHolder1_hdnWarehouseId')

                       AjaxFunctions.SetValueWarehouse(hdn.value);



                    }


                }
               
            }
            //return true;
            if (confirm("Are you sure, you want to save the data?")) {
                return true;
            }
            else {

                return false;
            }

        }

 

 If you feeling bother about AjaxFunctions then you can see my old post

http://rajendramalav.blogspot.com/2009/07/call-server-side-method-from-client.html