Java Script GridView ClientSide Validation

GridView Client Side Validation

Introduction

Performing the Client side validation on GridView Itemtemplate controls is quite tedious and finding the controls it seems to difficult.This snippet below validates all controls using JS.The article explains the GridView Client Side Validation instead of server side validation controls.

HTML Code

<title>Java Script GridView ClientSide Validation</title>
<script language="javascript" type="text/javascript">
  function check() 
   {
    var grid = document.getElementById('<%= GridView1.ClientID %>');
     if(grid!=null) 
      {
       var Inputs = grid.getElementsByTagName("input"); 
        for(i = 0; i < Inputs.length; i++) 
         {
          if(Inputs[i].type == 'text' ) 
           {
            if(Inputs[i].id == 'GridView1_ctl02_txtName') 
             {
              if(Inputs[i].value=="")
               {
                alert("Enter Name "); 
                return;
               }
             }
         if(Inputs[i].id == 'GridView1_ctl02_txtEmail') 
             {
                if(Inputs[i].value=="")
               {
                alert("Enter Email"); 
                  return;
               }
               var emailPat = /^(\".*\"|[A-Za-z]\w*)@(\[\d{1,3}(\.\d{1,3}){3}]|[A-Za-z]\w*(\.[A-Za-z]\w*)+)$/;
               var emailid =Inputs[i].value; 
               var matchArray = emailid.match(emailPat);
               if (matchArray == null)
                 {
                   alert("Your email address is not valid.");
                   return;  
                 }
              }
            }        }
    }
}
</script>   

1. First of all I am finding the Giridview using the ClientID , then the type of controls Input and the ID of the Controls.

2.The GridElementsByTagName returns the unique Id of the controls (For Ex:'GridView_ctlo2_txtName')

3.Using this Id we have to check the null valus and other validations.

GridView Code

<form runat="server">
 <asp:Button ID="btnEdit" runat="server" OnClick="btnEdit_Click" Text="NEW" /> 
    <asp:Button ID="Button1" runat="server" OnClick="btnCancel_Click" Text="CANCEL" style="position: relative" />
        <asp:GridView ID="GridView1" runat="server" 
          AutoGenerateColumns="false"
           OnRowEditing="GridView1_RowEditing"  
           OnRowCommand="GridView1_RowCommand"  
        Style="left: 324px; position: relative;          
            top: 86px" Width="308px">
            <Columns>
            <asp:TemplateField HeaderText="Name">  
            <ItemTemplate>
            <table>
            <tr>
            <td>
             <asp:TextBox ID="txtName"  Visible="false"  runat="server"></asp:TextBox>
            </td>
            </tr>
            <tr>
            <td>
             <asp:Label ID="lblname" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"name")%>'></asp:Label> 
            </td>
            </tr>
            </table> 
            </ItemTemplate> 
            </asp:TemplateField> 
            <asp:TemplateField HeaderText="Email">  
             <ItemTemplate>
             <table>
            <tr>
            <td>
            <asp:TextBox ID="txtEmail" Visible="false" runat="server"></asp:TextBox>  
           </td>
            </tr>
            <tr>
            <td>
           <asp:Label ID="lblemail" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"eml")%>'></asp:Label> 
            </td>
            </tr>
            </table> 
            </ItemTemplate> 
            </asp:TemplateField> 
           </Columns>            
        </asp:GridView>    
    </div>
    </form>

4.On the Page_load event add the Button.Attributes.Add onclick event client function.

Code Behind

 protected void Page_Load(object sender, EventArgs e)
    {
        btnEdit.Attributes.Add("onclick", "return check()");   
    }

Conclusion