Javascript for Client Side Validations in ASP.net with example

Javascript for Client Side Validations in ASP.net with example

Code behind file :

 <table >
            <tr>
                <td >
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td >
                    <asp:Label ID="lblName" runat="server" Text="Name"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="tbName" runat="server"></asp:TextBox>
                </td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td >
                    <asp:Label ID="lblLocation" runat="server" Text="Location"></asp:Label>
                </td>
                <td >
                    <asp:DropDownList ID="ddlLocation" runat="server">
                        <asp:ListItem Value="0" Selected="True">---</asp:ListItem>
                        <asp:ListItem Value="5">India</asp:ListItem>
                        <asp:ListItem Value="1">USA</asp:ListItem>
                        <asp:ListItem Value="2">China</asp:ListItem>
                        <asp:ListItem Value="3">Japan</asp:ListItem>
                        <asp:ListItem Value="4">Rasia</asp:ListItem>
                    </asp:DropDownList>
                </td>
                <td >
                </td>
            </tr>
            <tr>
                <td >
                    <asp:Label ID="lblAge" runat="server" Text="Age"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="tbAge" runat="server"></asp:TextBox>
                </td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td >
                    <asp:Label ID="lblOccupation" runat="server" Text="Occupation"></asp:Label>
                </td>
                <td>
                    <asp:DropDownList ID="ddlOccupation" runat="server">
                        <asp:ListItem Value="0" Selected="True">---</asp:ListItem>
                        <asp:ListItem Value="1">Governament</asp:ListItem>
                        <asp:ListItem Value="2">Self</asp:ListItem>
                        <asp:ListItem Value="3">IT</asp:ListItem>
                    </asp:DropDownList>
                </td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td >
                    <asp:Label ID="lblSalary" runat="server" Text="Salary"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="tbSalary" runat="server"></asp:TextBox>
                </td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td >
                    <asp:Label ID="lblDepartment" runat="server" Text="Department"></asp:Label>
                </td>
                <td>
                    <asp:DropDownList ID="ddlDepartment" runat="server">
                        <asp:ListItem Value="0" Selected="True">---</asp:ListItem>
                        <asp:ListItem Value="1">Govt</asp:ListItem>
                        <asp:ListItem Value="2">Private</asp:ListItem>
                        <asp:ListItem Value="3">Self</asp:ListItem>
                    </asp:DropDownList>
                </td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td >
                    <asp:Label ID="lblEmail" runat="server" Text="Email"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="tbEmail" runat="server"></asp:TextBox>
                </td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td >
                    <asp:Label ID="lblURL" runat="server" Text="URL"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="tbURL" runat="server"></asp:TextBox>
                </td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td >
                    &nbsp;</td>
                <td>
                    <asp:Button ID="btnSubmit" runat="server" Text="Add"
                     OnClientClick="return validation();" />
                </td>
                <td>
                    &nbsp;</td>
            </tr>

        </table>
..................................................................................................................

