Restricting Field Input

Sometimes you have a need for input fields on your form where only certain characters make sense. For example a phone number may only contain numbers, spaces, dashes, and parentheses (around the area code). We could validate the field along with the rest of the form when the form is ready to be submitted but at that time all we would be able to do is to report that the field contains invalid characters and ask that the field be corrected before allowing the form to be submitted. Wouldn't it be better if we could limit the characters that can be entered into the field in the first place?

As you will see if you try to enter something into the following field, only valid characters that form part of a phone number actually appear in the field regardless of what you type. The order of the characters isn't validated but which characters can be entered in the field is restricted to those that may legitimately appear in the expected entry.


We can restrict the characters that will be accepted as input into any of our input fields by including the following Javascript into the head section of our page.

var phone = "()- 0123456789";
var numb = "0123456789";
var alpha = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ ";
function res(t,v){
var w = "";
for (i=0; i < t.value.length; i++) {
x = t.value.charAt(i);
if (v.indexOf(x,0) != -1)
w += x;
t.value = w;

We can add as many restricted character ranges as we want similar to the phone, numb, and alpha fields I have defined here. You will want to add the ones for the particular character restrictions that you want to apply to fields on your forms. Also if you don't require the three that I have defined then you can delete them although you may want to keep them in case you need them in the future.

All we need to do now is to add the restriction to the particular field(s) to which we want it to apply. For the above phone number field I added onkeyup="res(this,phone);" to the input field (the entire field declaration is <input type="text" size="18" onkeyup="res(this,phone);" />).

You can add different restrictions to different fields on the same form using the same code because the first parameter passed is "this" meaning the field to be validated and the second parameter passed is the string of valid characters that the field is to accept so all you need to do for each field is to specify the correct field in the second parameter that contains the appropriate valid characters. If you have a special set of characters that you want to validate for a single field you could even specify the values in the onkeyup itself (eg. onkeyup="res(this,'abcd');" to restrict input to just a, b, c, and d).

This code does not work with Netscape 4 but does work with Netscape 6. Also note that while the restriction applies in Opera 5 and 7 the position within the field is reset to the beginning each validation resulting in the text being entered backwards, it works correctly in Opera 6.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow