Turbocharge Your HTML Pages
Extend HTML's functionality with IE 5.5's new element behaviors. Here's how to build an element behavior that validates user input.
by A. Russell Jones
Web applications offer developers and users several advantages over "fat client" applications: They're easy to distribute and upgrade, and can be accessible from anywhere. But you lose some control over the user interface that you had with traditional desktop apps.
Internet Explorer (IE) 5.5 or later, Web server that can serve ASP files, VBScript or other scripting language compatible with the Microsoft Scripting Host
Applications often need to validate data to ensure the suitability of user-entered information. For example, a travel application requires transportation dates to be in the future, and a manufacturing application might require a measurement-specification number to lie within a specific range or a part-identification string to match a pattern.
You can validate data in a Web application either on the server or client after the user has completed the form, but both options present problems. Server-based validation requires a round trip, delaying user feedback and increasing development complexity. Client-side validation requires either customized scripts for each page or generic scripts coupled with a rigid element naming convention.
Fortunately, browser-based interfaces are growing up. With Internet Explorer (IE) 5.5, Microsoft introduced an HTML extension called element behaviors, or HTML behaviors. As with earlier attempts at separating code from the user interfacesuch as scriptlets and DHTML behaviors, now called "attached" behaviorselement behaviors associate properties, events, and scripts with tag elements. Unlike earlier versions, however, you can attach element behaviors not only to the standard HTML elements, but also to custom elements you create and define yourself. In other words, element behaviors give HTML some of the extensibility that has made XML so popular. They give you control of client-side scripts without the restrictions of naming conventions.
This article shows you how to build an element behavior for a browser-based, data-validating input control in IE 5.5 or later that accepts only numbersI'll call it NumberInput. You can specify a range for the number (minimum and maximum acceptable values), the type of number the control accepts (integer or decimal), and whether the field is required or optional. The control always has an associated controleither a span or any other control you specifythat displays messages whenever a user violates any condition required for successful validation (see Figure 1). NumberInput shows the power of element behaviors and lets you duplicate some of the client-side functionality of the new validation controls in ASP.NET.
Back to top