In Head section write this script:


 <script type="text/javascript">

       function validation()
       {
           var Name = document.getElementById('<%= tbName.ClientID %>').value;
           var Location = document.getElementById('<%= ddlLocation.ClientID %>').value;
           var Age =document.getElementById('<%= tbAge.ClientID %>').value;
           var Occupation = document.getElementById('<%= ddlOccupation.ClientID %>').value;
           var Salary = document.getElementById('<%= tbSalary.ClientID %>').value;
           var Department = document.getElementById('<%= ddlDepartment.ClientID %>').value;
           var Email = document.getElementById('<%= tbEmail.ClientID %>').value;
           var WebURL = document.getElementById('<%= tbURL.ClientID %>').value;
           var digit = '01234546789';
           var temp;
           var emailPat = /^(\".*\"|[A-Za-z]\w*)@(\[\d{1,3}(\.\d{1,3}){3}]|[A-Za-z]\w*(\.[A-Za-z]\w*)+)$/;
           var UrlPat = "^[A-Za-z]+://[A-Za-z0-9-_]+\\.[A-Za-z0-9-_%&\?\/.=]+$";

           if (Name == "")
           {
               alert("Enter Name.");
               document.getElementById('<%= tbName.ClientID %>').focus();
               return false;
           }
           if (Location == 0)
           {
               alert("Select Location.");
               document.getElementById('<%= ddlLocation.ClientID %>').focus();
               return false;
           }
           if (Age != "") {
                for (var i = 0; i < document.getElementById('<%=tbAge.ClientID %>').value.length; i++) {
                       temp = document.getElementById('<%= tbAge.ClientID %>').value.substring(i, i + 1);
                       if (digit.indexOf(temp) == -1) {
                       alert("Please enter digits only.");
                       document.getElementById('<%= tbAge.ClientID %>').focus();
                       return false;
                   }
                   temp = "";
                }
            }
            else {
                alert("Enter Age.");
                document.getElementById('<%= tbAge.ClientID %>').focus();
                return false;
            }
            if (Occupation == 0) {
                alert("Select Occupation.");
                document.getElementById('<%= ddlOccupation.ClientID%>').focus();
                return false;
            }
            if (Salary == "") {
                alert("Enter Salary.");
                document.getElementById('<%= tbSalary.ClientID %>').focus();
                return false;
            }
            else {
                for (var i = 0; i < document.getElementById('<%= tbSalary.ClientID %>').value.length - 1; i++) {
                    temp = document.getElementById('<%= tbSalary.ClientID %>').value.substring(i, i + 1);
                    if (digit.indexOf(temp) == -1) {
                        alert("Please Enter Digits only.");
                        document.getElementById('<%= tbSalary.ClientID %>').focus();
                        return false;
                    }
                    temp = "";
         
            }
            }
           
            if (Department == 0) {
                alert("Select Department.");
                document.getElementById('<%= ddlDepartment.ClientID %>').focus();
                return false;
            }
           
           var EmailMatch = Email.match(emailPat);
       
           if (EmailMatch == null) {
               alert("Your Email seems incorrect,Please Enter valid Email Id.");
               document.getElementById('<%=tbEmail.ClientID %>').focus();
               return false;
           }
           var UrlMatch = WebURL.match(UrlPat);
           if (UrlMatch == null) {
               alert("Web URL doesn't look valid.");
               document.getElementById('<%= tbURL.ClientID %>').focus();
               return false;
            }
       
        }
 

   </script>

Explanation: 

To Check entered text is digit or not:

 var Age =document.getElementById('<%= tbAge.ClientID %>').value;
 var digit = '01234546789';

compare entered text to this digit;

 for (var i = 0; i < document.getElementById('<%= tbSalary.ClientID %>').value.length - 1; i++) {
                    temp = document.getElementById('<%= tbSalary.ClientID %>').value.substring(i, i + 1);
                    if (digit.indexOf(temp) == -1) {
                        alert("Please Enter Digits only.");
                        document.getElementById('<%= tbSalary.ClientID %>').focus();
                        return false;
}
}

To check entered email is in correct format or not :

Here assign the value of Emailid textbox  to var type of Email.
 var Email = document.getElementById('<%= tbEmail.ClientID %>').value;

to check Email ID pattern here is the value to compare the given value.
 var emailPat = /^(\".*\"|[A-Za-z]\w*)@(\[\d{1,3}(\.\d{1,3}){3}]|[A-Za-z]\w*(\.[A-Za-z]\w*)+)$/;

now match the entered value to emailPat by using match function.
  var EmailMatch = Email.match(emailPat);
       
now check EmailMatch variable has value or not, if contain value email is valid otherwise not valid.

           if (EmailMatch == null) {
               alert("Your Email seems incorrect,Please Enter valid Email Id.");
               document.getElementById('<%=tbEmail.ClientID %>').focus();
               return false;
           }
}

To Check entered URL is in correct  format or not :

Here assign the value of url textbox  to var type of WebURL;
 var WebURL = document.getElementById('<%= tbURL.ClientID %>').value;

to check URL pattern here is the value to compare the given value.
var UrlPat = "^[A-Za-z]+://[A-Za-z0-9-_]+\\.[A-Za-z0-9-_%&\?\/.=]+$";

now match the entered value to UrlPat by using match function.

  var UrlMatch = WebURL.match(UrlPat);

now check UrlMatch variable has value or not, if contain value email is valid otherwise not valid.
           if (UrlMatch == null) {
               alert("Web URL doesn't look valid.");
               document.getElementById('<%= tbURL.ClientID %>').focus();
               return false;
            }
       
        }