In this article I will explain with an example, how to perform Alphabet validation i.e. allow only Letters (A-Z) using OnKeyPress event in 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 Alphabet i.e. Letters (A-Z), 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>
Alphabet validation using OnKeyPress event in 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 Alphabet i.e. Letters (A-Z) 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.
var regex = /^[A-Za-z]+$/;
//Validate TextBox value against the Regex.
var isValid = regex.test(String.fromCharCode(keyCode));
if (!isValid) {
$("#lblError").html("Only Alphabets allowed.");
}
return isValid;
});
});
</script>
Screenshot
![Perform Alphabet validation (Letters) using OnKeyPress in jQuery]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
