Inroduction
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. The third TextBox is phone number, it only allows numbers.
Coding
Validation.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Validation.aspx.cs" Inherits="Validation" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Vallidations Page</title>
<script type="text/javascript">
function Allvalidate()
{
var ValidationSummary = "";
ValidationSummary += NameValidation();
ValidationSummary += EmailValidation();
ValidationSummary += PhonenoValidation();
if (ValidationSummary != "")
{
alert(ValidationSummary);
return false;
}
else
{
alert("Information submited successfuly");
return true;
}
}
function NameValidation()
{
var userid;
var controlId = document.getElementById("<%=txtcontct.ClientID %>");
userid = controlId.value;
var val;
val = /^[0-9]+$/;
var digits = /\d(10)/;
if (userid == "")
{
return ("Please Enter PhoneNo" + "\n");
}
else if (val.test(userid))
{
return "";
}
else
{
return ("PhoneNo should be only in digits" + "\n");
}
}
function EmailValidation()
{
var userid;
var controlId = document.getElementById("<%=txtname.ClientID %>");
userid = controlId.value;
var val = /^[a-zA-Z ]+$/
if (userid == "")
{
return ("Please Enter Name" + "\n");
}
else if (val.test(userid))
{
return "";
}
else
{
return ("Name accepts only spaces and charcters" + "\n");
}
}
function PhonenoValidation()
{
var userid;
var controlId = document.getElementById("<%=txtemail.ClientID %>");
userid = controlId.value;
var val = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
if (userid == "")
{
return ("Please Enter Email Id" + "\n");
}
else if (val.test(userid))
{
return "";
}
else
{
return ("Email should be in this form example: [email protected]" + "\n");
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<h3 style="color:blue">Validation in JavaScript</h3>
<table style="border-color: #333300; z-index: 1; left: 15px; top: 54px; position: absolute; height: 122px; width: 261px">
<tr>
<td>
<asp:Label ID="lblname" runat="server" Text="FirstName"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtname" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblemail" runat="server" Text="Email"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtemail" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblCntno" runat="server" Text="Phone No"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtcontct" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="bttnsubmit" runat="server" Text="Submit"
OnClientClick ="javascript:Allvalidate()" Font-Bold="True" />
</td>
</tr>
</table>
</h3>
</form>
</body>
</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 text boxes:
![success-msg.jpg]()
For more information, download the attached sample application.