Inline validation

January, 2022


Inline validation helps users to input correct information while submitting a form. Ideally, all validation should be inline and in real-time: that is, as soon as the user has finished filling in a field, an indicator should appear nearby if the field contains an error.

Key guidelines for inline validation


Validation types
  • Lazy validation - validate when the user leaves a field and keep the error active until the user corrects and leaves the field again
  • Eager validation - validate when the user leaves a field. Keep the error active while user is correcting, but remove it as soon as the input is valid (don't wait until the user leaves the field).
  • Aggressive validation - validate as soon the user accesses the field and hits any key

    • Use eager of aggressive validation, based on the specific use case (examples will follow).

    Color

    Mark the field that failed validation in red. To assist color-blind users, add an icon to the left of the validation message.

    Message
  • Display an error message below the field
  • Use a clear and concise language
  • Adapt the message based on the actual error

    • Validating limited character length

    Validation mode: Aggressive
    If you know the input character length, instantly validate the field by counting the characters. This avoids unpleasant surprises for the users.

    Validating predictable formats

    Validation mode: Eager

  • Validate predictable input formats (such as email address, postal codes, telephone numbers or credit card numbers...) after the user has left the field
  • Display a message that shows the format requirements
  • Remove the error as soon the user has corrected it (don't wait user to leave the field)

    • This can be problematic for internationalization because the format is not always known and can vary depending on the location.

    Validating empty fields

    Validation mode: None
    Don't apply inline validation on empty fields. Why? Inline validation applies to any value entered in a field, and empty fields have no value.
    So, don't validate when:

  • The user did not focus the input field
  • The user focused but left the field
  • The user started to type, deleted the text and left the field

    • Validating free text fields

    Validation mode: None
    Do not use inline validation on free text fields.

    Validating password creation and recovery fields

    Validation mode: Aggressive

  • Validate passwords as the user is typing
  • Use instant inline validation that shows errors and success against the requirements

    • Validating matching field input

    Validation mode: Eager
    How to validate interdependent fields, such as email and password confirmations?

  • Check the fields after the user completes the second field
  • In case the fields don't match, trigger inline validation
  • Keep the validation error message active until the fields match and then remove

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

    Validating fields with database verification

    Validation mode: Eager (if possible)

  • If an input field needs to be verified by a backend system, verify it when the user leaves the field
  • If there is an error, display the inline validation with a message that explains the error (if possible)
  • if the database verification allows it, remove the error message as soon the user has corrected it

    • 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