TextBox Validation Client Side And Server Side In ASP.NET WebForm

In this article, we will cover the following.

Why do we need validation?
Types of validation client-side and server-side
Client-side validation code
Server-side validation code
Validation in WebForm

Why do we need validation?

Validation is the main threshold to process the data. We store the textbox value in a database table. Before moving to storing the data in the database, first, we check the value of each textbox.

Example

ASP.NET WebForm

As in the above Form image, we have the following fields:

Name, Age, Mobile, Email ID.

I have given a short explanation in the image before moving the form data to a database table.

Other validation

Age > 100 or 125 check if the length is not more than 3 digits.
Mobile number length must not be more than 10 digits and less than 10 digits.

Validation is required before accepting the data because, in the future, we process and generate the reports as per the received data.

Types of validation

In web technology, there are two types of validation.

Client Side
Server Side

Client-side validation

Before validating data in the server, first, we first validate it on the client side. User input that is validated in the browser before submitting to the server is called Client-side validation.

Server-side validation

This validation is executed after client-side validation if we have it. But we should or must have server-side validation. A user or hacker can submit the data through different channels.

Server-side validation comes into the picture/existence while the user submits or posts back.

Client-side validation code

We can achieve client-side validation with the help of the following.

JavaScript
jQuery

In this article, I used JavaScript to validate the TEXTBOX. To learn more about JavaScript, please visit the following link:

https://en.wikipedia.org/wiki/JavaScript

Three main functions validate the Number, Email ID, and entire form fields validator. These functions require textbox objects only. Everything else is done by the function itself.

Client-side number validator function

function checkEmail(event) {
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if (!re.test(event.value)) {
        alert("Please enter a valid email address");
        return false;
    }
    return true;
}

This function restricts the TextBox to accept only numeric keys. There is no impact on the textbox if other keys are pressed.

You can see that the heart of the above code is charCode and charCode is nothing but a keyCode. keyCode is a property of the pressed keyboard key. Every key has its keycode, like the ASCII

A - 65, B - 66.

For more details, you can visit this link.

https://www.w3schools.com/jsref/event_key_keycode.asp

Client-side email validator function

function checkEmail(event) {
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if (!re.test(event.value)) {
        alert("Please enter a valid email address");
        return false;
    }
    return true;
}

Client-side email validator function

function chkvalidation() {
    var exitval = false;
    var rsltcount = 0;
    var msgtext = "";
    // Age Validation
    var ageval = document.getElementById("<%= txtAge.ClientID %>").value;
    var agerslt = false;
    if (ageval.length > 0) {
        agerslt = OnlyNumbers(document.getElementById("<%= txtAge.ClientID %>"));
        if (agerslt == false) {
            msgtext = "Invalid age entered.";
            rsltcount = 1
        } else {
            if (ageval > 100) {
                msgtext = msgtext + "\n Check your entered age.";
                rsltcount += 1
            }
        }
    } else {
        msgtext =  msgtext + "\n Invalid age or age required.";
        rsltcount += 1
    }
    // Mobile Validation
    var mobileval = document.getElementById("<%= txtMobile.ClientID %>").value;
    var mobilerslt = false;
    if (mobileval.length != 10) {
        msgtext = msgtext + "\n Invalid mobile number or mobile number required";
        rsltcount += 1
    } else {
        mobilerslt = OnlyNumbers(document.getElementById("<%= txtMobile.ClientID %>"));
        if (mobilerslt == false) {
            msgtext = msgtext + "\n Invalid mobile number or mobile number required.";
            rsltcount += 1
        }
    }
    // Email Validation
    var emailidval = document.getElementById("<%= txtEmailID.ClientID %>").value;
    var emailidrslt = false;
    if (emailidval.length > 1) {
        emailidrslt = checkEmail(document.getElementById("<%= txtEmailID.ClientID %>"));
        if (emailidrslt == false) {
            msgtext = msgtext + "\n Invalid email id entered.";
            rsltcount += 1
        }
    } else {
        msgtext = msgtext + "\n Email id required.";
        rsltcount += 1
    }
    if (rsltcount > 0) {
        exitval = false;
    } else {
        exitval = true;
    }
    alert(msgtext);
    return exitval;
}

The above function is used to validate the Age, Mobile, and Email text box of the form.

Email text-box

ASP.NET WebForm

Right-click on the project title “TextBoxValidateWebForm” --> Select “Add” -->Select “Web Form”.

This will prompt you for the file name.

ASP.NET WebForm

Provide a file name such as “myprofile”.

ASP.NET WebForm

After clicking on the OK button, you can see your solution explorer which should look like this.

ASP.NET WebForm

In my profile, we will create a form that has the same fields as in the above image.

Name
Age
Mobile
Email ID

Let's create a tag for the above fields in MYPROFILE.ASPX page.

Your page will look like this.

ICICI direct login

Client-side blank submission errors.

Server-side blank submission errors.

ASP.NET WebForm

