Reader Level:
ARTICLE

Client Side Validation with JavaScript in ASP.NET

On March 22, 2006 Articles | How do I
This simple program will guide how to do client side validation in JavaScript.
  • 2
  • 0
  • 608585

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 : <asp:TextBox ID="txtName" />
  2. Email : <asp:TextBox ID="txtEmail" />
  3. Web URL : <asp:TextBox ID="txtWebUrl" />
  4. Zip : <asp:TextBox ID="txtZip" />
  5. <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:

<script language="javascript" type="text/javascript">
function
validate()
{
      if (document.getElementById("<%=txtName.ClientID%>").value==""
)
      {
                 alert("Name Feild can not be blank"
);
                 document.getElementById(
"<%=txtName.ClientID%>"
).focus();
                 return false
;
      }
      if(document.getElementById("<%=txtEmail.ClientID %>").value==""
)
      {
                 alert(
"Email id can not be blank"
);
                document.getElementById("<%=txtEmail.ClientID %>"
).focus();
                return false
;
      }
     var
emailPat = /^(\".*\"|[A-Za-z]\w*)@(\[\d{1,3}(\.\d{1,3}){3}]|[A-Za-z]\w*(\.[A-Za-z]\w*)+)$/;
     var emailid=document.getElementById("<%=txtEmail.ClientID %>"
).value;
     var
matchArray = emailid.match(emailPat);
     if (matchArray == null
)
    {
               alert(
"Your email address seems incorrect. Please try again."
);
               document.getElementById(
"<%=txtEmail.ClientID %>"
).focus();
               return false
;
    }
    if(document.getElementById("<%=txtWebURL.ClientID %>").value==""
)
    {
               alert(
"Web URL can not be blank"
);
               document.getElementById(
"<%=txtWebURL.ClientID %>").value=
"http://"
               document.getElementById("<%=txtWebURL.ClientID %>"
).focus();
               return false
;
    }
    var Url=
"^[A-Za-z]+://[A-Za-z0-9-_]+\\.[A-Za-z0-9-_%&\?\/.=]+$"
    var tempURL=document.getElementById("<%=txtWebURL.ClientID%>"
).value;
    var
matchURL=tempURL.match(Url);
     if(matchURL==null
)
     {
               alert(
"Web URL does not look valid"
);
               document.getElementById(
"<%=txtWebURL.ClientID %>"
).focus();
               return false
;
     }
     if (document.getElementById("<%=txtZIP.ClientID%>").value==""
)
     {
               alert(
"Zip Code is not valid"
);
               document.getElementById(
"<%=txtZIP.ClientID%>"
).focus();
               return false
;
     }
     var digits="0123456789"
;
     var
temp;
     for (var i=0;i<document.getElementById("<%=txtZIP.ClientID %>"
).value.length;i++)
     {
               temp=document.getElementById(
"<%=txtZIP.ClientID%>"
).value.substring(i,i+1);
               if
(digits.indexOf(temp)==-1)
               {
                        alert(
"Please enter correct zip code"
);
                        document.getElementById(
"<%=txtZIP.ClientID%>"
).focus();
                        return false
;
               }
     }
     return true
;
}
</script>

And in code behind file just write the below code.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
               btnSubmit.Attributes.Add(
"onclick", "return validate()"
)
End Sub

Now you will get a form with proper validation.

I hope this is going to help you.

Article Extensions
Contents added by prasanna reddy on Oct 15, 2012
Contents added by Purushottam Rathore on Sep 22, 2010
Contents added by JIGNESH prajapati on Jul 29, 2009
Puran Kaushal

Puran Chand Kaushal is working with .NET technology. PCK background includes Master's in Computer Science and Applications . Currently he is exploring C#, ASP.NET, WCF,Design Patterns and SOA.

  • 451rank
  • 826K readers
COMMENT USING

Trending up