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






About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

9 comments:

Anonymous said...

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

Suprotim Agarwal said...

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

blainet said...

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.

Cristian Riffo Huez said...

Easy and Works.
Thanks!

Anonymous said...

Thanks a tonn!!

Unknown said...

wokring fine

Unknown said...

Works! Great...

Unknown said...

Really Helpful . it works after some modification as per my requirement.
Thanks Dear

Anonymous said...

Suprotim this is very helpful tutorial, i also wrote tutorial about it. Hope you like it. https://htmlcssphptutorial.wordpress.com/2015/09/14/insert-only-numbers-using-jquery/