Reader Level:
ARTICLE

Client Side Validation with JavaScript in ASP.NET

Posted by Puran Kaushal Articles | How do I March 22, 2006
This simple program will guide how to do client side validation in JavaScript.
  • 2
  • 0
  • 597339

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
COMMENT USING

Trending up