Code of MyProfile.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="myprofile.aspx.cs" Inherits="myprofile" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script>
        function OnlyNumbers(evt) {
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
                return false;
            return true;
        }
        function checkEmail(event) {
            var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            if (!re.test(event.value)) {
                alert("Please enter a valid email address");
                return false;
            }
            return true;
        }
        function chkvalidation() {
            var exitval = false;
            var rsltcount = 0;
            var msgtext = "";
            // Age Validation
            var ageval = document.getElementById("<%= txtAge.ClientID %>").value;
            var agerslt = false;
            if (ageval.length > 0) {
                agerslt = OnlyNumbers(document.getElementById("<%= txtAge.ClientID %>"));
                if (agerslt == false) {
                    msgtext = "Invalid age entered.";
                    rsltcount = 1
                } else {
                    if (ageval > 100) {
                        msgtext = msgtext + "\n Check your entered age.";
                        rsltcount += 1
                    }
                }
            } else {
                msgtext =  msgtext + "\n Invalid age or age required.";
                rsltcount += 1
            }
            // Mobile Validation
            var mobileval = document.getElementById("<%= txtMobile.ClientID %>").value;
            var mobilerslt = false;
            if (mobileval.length != 10) {
                msgtext = msgtext + "\n Invalid mobile number or mobile number required";
                rsltcount += 1
            } else {
                mobilerslt = OnlyNumbers(document.getElementById("<%= txtMobile.ClientID %>"));
                if (mobilerslt == false) {
                    msgtext = msgtext + "\n Invalid mobile number or mobile number required.";
                    rsltcount += 1
                }
            }
            // Email Validation
            var emailidval = document.getElementById("<%= txtEmailID.ClientID %>").value;
            var emailidrslt = false;
            if (emailidval.length > 1) {
                emailidrslt = checkEmail(document.getElementById("<%= txtEmailID.ClientID %>"));
                if (emailidrslt == false) {
                    msgtext = msgtext + "\n Invalid email id entered.";
                    rsltcount += 1
                }
            } else {
                msgtext = msgtext + "\n Email id required.";
                rsltcount += 1
            }
            if (rsltcount > 0) {
                exitval = false;
            } else {
                exitval = true;
            }
            alert(msgtext);
            return exitval;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <td>Name
                    </td>
                    <td>
                        <asp:TextBox ID="txtName" runat="server" ClientIDMode="Static"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>Age
                    </td>
                    <td>
                        <asp:TextBox ID="txtAge" runat="server" onkeypress="return OnlyNumbers(event)" MaxLength="3"  ></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>Mobile
                    </td>
                    <td>
                        <asp:TextBox ID="txtMobile" runat="server" MaxLength="10" onkeypress="return OnlyNumbers(event)" ></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>Email ID
                    </td>
                    <td>
                        <asp:TextBox ID="txtEmailID" runat="server" placeholder="[email protected]" onblur="checkEmail(this)"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td rowspan="1">
                        <asp:Button ID="btnSubmit" Text="Submit" runat="server"  OnClick="btnSubmit_Click" OnClientClick="return chkvalidation()" />
                    </td>
                </tr>
            </table>
            <asp:Label ID="lblResultMessage" runat="server" Text=""></asp:Label>
        </div>
    </form>
</body>
</html>

Code of MyProfile.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class myprofile : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        string MsgText = "";
        Int32 rsltcount = 0;
        // Age Validation
        bool ageValStatus = VerifyNumericValue(txtAge.Text);
        if (ageValStatus == false)
        {
            rsltcount += 1;
            MsgText += "Invalid age or age required.</br>";
        }
        if (ageValStatus == true)
        {
            if(Convert.ToDecimal(txtAge.Text) > 100)
            {
                rsltcount += 1;
                MsgText +=  " Check your entered age.</br>";
            }
        }
        // Mobile Validation
        bool mobileValStatus = VerifyNumericValue(txtMobile.Text);
        if (mobileValStatus == false)
        {
            rsltcount += 1;
            MsgText += "Invalid mobile number or mobile number required.</br>";
        }
        if (mobileValStatus == true)
        {
            if (txtMobile.Text.Length != 10)
            {
                rsltcount += 1;
                MsgText += "Check your entered mobile number.</br>";
            }
        }
        // Email ID Validation
        bool emailidValStatus = VerifyEmailID(txtEmailID.Text);
        if (emailidValStatus == false)
        {
            rsltcount += 1;
            MsgText += "Invalid email id or email id required.</br>";
        }
        lblResultMessage.Text = MsgText;
        lblResultMessage.Font.Bold = false;
        lblResultMessage.Font.Size = 14;
        lblResultMessage.ForeColor = System.Drawing.Color.Red;
    }
    public bool VerifyNumericValue(string ValueToCheck)
    {
        Int32 numval;
        bool rslt = false;
        rslt = Int32.TryParse(ValueToCheck, out numval);
        return rslt;
    }
    public static bool VerifyEmailID(string email)
    {
        string expresion;
        expresion = "\\w+([-+.']\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*";
        if (Regex.IsMatch(email, expresion))
        {
            if (Regex.Replace(email, expresion, string.Empty).Length == 0)
            {
                return true;
            }
            else
            {
                return false;
            }
        }
        else
        {
            return false;
        }
    }
}

7 Comments

Join the conversation! Your thoughts help the community grow.

Anil8y ago
Sir, how to redirect to other page after completing client side validation(javascript). I am having doubt about how to pass that validation function returned true to class file for to do redirecting page
Praveen reddy8y ago
Which is better learning java script in depth or Java script slight knowledge with good angular 2 depth?
- Sundaram Subramanian8y ago
  Both are good. The basement for script language is Java Script.
Sundaram Subramanian9y ago
Well Explained the Basics Sir. Good Work !!!
- Manoj Kalla9y ago
  Thank You Sundar sir... .. you are right I had written this article for new developers or students who willing to know Validation Clientside and Serverside.
Manav Pandya9y ago
Nice share sir .............
- Manoj Kalla9y ago
  Thank You Manav sir... ..