In this article I will explain with an example, how to restrict user from entering Special Characters in TextBox using jQuery.
This article will illustrate how to perform AlphaNumeric validation for TextBox i.e. allow only Alphabets and Numbers in TextBox using jQuery.
When User types in the TextBox, the text in the TextBox will be validated using OnKeyPress event handler in jQuery and if the inputted character is not AlphaNumeric i.e. Alphabet or Number, the error message will be displayed next to the TextBox.
HTML Markup
The following HTML Markup consists of an HTML TextBox and a SPAN element.
<input type="text" id="txtName"/>
<span id="lblError" style="color: red"></span>
Restrict user from entering Special Characters in TextBox using jQuery
Inside the jQuery document ready event handler, the TextBox has been assigned an OnKeyPress event handler.
When the User types in the TextBox, the Key code (ASCII code) of the character is validated against a Regular Expression (Regex) and if the entered character is not AlphaNumeric i.e. Alphabet or Number then the event is cancelled, the character is not entered in the TextBox and an error message is displayed next to the TextBox using jQuery.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#txtName").keypress(function (e) {
var keyCode = e.keyCode || e.which;
$("#lblError").html("");
//Regex for Valid Characters i.e. Alphabets and Numbers.
var regex = /^[A-Za-z0-9]+$/;
//Validate TextBox value against the Regex.
var isValid = regex.test(String.fromCharCode(keyCode));
if (!isValid) {
$("#lblError").html("Only Alphabets and Numbers allowed.");
}
return isValid;
});
});
</script>
Screenshot
Browser Compatibility
The above code has been tested in the following browsers.
* All browser logos displayed above are property of their respective owners.
Demo
Downloads