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" %>
  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. }
  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 "";
  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. }
  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.