email article printer friendly get the code more resources

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.

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 interface—such as scriptlets and DHTML behaviors, now called "attached" behaviors—element 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.

Figure 1. Check Input Value

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 numbers—I'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 control—either a span or any other control you specify—that 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.