Java Script GridView ClientSide Validation

Majith
Posted by in JavaScript category on for Intermediate level | Views : 42206 red flag
Rating: 3 out of 5  
 1 vote(s)

I am going to explain the simple GridView Client Side Validation instead of server side validation controls.
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
 Hope the above code helps to the developers who are un known to  GridView Client side Validations.

Page copy protected against web site content infringement by Copyscape

About the Author

Majith
Full Name: Majith Basha
Member Level:
Member Status: Member
Member Since: 7/18/2008 11:49:59 PM
Country:



Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)