Post
Ask Question

Client Side Validation with JavaScript in ASP.NET

This simple program will guide how to do client side validation of Form in JavaScript.

In this just make a form as follows:

  1. Name
    1. <asp:TextBox ID="txtName" />  
  2. Email
    1. <asp:TextBox ID="txtEmail" />  
  3. Web URL
    1. <asp:TextBox ID="txtWebUrl" />  
  4. Zip
    1. <asp:TextBox ID="txtZip" />   
  5. Button
    1. <asp:Button ID="btnSubmit" OnClientClick=" return validate()" runat="server" Text="Submit" />   

Now on the source code of this form in script tag write the following code:

  1. <script language="javascript" type="text/javascript">  
  2. function validate()  
  3. {  
  4.       if (document.getElementById("<%=txtName.ClientID%>").value=="")  
  5.       {  
  6.                  alert("Name Feild can not be blank");  
  7.                  document.getElementById("<%=txtName.ClientID%>").focus();  
  8.                  return false;  
  9.       }  
  10.       if(document.getElementById("<%=txtEmail.ClientID %>").value=="")  
  11.       {  
  12.                  alert("Email id can not be blank");  
  13.                 document.getElementById("<%=txtEmail.ClientID %>").focus();  
  14.                 return false;  
  15.       }  
  16.      var emailPat = /^(\".*\"|[A-Za-z]\w*)@(\[\d{1,3}(\.\d{1,3}){3}]|[A-Za-z]\w*(\.[A-Za-z]\w*)+)$/;  
  17.      var emailid=document.getElementById("<%=txtEmail.ClientID %>").value;  
  18.      var matchArray = emailid.match(emailPat);  
  19.      if (matchArray == null)  
  20.     {  
  21.                alert("Your email address seems incorrect. Please try again.");  
  22.                document.getElementById("<%=txtEmail.ClientID %>").focus();  
  23.                return false;  
  24.     }  
  25.     if(document.getElementById("<%=txtWebURL.ClientID %>").value=="")  
  26.     {  
  27.                alert("Web URL can not be blank");  
  28.                document.getElementById("<%=txtWebURL.ClientID %>").value="http://"  
  29.                document.getElementById("<%=txtWebURL.ClientID %>").focus();  
  30.                return false;  
  31.     }  
  32.     var Url="^[A-Za-z]+://[A-Za-z0-9-_]+\\.[A-Za-z0-9-_%&\?\/.=]+$"  
  33.     var tempURL=document.getElementById("<%=txtWebURL.ClientID%>").value;  
  34.     var matchURL=tempURL.match(Url);  
  35.      if(matchURL==null)  
  36.      {  
  37.                alert("Web URL does not look valid");  
  38.                document.getElementById("<%=txtWebURL.ClientID %>").focus();  
  39.                return false;  
  40.      }  
  41.      if (document.getElementById("<%=txtZIP.ClientID%>").value=="")  
  42.      {  
  43.                alert("Zip Code is not valid");  
  44.                document.getElementById("<%=txtZIP.ClientID%>").focus();  
  45.                return false;  
  46.      }  
  47.      var digits="0123456789";  
  48.      var temp;  
  49.      for (var i=0;i<document.getElementById("<%=txtZIP.ClientID %>").value.length;i++)  
  50.      {  
  51.                temp=document.getElementById("<%=txtZIP.ClientID%>").value.substring(i,i+1);  
  52.                if (digits.indexOf(temp)==-1)  
  53.                {  
  54.                         alert("Please enter correct zip code");  
  55.                         document.getElementById("<%=txtZIP.ClientID%>").focus();  
  56.                         return false;  
  57.                }  
  58.      }  
  59.      return true;  
  60. }  
  61. </script>  
And in code behind file just write the below code.
  1. Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load  
  2.                btnSubmit.Attributes.Add("onclick", "return validate()")  
  3. End Sub  
Now you will get a form with proper validation.

I hope this is going to help you.


Similar Articles