JavaScript Validation in Asp.Net

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.

Up Next
    Ebook Download
    View all
    Learn
    View all