This chapter is from the book
This chapter is from the book
This chapter is from the book
Guideline 13
Validate entries (as soon as possible)
You can improve conversion rates and make customers' lives easier by validating form responses on the spot. Check to make sure that email addresses contain an at sign (@) and no spaces, numbers are actually numbers, and other fields are filled in with acceptable responses.
AOL
New York, Alaska? http://www.aol.com
I entered an invalid email (".og" rather than ".org") along with an impossible city/state/zip combination (that is, the city is New York, the state is Alaska, and the zip code is in Illinois) at AOL's sign-up page. Yet AOL accepts all this information and allows me to continue with the sign-up process. Instead, the site should validate entries such as these to make sure that my email address is properly formatted and that the city/state/zip combo is real.
){kind=small}
Figure
4.22UPS
Match City and Zip http://www.ups.com
UPS knows zip code errors are a common cause of shipping mistakes. That's why they validate zip codes and make sure the city and zip match up before a shipment order is submitted. That way, both the customer and company come out a winner.
){kind=small}
Figure
4.23In this case, I accidentally entered my destination as a city in Illinois with a New York zip code. UPS catches the error and offers a pull-down menu with recommended alternatives (including appropriate matches for both the city and zip code I entered).
Most sites don't validate addresses on the spot, meaning this sort of error isn't caught until it's too late. UPS's smart validating saves me time and keeps my shipment on track.
As if...
Why is this good? It's as if I'm buying new tires for my car. I pick out a set, but the salesclerk informs me that this particular set won't fit my car. He then shows me another set of tires that will fit.
Motley Fool
Enter a Valid Number http://www.fool.com
The Motley Fool site spots an improperly formatted phone number right away. This message explains the proper format for the entry. The site could go a step further and provide an example, too.
){kind=small}
Figure
4.24NBA
Invalid Email http://www.nba.com
The NBA site gives an alert that the email field is not completed properly. (It was left blank.) Friendlier language could be used, however. A better message would read, "You didn't enter a valid email address (for example: shaq_oneil@lalakers.com). Please try again."
){kind=small}
Figure
4.25Tech info
Validation scripts Online resources offer free cut-and-paste JavaScript examples to use at your site. For example, The JavaScript Source (http://javascript.internet.com) offers a handy email address validation script that makes sure people don't enter multiple at signs (@s) or continuous dots (.s) in the address (for instance, james@@hotmail.com and susan@bbc..co.uk).
ATI
Check Compatibility http://www.ati.com
I went to download a driver at ATI. I selected "Mac OS" as my operating system, but then mistakenly chose a non-Mac product. Thankfully, ATI checks to make sure that the OS and product are compatible. The site spots the error and informs me that I need to select a Mac product before moving on. This saves me time and frustration.
)
Figure
4.26Tech info
Server-side validation Keep in mind that server-side validation is the only fail-safe method for error checking. JavaScript is helpful because it can be used to validate forms quickly (no time-consuming server trip is required) but can be problematic as a standalone solution because some people's browsers may have it disabled. An ideal solution is to offer both: JavaScript as the first line of defense and a server-side check as the backup.
Overvalidation
Don't overvalidate forms, however. If you have international visitors, you may have to account for country-specific data (for instance, no zip code, an international phone number with a plus sign [+] at the beginning, and so on). You want to make sure you don't shut down these visitors with excessive validation techniques. In some cases, you may want to allow visitors to override error messages and submit the data as is.