Scribd
Upload
292 views2 pages

JavaScript Form Client-Side Validation Guide

This document provides code for client-side form validation in JavaScript. It includes code to: 1) Define a form with fields for name, email, web URL, and zip code; 2) Write JavaScript validation functions to check if fields are empty and ensure the email and web URL are in the proper format; 3) Add an "OnClientClick" event to the submit button to call the validation function and prevent submitting if validation fails.

Uploaded by

Brenda Cox
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
292 views2 pages

JavaScript Form Client-Side Validation Guide

This document provides code for client-side form validation in JavaScript. It includes code to: 1) Define a form with fields for name, email, web URL, and zip code; 2) Write JavaScript validation functions to check if fields are empty and ensure the email and web URL are in the proper format; 3) Add an "OnClientClick" event to the submit button to call the validation function and prevent submitting if validation fails.

Uploaded by

Brenda Cox
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd

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>

You might also like