Create a Web form data format mask with JavaScript

You can easily validate Web form data by creating a format mask in JavaScript. We'll give you the code so you can get started immediately.

This article originally appeared in the Web Development e-newsletter.

In a Web application, it’s important to validate data before submitting it to the server. It saves you time and reduces network traffic. One of the most important parts of validating data is controlling input at the user level.

In the past, client-server applications have been able to control user input in the form of a masked input control that limits the user's ability to enter information outside acceptable values. For instance, a date masked input control usually restricts the user to entering numbers that fit an mm/dd/yyyy mask.

In DHTML, text input is supplied through an INPUT element or a TEXTAREA element, but functionality is limited. However, you can provide functionality through events—particularly the onkeydown event. This event occurs when a user presses a key while the element has focus. You can then capture this event and restrict the user to supply only numeric values.

In the following example, I create a simple INPUT element that contains an initial value of mm/dd/yyyy and allows the user to input only numeric values. When the user enters a numeric value, that value replaces the first alphabetic character in the INPUT value. For example, when a user types 3 while the value of the INPUT element is 12/2d/yyyy, the value will change to 12/23/yyyy.

Manage input on a Web form 
Restricting keyboard input reduces end users' frustration when they enter inappropriate data into a field. This article offers a client-side JavaScript you can employ to validate data that users enter into fields.

Grab the code in Listing A and try it yourself. You'll notice that the HTML in the listing simply contains an INPUT element with a default value of mm/dd/yyyy, and the onkeydown event is assigned to the function date_onkeydown.

In JavaScript, the String object is given a couple more methods: trim and padL. These two functions trim the white space surrounding a string and create a string padded to a particular length with a given character. The date_onkeydown function first checks to see whether the element is readOnly, and if it is, it exits gracefully. Otherwise, it continues to assign the keyCode property of the window.event object to a local variable.

The srcElement property, which is the element that created the event, is also stored to a local variable. First, the function checks to see whether the user entered a capital T. If so, the element’s value is set to the current date. Next, the function processes the keyCode value to make sure the user entered a numeric value. The keyCodes 48 to 57 pertain to the row of numbers at the top of the keyboard. The keyCodes 96 to 105 are for the numbers on the numeric keypad, in which case the value is reduced to convert this keyCode to the appropriate character with the fromCharCode method of the String object.

The first matching character in the value of the INPUT element is replaced with the user-entered number. This continues with each successive keystroke until there are no matching characters. If the user presses the [Backspace] key (keyCode 8), the idea is to replace the last number with the appropriate mask letter. If the value of the INPUT element doesn’t match the mm/dd/yyyy format, the whole value is replaced with mm/dd/yyyy. Finally, if the user presses any key other than [Tab] (keyCode 9), the keystroke is invalidated.

You still need to check the value of the INPUT element to ensure that the value entered is a valid date. However, this will be easier to do since the user will be able to enter the value only in the particular format. This formatting eliminates the user's ability to enter dates in other formats, such as yyyy/mm/dd. You can also use this general concept to create other types of masked inputs, such as a currency mask.



Editor's Picks