Post
Ask Question

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

Introduction

 
JavaScript is a client-side scripting language. The extension of the file is .JS.
 
Description
 
Client-side validation provides a 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". 
  1. function Required(ctrlID, ctrlName) {  
  2.     var txtControl = document.getElementById(ctrlID);  
  3.     var string = document.getElementById(ctrlID).value;  
  4.     var spaceCount;  
  5.   
  6.     if (txtControl.value == '') {  
  7.         alert('Enter ' + ctrlName + '.');  
  8.         txtControl.focus();  
  9.   
  10.         return false;  
  11.     }  
  12.     else {  
  13.         spaceCount = 0;  
  14.         for (var count = 0; count < string.length; count++) {  
  15.             var ch = string.substring(count, count + 1);  
  16.   
  17.             if (ch == ' ') {  
  18.                 spaceCount++;  
  19.             }  
  20.         }  
  21.         if (spaceCount == string.length) {  
  22.             alert('Please Enter ' + ctrlName + '.');  
  23.             txtControl.value = "";  
  24.             txtControl.focus();  
  25.             return false;  
  26.         }  
  27.     }  
  28.   
  29.     return true;  
  30. } 
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.
  1. function Required(ctrlID, ctrlName) {  
  2.     var txtControl = document.getElementById(ctrlID);  
  3.     var string = document.getElementById(ctrlID).value;  
  4.     var spaceCount;  
  5.   
  6.     if (txtControl.value == '') {  
  7.         alert('Enter ' + ctrlName + '.');  
  8.         txtControl.focus();  
  9.   
  10.         return false;  
  11.     } 
Again it will check for if it's in use. Put any space and if textbox is empty, then this part will be verified. 
  1. else {  
  2.         spaceCount = 0;  
  3.         for (var count = 0; count < string.length; count++) {  
  4.             var ch = string.substring(count, count + 1);  
  5.   
  6.             if (ch == ' ') {  
  7.                 spaceCount++;  
  8.             }  
  9.         }  
  10.         if (spaceCount == string.length) {  
  11.             alert('Please Enter ' + ctrlName + '.');  
  12.             txtControl.value = "";  
  13.             txtControl.focus();  
  14.             return false;  
  15.         }  
  16.     }  
  17.   
  18.     return true;  
  19. } 
Add a Webform to the project named "Default.aspx". 
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title>Satyaprakash Wcf Concept</title>  
  8.     <script language="javascript" src="../Validation.js" type="text/javascript"></script>  
  9.     <script language="javascript" type="text/javascript">  
  10.         function Validation() {  
  11.             if (Required('<%=txtname.ClientID%>', 'Enter Name'))  
  12.                 if (Required('<%=txtGender.ClientID%>', 'Enter Gender'))  
  13.                     if (Required('<%=txtsalary.ClientID%>', 'Enter Salary'))  
  14.                         return true;  
  15.             return false;  
  16.         }  
  17.     </script>  
  18. </head>  
  19. <body>  
  20.     <form id="form1" runat="server">  
  21.     <div>  
  22.          <h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">SATYAPRAKASH's  WCF CONCEPT</h2>  
  23.         <fieldset>  
  24.             <legend style="font-family:Arial Black;color:orangered">WCF INSERT USING STORED PROCEDURE</legend>  
  25.             <table align="center" border="1" cellpadding="4" cellspacing="4">  
  26.             <tr><td align="center"><asp:TextBox ID="txtname"  runat="server" placeholder="Enter Name.."></asp:TextBox></td></tr>  
  27.             <tr><td align="center"> <asp:TextBox ID="txtGender"  runat="server" placeholder="Enter Gender.." ></asp:TextBox></td></tr>  
  28.             <tr><td align="center"><asp:TextBox ID="txtsalary" runat="server" placeholder="Enter Salary.."></asp:TextBox></td></tr>    
  29.             <tr><td align="center">  
  30.                 <asp:Button ID="btnsave" runat="server" Text="Save"  OnClick="btnsave_Click" OnClientClick="javascript:return Validation();" />  
  31.             </td></tr>                  
  32.          </table>  
  33.        </fieldset>  
  34.     </div>  
  35.     <footer>  
  36.         <p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">© <script> document.write(new Date().toDateString()); </script></p>  
  37.     </footer>  
  38.     </form>    
  39. </body>  
  40. </html> 
Part 2
 
Description
 
In the code given above, I added JavaScript related function and path. 
  1. <script language="javascript" src="../Validation.js" type="text/javascript"></script>  
  2.     <script language="javascript" type="text/javascript">  
  3.         function Validation() {  
  4.             if (Required('<%=txtname.ClientID%>', 'Enter Name'))  
  5.                 if (Required('<%=txtGender.ClientID%>', 'Enter Gender'))  
  6.                     if (Required('<%=txtsalary.ClientID%>', 'Enter Salary'))  
  7.                         return true;  
  8.             return false;  
  9.         }  
  10. </script> 
In button save, I apply JavaScript function, which is Validation(), using OnClientClick properties to validate textboxes in the client side.
  1. <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 the 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 space is kept in the textbox by using the spacebar and click the button, it will be displayed, as shown below.
 
 
 
 
Without any space and empty part, if we click the 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 the ASP.NET page.
 
Check the related controls based on the JavaScript validation concept.