Hello All, We are going to start new batch from next week. message/call or mail us for more details.

26 June 2012

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 : <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 ObjectByVal 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.

No comments:

Post a Comment