Client-side validation of text boxes

Developers often have a hard time deciding how to format text boxes when the user's entry can be in one of several formats. Figure 5 shows an example of the variety of ways users could enter a phone number in an open text box.

Figure 5. Phone entry variations

One solution developers sometimes come up with is to create a pre-formatted text box to more clearly indicate how the data should be entered (see Figure 6).

Figure 6. Formatted phone number text box

While pre-formatted text boxes will make text entry requirements more clear, splitting one field into three fields can also make data entry more cumbersome. Also, because only the first field has a field label, users with screenreaders might be confused about what should be entered in the second and third fields.

A more user-friendly solution is to develop a client-side script that could not only validate the data, but also could remove non-essential characters. Thus the question of how to format the text box is no longer an issue.