Provides feedback to users as they complete and submit forms.

Examples

Field-level Errors

Providing an error message below any fields with errors make it easy for users to find the form elements they need to fix. Field-level errors may be displayed:

  • As users tab through the form, following the rules of inline validation as described below.
  • Upon submission of the form. If the form is longer than 3-5 fields which can be viewed all on one mobile screen, any inline errors upon submission should be accompanied by a form-level error (described below) to let users know that there are fields they need to fix, in case those fields are off screen.

Form-level Errors

A form-level error is a message that cannot be associated with a specific field. It generally appears after users press submit, above the submit button.

Inline Validation

  • Help users correct errors as soon as possible by providing inline validation. However, make sure that this does not distract from completion.
  • Inline success validation should only be used on fields with complex requirements, such as creating a password. Using success validation everywhere clutters the form and can make it harder for users to check their work.
  • Error messages should only be displayed after users leave the field, to ensure an error is not presented before they have finished typing.
  • Keep in mind that users may not tab through every field to trigger inline validation. Users should be able to submit the form to trigger errors and be guided to the fields they missed.

Accepted symbols: _ ! . & @

Please create a valid password to continue. Valid passwords have 6-12 characters, at least 1 number and at least 1 letter. Spaces aren't allowed but the following symbols are: _ ! . & @

Validation Decision Tree

  • Form not touched then do nothing, no errors
  • Form touched and submitted then display all errors based on validators
  • Form touched but not submitted then
    • Focus or change on control with no previous error, do nothing
    • Focus or change on control with previous error, keep the error
    • On blur, control with invalid value, display error
    • On blur, control with valid value, remove error

Accessibility