ASP.Net Text Box Validation

Introduction

In this article, I explain how to create validations for a Text Box control in ASP.Net. I will start with the following three validations:

  1. Accept alphanumeric characters
  2. Accept Alphabet characters
  3. Accept numeric characters 

Requirement

Add the following  line in the head section:

 

  1. <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>  

 

Code

First write the following script in your page to accept alphanumeric characters :

  1. <script type="text/javascript">  
  2.     $(function () {  
  3.         $('#txtalphaNumeric').keydown(function (e) {  
  4.             if (e.shiftKey || e.ctrlKey || e.altKey) {  
  5.                 e.preventDefault();  
  6.             } else {  
  7.                 var key = e.keyCode;  
  8.                 if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105))) {  
  9.                     e.preventDefault();  
  10.                 }  
  11.             }  
  12.         });  
  13.     });   

When you have done that code, add a TextBox and provide "txtalphaNumeric" for the id of the TextBox like :

 

  1. <asp:TextBox ID="txtalphaNumeric" runat="server"></asp:TextBox>  

 

2. Accept Alphabet characters

First write the following script in your page : 

  1. $(function () {  
  2.         $('#txtalphabet').keydown(function (e) {  
  3.             if (e.shiftKey || e.ctrlKey || e.altKey) {  
  4.                 e.preventDefault();  
  5.             } else {  
  6.                 var key = e.keyCode;  
  7.                 if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90))) {  
  8.                     e.preventDefault();  
  9.                 }  
  10.             }  
  11.         });  
  12.     });  

When you have done that code, add a TextBox and provide "txtalphabet" for the id of the TextBox like:

 

  1. <asp:TextBox ID="txtalphabet" runat="server"></asp:TextBox>  

 

3. Accept numeric characters

First write the following script in your page :

 

  1. $(function () {  
  2.         $('#txtNumeric').keydown(function (e) {  
  3.              if (e.shiftKey || e.ctrlKey || e.altKey) {  
  4.                 e.preventDefault();  
  5.             } else {  
  6.                  var key = e.keyCode;  
  7.                  if (!((key == 8) || (key == 46) || (key >= 35 && key <= 40) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105))) {  
  8.                     e.preventDefault();  
  9.                 }  
  10.             }  
  11.         });  
  12.     });  

 

After you have done that code, add a TextBox and provide "txtalphabet" for the id of the TextBox like:

 

  1. <asp:TextBox ID="txtNumeric" runat="server"></asp:TextBox>  

 

Complete code

 

  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head>  
  3. <title>jQuery Allow only alphanumeric characters in TextBox</title>  
  4. <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>  
  5. <script type="text/javascript">  
  6.     $(function () {  
  7.         $('#txtalphaNumeric').keydown(function (e) {  
  8.              if (e.shiftKey || e.ctrlKey || e.altKey) {  
  9.                 e.preventDefault();  
  10.             } else {  
  11.                var key = e.keyCode;  
  12.                  if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105))) {  
  13.                     e.preventDefault();  
  14.                 }  
  15.             }  
  16.         });  
  17.     });  
  18.   
  19.     //only alphabet  
  20.   
  21.     $(function () {  
  22.         $('#txtalphabet').keydown(function (e) {  
  23.              if (e.shiftKey || e.ctrlKey || e.altKey) {  
  24.                 e.preventDefault();  
  25.             } else {  
  26.                  var key = e.keyCode;  
  27.                  if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90))) {  
  28.                     e.preventDefault();  
  29.                 }  
  30.             }  
  31.         });  
  32.     });   
  33.   
  34.     //Only Numeric  
  35.   
  36.     $(function () {  
  37.         $('#txtNumeric').keydown(function (e) {  
  38.              if (e.shiftKey || e.ctrlKey || e.altKey) {  
  39.                 e.preventDefault();  
  40.             } else {  
  41.                  var key = e.keyCode;  
  42.                  if (!((key == 8) || (key == 46) || (key >= 35 && key <= 40) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105))) {  
  43.                     e.preventDefault();  
  44.                 }  
  45.             }  
  46.         });  
  47.     });  
  48. </script>  
  49. </head>  
  50. <body>  
  51.      <form id="form1" runat="server">  
  52. <div>  
  53. <b>Enter Text:</b><asp:TextBox ID="txtalphaNumeric" runat="server"></asp:TextBox>Accept alphanumeric characters<b><br />  
  54.     Enter Text:</b><asp:TextBox ID="txtalphabet" runat="server"></asp:TextBox>  
  55.     Accept only Alphabets characters  
  56.     Enter text :<asp:TextBox ID="txtNumeric" runat="server"></asp:TextBox>Accept only Numeric values\  
  57. </div>  
  58.          </form>  
  59. </body>  
  60. </html>