↑
Main Page

Allowing/blocking characters in text boxes

In handling data entry, you must limit the data that a user can enter. For instance, if a field requires a

number and a user enters a letter, it should be recognized as invalid. Before JavaScript, a round trip to

the server was necessary to do this type of validation. With JavaScript, not only can the client validate

user data, it can also prevent the user from ever entering invalid data.

Blocking invalid characters

The first method is to block invalid characters only. Because many fields within one form require differ-

ent types of characters to be entered, you must be able to specify the characters to block on a field-by-

field basis. The ideal way to do this would be to add an attribute to the HTML

element that

specifies the invalid characters, such as this:

The previous example would ideally block the numbers 0 through 9 from being entered into the text box.

Of course, first you need a method to use for this purpose.

The

TextUtil.block()

method accepts two arguments: the text box to act on and the

event

object.

Just like

TextUtil.isNotMax()

, this method is called in the

onkeypress

event handler, and it returns

true

when the character should be allowed or

false

if it should not. The body of the method contains

only four lines of code:

TextUtil.blockChars = function (oTextbox, oEvent) {

oEvent = EventUtil.formatEvent(oEvent);

var sInvalidChars = oTextbox.getAttribute(“invalidchars”);

var sChar = String.fromCharCode(oEvent.charCode);

var bIsValidChar = sInvalidChars.indexOf(sChar) == -1;

return bIsValidChar || oEvent.ctrlKey;

};

Notice the use of the

EventUtil.formatEvent()

method defined earlier in the book, which is necessary

whenever the

event

object is passed directly into a method without using the

EventUtil.getEvent()

method. After the event object is properly formatted, the method stores the

invalidchars

attribute in a

variable and then extracts the character to be entered in the text box using the

charCode

property and

String.fromCharCode()

. At that point, the invalid characters are stored in

sInvalidChars

and the

character to be inserted is stored in

sChar

. The only thing left to do is to determine if that character exists

inside the

sInvalidChars

string by using the

indexOf()

method. You’ll recall that

indexOf()

returns

–1 if the substring (or in this case, the character) doesn’t exist in the string. So

bIsValidChar true

when the character doesn’t exist in

sInvalidChars

. The return statement returns the logical OR of

bIsValidChar

and

oEvent.ctrlKey

. The OR condition is necessary because if the Ctrl key is down

when a character is pressed (such as Ctrl + C for copy), this method would block it. So, if the character is

valid, the method returns

true

, and if the Ctrl key is down, it returns

true

349

Forms and Data Integrity

14_579088 ch11.qxd 3/28/05 11:40 AM Page 349