ASP.Net: Text Box Validation

ASP.Net: Text Box validation

Live demo Here

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

 

Requirment :

Add the following  line in the head section:

 <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 :

<script type="text/javascript">

    $(function () {

        $('#txtalphaNumeric').keydown(function (e) {

            if (e.shiftKey || e.ctrlKey || e.altKey) {

                e.preventDefault();

            } else {

                var key = e.keyCode;

                if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105))) {

                    e.preventDefault();

                }

            }

        });

    });

 

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

 

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


2. Accept Alphabet characters

 

First write the following script in your page :

 

$(function () {

        $('#txtalphabet').keydown(function (e) {

            if (e.shiftKey || e.ctrlKey || e.altKey) {

                e.preventDefault();

            } else {

                var key = e.keyCode;

                if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90))) {

                    e.preventDefault();
                }
            }
        });
    });

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

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

3. Accept numeric characters

      First write the following script in your page :

$(function () {
        $('#txtNumeric').keydown(function (e) {
             if (e.shiftKey || e.ctrlKey || e.altKey) {
                e.preventDefault();
            } else {
                 var key = e.keyCode;
                 if (!((key == 8) || (key == 46) || (key >= 35 && key <= 40) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105))) {
                    e.preventDefault();
                }
            }
        });
    });

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

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

Complete  code :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Allow only alphanumeric characters in TextBox</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
    $(function () {
        $('#txtalphaNumeric').keydown(function (e) {
             if (e.shiftKey || e.ctrlKey || e.altKey) {
                e.preventDefault();
            } else {
               var key = e.keyCode;
                 if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105))) {
                    e.preventDefault();
                }
            }
        });
    });

    //only alphabet

    $(function () {
        $('#txtalphabet').keydown(function (e) {
             if (e.shiftKey || e.ctrlKey || e.altKey) {
                e.preventDefault();
            } else {
                 var key = e.keyCode;
                 if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90))) {
                    e.preventDefault();
                }
            }
        });
    }); 

    //Only Numeric

    $(function () {
        $('#txtNumeric').keydown(function (e) {
             if (e.shiftKey || e.ctrlKey || e.altKey) {
                e.preventDefault();
            } else {
                 var key = e.keyCode;
                 if (!((key == 8) || (key == 46) || (key >= 35 && key <= 40) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105))) {
                    e.preventDefault();
                }
            }
        });
    });
</script>
</head>
<body>
     <form id="form1" runat="server">
<div>
<b>Enter Text:</b><asp:TextBox ID="txtalphaNumeric" runat="server"></asp:TextBox>Accept alphanumeric characters<b><br />
    Enter Text:</b><asp:TextBox ID="txtalphabet" runat="server"></asp:TextBox>
    Accept only Alphabets characters
    Enter text :<asp:TextBox ID="txtNumeric" runat="server"></asp:TextBox>Accept only Numeric values\
</div>
         </form>
</body>
</html>

Live demo Here