Post
Ask Question

JavaScript Validation in Asp.Net

Introduction

 
This article explains how to validate name, email and phone number in a web page using JavaScript validations in ASP.Net.
 
In this example, I am using three textboxes. The first TextBox is Name that allows only characters and spaces. The second TextBox is Email that only allows email format. A third TextBox is a phone number, it only allows numbers.
 
Coding
 
Validation.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Validation.aspx.cs" Inherits="Validation" %>  
  2.    
  3.  <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head id="Head1" runat="server">  
  5. <title>Vallidations Page</title>  
  6. <script type="text/javascript">  
  7.     function Allvalidate()  
  8.     {  
  9.         var ValidationSummary = "";  
  10.         ValidationSummary += NameValidation();  
  11.         ValidationSummary += EmailValidation();  
  12.         ValidationSummary += PhonenoValidation();  
  13.         if (ValidationSummary != "")  
  14.         {  
  15.             alert(ValidationSummary);  
  16.             return false;  
  17.         }  
  18.         else  
  19.         {  
  20.             alert("Information submited successfuly");  
  21.             return true;  
  22.         }   
  23.     }  
  24.     function NameValidation()  
  25.     {  
  26.         var userid;  
  27.         var controlId = document.getElementById("<%=txtcontct.ClientID %>");  
  28.         userid = controlId.value;  
  29.         var val;  
  30.         val = /^[0-9]+$/;  
  31.         var digits = /\d(10)/;  
  32.         if (userid == "")  
  33.         {  
  34.             return ("Please Enter PhoneNo" + "\n");  
  35.         }  
  36.         else if (val.test(userid))  
  37.         {  
  38.             return "";  
  39.         }  
  40.    
  41.         else  
  42.         {  
  43.             return ("PhoneNo should be only in digits" + "\n");  
  44.         }  
  45.     }  
  46.     function EmailValidation()  
  47.     {  
  48.         var userid;  
  49.         var controlId = document.getElementById("<%=txtname.ClientID %>");  
  50.         userid = controlId.value;  
  51.         var val = /^[a-zA-Z ]+$/  
  52.         if (userid == "")  
  53.         {  
  54.             return ("Please Enter Name" + "\n");  
  55.         }  
  56.         else if (val.test(userid))  
  57.         {  
  58.             return "";  
  59.    
  60.         }  
  61.         else  
  62.         {  
  63.             return ("Name accepts only spaces and charcters" + "\n");  
  64.         }  
  65.     }  
  66.     function PhonenoValidation()  
  67.     {  
  68.         var userid;  
  69.         var controlId = document.getElementById("<%=txtemail.ClientID %>");  
  70.         userid = controlId.value;  
  71.         var val = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;  
  72.         if (userid == "")  
  73.         {  
  74.             return ("Please Enter Email Id" + "\n");  
  75.         }  
  76.         else if (val.test(userid))  
  77.         {  
  78.             return "";  
  79.         }  
  80.    
  81.         else  
  82.         {  
  83.             return ("Email should be in this form example: [email protected]" + "\n");  
  84.         }  
  85.     }  
  86. </script>  
  87. </head>  
  88. <body>  
  89. <form id="form1" runat="server">  
  90.     <h3 style="color:blue">Validation in JavaScript</h3>  
  91. <table style="border-color: #333300; z-index: 1; left: 15px; top: 54px; position: absolute; height: 122px; width: 261px">  
  92. <tr>  
  93. <td>  
  94. <asp:Label ID="lblname" runat="server" Text="FirstName"></asp:Label>  
  95. </td>  
  96. <td>  
  97. <asp:TextBox ID="txtname" runat="server"></asp:TextBox>  
  98. </td>  
  99. </tr>  
  100. <tr>  
  101. <td>  
  102. <asp:Label ID="lblemail" runat="server" Text="Email"></asp:Label>  
  103. </td>  
  104. <td>  
  105. <asp:TextBox ID="txtemail" runat="server"></asp:TextBox>  
  106. </td>  
  107. </tr>  
  108. <tr>  
  109. <td>  
  110. <asp:Label ID="lblCntno" runat="server" Text="Phone No"></asp:Label>  
  111. </td>  
  112. <td>  
  113. <asp:TextBox ID="txtcontct" runat="server"></asp:TextBox>  
  114. </td>  
  115. </tr>  
  116. <tr>  
  117. <td>  
  118. </td>  
  119. <td>  
  120. <asp:Button ID="bttnsubmit" runat="server" Text="Submit"  
  121. OnClientClick ="javascript:Allvalidate()" Font-Bold="True" />  
  122. </td>  
  123. </tr>  
  124. </table>  
  125.     </h3>  
  126. </form>  
  127. </body>  
  128. </html> 
Output 1
 
We click on the "Submit" button without entering any values in the textboxes:
 
blank-error.jpg
 
Output 2
 
We entered all incorrect values in the textboxes:
 
enter-wrong-values.jpg
 
Output 3
 
We have entered an incorrect value in only the Name TextBox:
 
Name-error.jpg
 
Output 4
 
We have entered an incorrect value in only the Email TextBox:
 
email-error.jpg
 
Output 5
 
We have entered an incorrect value in only the phone number TextBox:
 
ph-error.jpg
 
Output 6
 
We have entered a correct value in all textboxes:
 
success-msg.jpg
 
For more information, download the attached sample application.


Similar Articles