Cover by Cody Lindley

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

11.1. Validating Forms

Problem

Most registration forms require input of email address, a password (two times), a username, and some other information, like a birth date. This applies to email services, web shops, or forums.

It’s easy to imagine John Doe, who wants to buy a new monitor at some web shop where the registration also requires the input of a captcha (a barely legible group of random characters to tell the difference between a human and a bot). He fills out the complete form, which takes some time, and then submits the form. After about five seconds, the form is displayed again, with some error message at the top: he forgot to fill out the street field. He fixes that and submits again. Another five seconds pass: now he missed the password and captcha field! Huh? He did fill those in, but he had to fill them in again after the failed first attempt.

Such late feedback can be very frustrating and can ruin an experience that was otherwise good, especially when security concerns limit functionality—here causing the empty password and captcha fields.

Solution

One way to improve the situation is to add client-side validation. The basic idea is to give the user feedback as early as possible, without annoying him. It shouldn’t be possible to submit an invalid form, avoiding the issue of filling in passwords or captchas again.

It also makes sense to highlight errors on fields after they are filled in, as in the case of an invalid email address like . Highlighting fields ...

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required