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
