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.
![Client side blank]()
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;
}
}
}