Inline validation

January, 2022


Providing feedback when the user leaves the field is probably the best default behavior because validation occurs after the entry is made explicit. The primary principle of good form validation is this: Talk to the user! Inline validation is a method to check the validity of input and give feedback before submission. In theory, it motivates the customers by confirming they are on the right track when they type correctly, providing satisfaction. But it is also a subject of debate because error messages tends to be ignored.

Predictable format

Data required has to be given in a particular format (zip codes, phone numbers, CC numbers, email address etc..) or with a limit of caractere.
Use color and icon(s) to differentiate success and errors and provide help text (for error).

Valid data

Data is checked by the system.
Use color and icon to inform about validity/no validity of data and provide help text (for error).

Matching data

Use color and icon and provide help text in case of no matching.

You can also check the consistency of different data and put an error if data 2 cannot work with data 1.

Empty fields

Don't validate if:

  • user don't click on the field
  • user click and leave the field
  • user type and erase and leave the field

    • Immediately showing an error when a user clicks into a field is annoying, misleading, and distracting.

    Password

    Use tooltip to inform about password policy and check instantly.

    Character or word count

    Use help text to count characters and check instantly.

    Sources

  • How to Report Errors in Forms: 10 Design Guidelines by Nielsen Norman
  • Should I use Inline Validation in my Online Form? by Zuco
  • Forms Need Validation by Andrew Coyle