Common mistakes in form validation

Here are some of the most common mistakes I've seen doing so far while validating forms:

Partial submission

This mistake occurs when a user fills a form without providing all data in the correct format. Generally, valid data is inserted in the database, but the page shows some validation errors and the user must refill the form. What happens then? Simply put, the user get some messages such as "username already in use" because the validation script compares user data with what has already been inserted in the database. So the user must choose another username, another email and so on. Quite frustrating.

Solution

Avoid partial submission. Use sticky forms to keep valid data within form fields, but don't insert anything in the database until the user fills correctly all the fields.

Overuse of regular expressions

Using regular expressions is fine, but this kind of approach should be never overused. Certain data formats are really hard to keep within a regular expression pattern. For example, what is the correct pattern for a person name? In PHP, for instance, the overuse of regular expressions may lead to some performance issues, though in rare cases.

Solution

Use regular expressions only when necessary. If you can, use string manipulation or data types function instead.

Confusing error messages

Error messages should be descriptive, self-explanatory and informative. Otherwise, they only tend to confuse the user.

Solution

Use descriptive and meaningful error messages, such as Phone numbers can only contain digits.

Lack of information

Most websites don't provide information about how a form should be filled. For example, they say that a field with an asterisk is mandatory, but they don't say in which format it should be.

Solution

Provide as much information as you can about how a form should be filled in order to avoid typos and errors.

Inaccessible information

Most websites still rely on colors, visual clues and a massive use of JavaScript to provide information. This kind of approach makes the form almost inaccessible for people with disabilities who use assistive technologies (such as screen readers and textual browsers).

Solution

Make sure that your form is still accessible without colors, visual clues, or JavaScript.

Leave a Reply

Note: Only a member of this blog may post a comment.