Allow Only Alphanumeric Characters in a TextBox using jQuery




In this short post, I will demonstrate how to allow only alphanumeric characters in a TextBox. This article is a sample chapter from my upcoming EBook called 51 Tips, Tricks and Recipes with jQuery and ASP.NET Controls. The chapter content has been modified a little to publish it as a blog post. Also please note that for demonstration purposes, I have included JavaScript and CSS into the same file. Ideally, these resources should be created in separate folders for maintainability.

Requirement:

Users should be allowed to enter only Alphabets and Numbers in a TextBox. Non-alphanumeric characters should be disallowed. You also want to prevent users from copying and pasting non-alphanumeric characters into the TextBox.

Solution:

<html xmlns="http://www.w3.org/1999/xhtml">
<
head id="Head1" runat="server">
<
title>Allow Only Alphanumeric Characters in a TextBox</title>
<
link href="../CSS/Demos.css" rel="stylesheet" type="text/css" />
<
script type='text/javascript'
src='../Scripts/jquery-1.3.2.min.js'>
</
script>

<
script type="text/javascript">
$(function() {
$('input.alpha[$id=tb1]').keyup(function() {
if (this.value.match(/[^a-zA-Z0-9 ]/g)) {
this.value = this.value.replace(/[^a-zA-Z0-9 ]/g, '');
}
});
});
</script>
</
head>
<
body>
<
form id="form1" runat="server">
<
div class="bigDiv">
<
h2>Allow Only Alphanumeric Characters in a TextBox</h2>
<
asp:TextBox ID="tb1" runat="server" class="alpha"
Text="Try entering Non alphanumeric char"
ToolTip="Try entering Non alphanumeric char"/>
<
br /><br />
Tip: Examples of some non-alphanumeric characters <br />
are ~!@~#$%^&* and so on.
</div>
</
form>
</
body>
</
html>

Explanation:

The code shown above matches a regular expression /[^a-zA-Z0-9 ]/g that finds all characters that are not alphabets or numbers. If the user enters a character that is an alphabet or number, the character is replaced with an empty string. Observe the space after ‘9’ to allow whitespaces. Since we are capturing the keyup event, we are also preventing copying and pasting of non-alphanumeric characters. I have observed people using the keypress event to handle this requirement, but remember that in IE, keypress does not behave as expected for non-character keys.

As Yehuda Katz says – “My mantra has always been: keydown/keyup if you want to know the key that was pressed; keypress if you want to know what text was detected

Note: Javascript can be disabled, so always validate the user input on server side

Tip: If you want to accept only numbers, use /[^0-9 ]/g and for accepting only alphabets, use /[^a-zA-Z ]/g

Browsers Supported:

IE 7, IE 8, Firefox 3, Chrome 2, Safari 4

Useful Links:

http://ejohn.org/blog/keypress-in-safari-31/

http://docs.jquery.com/Events/keyup

LIVE DEMO

There are plenty of such similar tips that I will be covering in my upcoming EBook over here 51 Tips, Tricks and Recipes with jQuery and ASP.NET Controls



Will you give this article a +1 ? Thanks in advance




About The Author

Suprotim Agarwal, ASP.NET Architecture MVP works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal

comments

7 Responses to "Allow Only Alphanumeric Characters in a TextBox using jQuery"
  1. Anonymous said...
    October 16, 2009 at 9:36 AM

    You can paste in FF3. Once another key is pressed the characters are removed.

  2. Suprotim Agarwal said...
    October 16, 2009 at 11:44 AM

    The characters are removed on the keyup event..The example has been tested on FF3

  3. blainejt said...
    November 4, 2010 at 2:51 PM

    Does not always work if the user pastes with right-click or menu and clicks away. It requires that the user press a key in the text to get it to remove the characters. It is the closest thing I have send to validate what was entered on a paste.

  4. Cristian Riffo Huez said...
    February 7, 2012 at 7:06 AM

    Easy and Works.
    Thanks!

  5. Anonymous said...
    May 2, 2012 at 12:20 AM

    Thanks a tonn!!

  6. Ravi Raturi said...
    May 15, 2012 at 4:14 AM

    wokring fine

  7. Kyle Hill said...
    November 26, 2013 at 2:37 AM

    Works! Great...

 

Copyright © 2009-2014 All Rights Reserved for DevCurry.com by Suprotim Agarwal | Terms and Conditions