Getting ready

Once again, we are going to need a blank HTML document with the latest version of jQuery to work through this recipe. Create recipe-6.html and ensure that you have jQuery downloaded and ready to go.

How to do it…

Learn how to restrict a user from entering certain characters into a text input using jQuery by performing the following steps:

How it works…

We attach the keypress event handler to the .myInput element and specify the event variable as an argument as shown in the following code snippet:

$('.myInput').keypress(function (event) {

});

This allows us to specify commands to be executed on keypress when the .myInput field has focus.

We declare a regular expression variable which we can use to evaluate whether the entered character is alphanumeric.

var regex = new RegExp("^[a-zA-Z0-9]+$");

Each key on the keyboard has a unique numeric code that can be accessed using event.which. Then, to determine if the key pressed is alphanumeric, we need to retrieve its string value (for example, alphanumeric value for f is 102 ), which can be done with the following code:

var key = String.fromCharCode(event.which);

This now allows us to apply the regular expression and determine if it meets our alphanumeric requirements. If it does not, we prevent such key value from being entered by returning false as follows:

if (!regex.test(key)) {
  return false;
}

We allow the character to be displayed in the textbox if the pressed key was a valid alphanumeric character.

There's more...

It is important to understand that client-side validation such as this is a powerful user experience feature, but it should never be solely relied upon. Any validation done on the client side should always be mirrored on the server. This is because it is extremely easy for a user to bypass client-side validation. It is often as easy as turning off JavaScript from the browser settings. Remember that any client-side language such as JavaScript is completely open to manipulation by the end user. For this reason, client-side validation should only be used as a user experience enhancement and never a form of explicit validation of data input.

See also