csharp

How to use JavaScript Client side validation in ASP.NET

In this article, we will learn about javascript client side validation in asp.net
In this blog we will learn how to JavaScript validation apply on Name, Email, Password, Confirm Password and Mobile Number, Age.
Screenshot Describe output after run the project

First of all, learn some basics:
Validation–>Validation is nothing just whatever data is enterd into form in proper manner and valid for our business requirement, it is Validation.
There are Two types of validation
• Client side validation(Javascript Validation): This type of validation first check your form data before sending the server.
• Server-side validation: Whatever data is entered by the user it is checked by Server it is valid or not.

In this article we apply Client Side Validation Name, Email, Password, Confirm Password, Mobile Number, Age
Like:
• Name field accept the only character
• Email accept $,dot(.) and digit
• Apply JavaScript Client Side validation on Password and confirm password both are matched or not
• Mobile Number accept only 10 digit
• Age accept greater than 17 years

Some Basic Knowledge ofJavaScript: we can write JavaScript code head and body section.In This article, we well write JavaScript Validation code in the head section
I hope you know that basics knowledge of validation in JavaScript. Now it’s time to create one sample web application and learn about how to apply client side validation in TextBox.

Step 1: Create web Application
“Start”-“All Program”–>Microsoft VS 2012
“File”–>”New”–>”Project”–>Select Visual C# Web–>ASP.NET Empty website
Give the Project Name like My project Name ValidationDemo or whatever you wish
Then Right click on the project then select “Add New Item” by Default new item name “Default.aspx” Page
Step 2: Open .aspx page Design page and then write your code.Please follow my step

[php]
<head runat="server">
//head section write javascript code
<script type="text/javascript">
function Validation() { //Validation is a function Name it is perform on onClentClick Event
var errors = "";
errors += CheckName();

errors += CheckEmail();
errors += CheckPassword();
errors += CheckCnfPassword();
errors += CheckAge();
errors += CheckMobileNo();
if (errors != "") {
alert(errors);
return false;
}
}
//CheckName function: Check for Name TextBox
//getElementById:This method is simply used for read the controls values By ID

function CheckName() {
var TN = document.getElementById(‘txtname’);
var exp = /^[a-zA-Z ]+$/
if (TN.value == "") {
return ‘please enter your name !!\n’;
}
else if (exp.test(TN.value)) {
return "";
}
else {
return ‘please enter only alphabets !!\n’
}
}

//CheckEmail() Function: Check for Email

function CheckEmail() {
var TM = document.getElementById(‘txtemail’);
var exp = /^(([^<>()\[\]\\.,;:\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 (TM.value == "") {
return ‘Plzz Enter Email !!\n’;
}
else if (exp.test(TM.value)) {
return "";
}
else {
return ‘Plzz enter Valid Email!!\n’;
}

}
//CheckAge function : Check for Name Age

function CheckAge() {
var TA = document.getElementById(‘txtage’);
if (TA.value == "") {
return ‘Please Enter Age !!\n’;
}
else if (TA.value >= 18) {
return "";
}
else {
return "Please Enter age above 17 years!!\n";
}
}
//CheckPassword() Function: Check for Name Password

function CheckPassword() {
var TP = document.getElementById(‘txtpassword’);
if (TP.value == "") {
return ‘Please enter Password\n’;
}
else {
return "";
}
}
//CheckCnfPassword() function :Check for Name Confirm Password both password match or not

function CheckCnfPassword() {
var TP = document.getElementById(‘txtpassword’);
var TCF = document.getElementById(‘txtcnfpwd’);
if (TCF.value == "") {
return ‘Plzz enter Confirm Password!!\n’;
}
else if (TP.value == TCF.value) {
return "";
}
else {
return "Password and Confirm Password is not Match!!\n";
}
}

//CheckMobileNo() Function:Check for Mobile Number validation

function CheckMobileNo() {
var TMN = document.getElementById(‘txtmobno’);
var exp = /^[0]?[789]\d{9}$/;

if (TMN.value == "") {
return ‘Plzz Enter Mobile No!!\n’;
}
else if (exp.test(TMN.value)) {
return "";
}
else
{
return ‘Plzz Enter valid number !!\n’;
}
}
</script>

<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>Name:</td>
<td>
<asp:TextBox ID="txtname" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Email
</td>
<td>
<asp:TextBox ID="txtemail" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Age
</td>
<td>
<asp:TextBox ID="txtage" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Password:
</td>
<td>
<asp:TextBox ID="txtpassword" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Confirm Password
</td>
<td>
<asp:TextBox ID="txtcnfpwd" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Mob No:
</td>
<td>
<asp:TextBox ID="txtmobno" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="btnsave" runat="server" Text="Save" OnClientClick="return Validation()" OnClick="btnsave_Click" /></td>
</tr>
</table>

</div>
</form>
</body>
</html>
[/php]

Demo

I hope this article is helpful for you. If you have any suggestion related to this article please comment.

1 thought on “How to use JavaScript Client side validation in ASP.NET

Leave a Reply

Your email address will not be published.