Inside Technique : Custom Input Validation
By Scott Isaacs

In this example, we demonstrate a technique for using Internet Explorer 4.0's TextRange object to validate the user's input as they type. The TextRange object is very useful for manipulating the contents of an element without effecting the user's selection. This is very important with text boxes to ensure the user's insertion point is always maintained as they type. In the following example are text boxes that only accept positive numbers with a fixed number of digits following the decimal point. If you are using Internet Explorer 4.0 (windows), try typing in various values into the fields:

In Internet Explorer 4.0 or later, the above text boxes only accept valid positive numbers. You are only allowed to enter the decimal point in the appropriate place, and you can't create numbers that don't fit the specified rule. While this appears fairly simple, the actual code and concepts behind this demonstration are quite detailed. The code needs to consider where the user's insertion point in relation to the other digits and what characters are selected. For example, when the decimal point is selected, typing a new decimal point is a valid operation. If the decimal point is not selected, a second decimal point cannot be typed.

Next, we show how we made this function generically reusable by examining how to set-up the text boxes for this example.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.