If there’s one thing that drives me insane online, it’s when input forms allow me to enter incorrect data, only to point out the mistake after I try and submit it. It seems like half the forms I submit have to be refilled and submitted over again because I didn’t include an uppercase letter in my password, or I did, or the password can only be numerical, or some other requirement nobody thought to mention.

The way the brain works, we look for solutions based on the tools in front of us. You don’t enter uppercase letters at the ATM do you? No, because the ATM keypad only has numbers. You might hit the wrong number by mistake, but you’ve never tried to enter your email address, or your mother’s maiden name.

Therein lies the problem, the keyboard that you use complicates inputting data online. It probably has between 75 and 100 keys and even more characters are easily accessible by holding multi-key combinations. Using it to log into Facebook is rather like popping out for milk in a Ferrari.
Of course, your keyboard has to have more input options than any particular form field requires, because it’s a multi-use tool; you can’t practically have a different keyboard for every possible type of
input.

This leads to a serious usability issue: users are constantly being asked to ‘correct’ their information to suit a form. That’s a great way to increase frustration and lose business.

Touchscreen devices have made great strides in this area by modifying the onscreen keyboard to tailor the types of input possible, to the data required; enter an email address on an iPhone for example, and you won’t be able to enter a space by mistake, because the spacebar isn’t provided.

Until we’re all working on touchscreens, we need a temporary solution, and there’s actually quite a simple one: using jQuery we can slip a layer of intelligence between the keyboard and the input field and only accept the data if it falls within expected bounds, ignoring anything outside those bounds, confident that it’s an error.
First, we need to set up an input field in HTML that we want to restrict, a phone number for example:

<fieldset>
<label for="phone">Phone:</label>
<input type="text" id="phone" />
</fieldset>

Then, in the document’s head, we need to import jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

And immediately afterwards add the following script:

<script type="text/javascript">
$(document).ready(function() {
    $('.phoneInput').keypress(function(key) {
        if(key.charCode < 48 || key.charCode > 57) return false;
    });
</script>

This script runs once the document is ready, attaching a keypress method to the .phoneInput input field. We then detect which key has been pressed based on its charCode property — the number 0 is assigned the code 48, 1 is 49 and so forth — any key that’s outside our range should return false. If the method returns false the browser will simply ignore the keystroke.

This means that if the user hits any key that isn’t 0–9 the input will be ignored, effectively restricting the input to numbers.

We can apply the same technique to almost any field, building up complex rules using logical AND and logical OR. For example, if we wanted to restrict input for a surname, we would need to restrict input to lowercase letters (97–122), uppercase characters (65 – 90) and the occasional hyphen (45):

$('.surnameInput').keypress(function(key) {
if((key.charCode < 97 || key.charCode > 122) && (key.charCode < 65 || key.charCode > 90) && (key.charCode != 45)) return false;
});

This code is a progressive enhancement. It will take some of the strain off your server validation, but that doesn’t mean that you shouldn’t also validate information you’re gathering.

Prevention, as the saying goes, is better than cure; and using this tip you’ll see a reduction in the number of people who start, but don’t complete your forms, especially when complex data requirements are involved.