TextBox Validation Using JavaScript In ASP.NET In Real Time Scenario

Blog

Introduction

JavaScript is a client side scripting language. The extension of the file is .JS.

Description

Client-side validation provides better user experience, as it reduces the unnecessary work between the client and the Server. Thus, client side validation is nicer to work with.

If JavaScript is not enabled or if the user is making a request, using tools like Fiddler, we still want to validate the form part before saving the data. Thus, Server side validation should always be not respective of whether we have client side validation or not.

Steps

Create a JavaScript file named "Validation.js".

function Required(ctrlID, ctrlName) {
var txtControl = document.getElementById(ctrlID);
var string = document.getElementById(ctrlID).value;
var spaceCount;
if (txtControl.value == '') {
alert('Enter ' + ctrlName + '.');
txtControl.focus();
return false;
}
else {
spaceCount = 0;
for (var count = 0; count < string.length; count++) {
var ch = string.substring(count, count + 1);
if (ch == ' ') {
spaceCount++;
}
}
if (spaceCount == string.length) {
alert('Please Enter ' + ctrlName + '.');
txtControl.value = "";
txtControl.focus();
return false;
}
}
return true;
}

Part 1

Description

Here, in function "Required" , I passed two parameters i.e. ctrlID, ctrlName means textbox id and textbox name.
In if part, it will take textbox id and check for empty. If it is true, it will show the warning message based on name provided in place of ctrlname.

function Required(ctrlID, ctrlName) {
var txtControl = document.getElementById(ctrlID);
var string = document.getElementById(ctrlID).value;
var spaceCount;
if (txtControl.value == '') {
alert('Enter ' + ctrlName + '.');
txtControl.focus();
return false;
}

Again it will check for if it's in use. Put any space and if textbox is empty, then this part will be verified.

else {
spaceCount = 0;
for (var count = 0; count < string.length; count++) {
var ch = string.substring(count, count + 1);
if (ch == ' ') {
spaceCount++;
}
}
if (spaceCount == string.length) {
alert('Please Enter ' + ctrlName + '.');
txtControl.value = "";
txtControl.focus();
return false;
}
}
return true;
}

Add a Webform to the project named "Default.aspx".

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Satyaprakash Wcf Concept</title>
<script language="javascript" src="../Validation.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function Validation() {
if (Required('<%=txtname.ClientID%>', 'Enter Name'))
if (Required('<%=txtGender.ClientID%>', 'Enter Gender'))
if (Required('<%=txtsalary.ClientID%>', 'Enter Salary'))
return true;
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">SATYAPRAKASH's WCF CONCEPT</h2>
<fieldset>
<legend style="font-family:Arial Black;color:orangered">WCF INSERT USING STORED PROCEDURE</legend>
<table align="center" border="1" cellpadding="4" cellspacing="4">
<tr><td align="center"><asp:TextBox ID="txtname" runat="server" placeholder="Enter Name.."></asp:TextBox></td></tr>
<tr><td align="center"> <asp:TextBox ID="txtGender" runat="server" placeholder="Enter Gender.." ></asp:TextBox></td></tr>
<tr><td align="center"><asp:TextBox ID="txtsalary" runat="server" placeholder="Enter Salary.."></asp:TextBox></td></tr>
<tr><td align="center">
<asp:Button ID="btnsave" runat="server" Text="Save" OnClick="btnsave_Click" OnClientClick="javascript:return Validation();" />
</td></tr>
</table>
</fieldset>
</div>
<footer>
<p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">© <script> document.write(new Date().toDateString()); </script></p>
</footer>
</form>
</body>
</html>

Part 2

Description

In the code given above, I added JavaScript related function and path.

<script language="javascript" src="../Validation.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function Validation() {
if (Required('<%=txtname.ClientID%>', 'Enter Name'))
if (Required('<%=txtGender.ClientID%>', 'Enter Gender'))
if (Required('<%=txtsalary.ClientID%>', 'Enter Salary'))
return true;
return false;
}
</script>

In button save, I apply JavaScript function, which is Validation(), using OnClientClick properties to validate textboxes in the client side.

<asp:Button ID="btnsave" runat="server" Text="Save" class="button button4" OnClick="btnsave_Click" OnClientClick="javascript:return Validation();" />

Here, I validate the three textboxes. If the textbox is empty and button is clicked, it will present a screen, as shown below.

Here, I need to validate the three textboxes. If the textbox is empty and the space is kept in the textbox by using spacebar and click button, it will be displayed, as shown below.

Without any space and empty part, if we click button, then we get a successful message.

Summary

What is JavaScript in ASP.NET?
How to write JavaScript in real time.
How to apply in ASP.NET page.
Check the related controls based on JavaScript validation concept.

Up Next

How to Check a TextBox has Numeric Value or not in ASP.NET using JavaScript

Ebook Download

View all

JavaScript Interview Q & A

Read by 40 people

Download Now!

Learn

View all