Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How to Allow Alphanumeric only in TextBox in ASP.NET

Author: Jeff Nava
Download Source Code : 1322_RestrictSpecialCharacters.zip

In this article, we will learn how we can allow users to enter alphanumeric values only in Textbox controls.

 

Many times, you need to restrict users to enter only alphanumeric values in Textbox controls. I will show how you can do it using Regular Expression, JavaScript and jQuery. You can write your custom regular expression in RegularExpressionValidator to check alphanumeric values. You can also use JavaScript or jQuery to accomplish this task easily.

 

  1. Open Visual Studio 2010
  2. File > New > Website
  3. Visual basic or Visual C# > ASP.NET Empty Web Site
  4. Website > NewFolder and rename the folder as “Scripts”
  5. Add “jquery-1.4.1.min.js” file in this folder. This is jQuery file that we will use in our example. You have to download it to add it in the folder.
  6. Website > Add New Item > Web Form
  7. Add two TextBox controls and two RegularExpressionValidator controls  in aspx page and set its attributes like below

    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
         ControlToValidate="TextBox1" ErrorMessage="Only AlphaNumerics are allowed without space"
         ValidationExpression="^[a-zA-Z0-9]+$"></asp:RegularExpressionValidator>
    <br />
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server"
         ControlToValidate="TextBox1" ErrorMessage="Only AlphaNumerics are allowed with space"
         ValidationExpression="^[a-zA-Z0-9]*$"></asp:RegularExpressionValidator>
     
    Write your regular expression in ValidationExpression attribute. You can see there are two regular expressions. Both expressions will allow only alphanumeric characters. First Expression has “+” sign in it which means that space is not allowed and second expression has “*” sign which means that spaces are allowed.
  8. Add two more TextBox controls in aspx page.

    <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
    <asp:TextBox ID="TextBox4" class="alphanum" runat="server"></asp:TextBox>
     
    Set “class” attribute of last TextBox control as “aplhanum”. We will use this in our code for validation alphanumeric characters using jQuery.
     
  9. Write below <script> tag in between <head> tag of aspx page

    <script type="text/javascript">
        var notAllowed = /[\!\@\#\$\%\^\&\*\(\)]/g;
        var txtbox = document.getElementById('<%=TextBox3.ClientID%>');
     
        txtbox.addEventListener("keyup", function (e) {
            var a = txtbox.value;
            if (notAllowed.test(a)) {
                txtbox.value = a.replace(notAllowed, "");
            }
        }, false);
    </script>
     
    Here in JavaScript code, you can write characters which will be not allowed in TextBox control. Get the element and call addEventListener function. In function, replace not allowed characters with space. 

     
  10. Write below <script> tags in between <head> tag of aspx page

    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('input.alphanum[$id=TextBox4]').keyup(function () {
                if (this.value.match(/[^a-zA-Z0-9 ]/g)) {
                    this.value = this.value.replace(/[^a-zA-Z0-9 ]/g, '');
                }
            });
        });
    </script>
     
    Include reference for jQuery file. Here we have matched the expression for alphanumeric characters and if the character is not alphanumeric then we have replaced it with space.

     
  11. Save file and press F5. Write any value in textboxes and see the result.

 

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< How to display images in GridView from SQL Server database in ASP.NET

Disclaimer - Privacy
© 2002-2017 DevASP.net