Field Level Validation and Errors
Last updated: September 14, 2015 at 13:35 pm

Field level errors are shown whenever the input to a particular field will not validate.

Visual example of the element:

What problem does this element or pattern solve?
There is nothing more frustrating to users than filling out a long form, only to hit submit and have the page reappear with an error. Sadly, technological constraints can sometimes make this situation unavoidable. However, as UX professionals we should always take it upon ourselves to do all we can to alert the user of input problems as soon as they happen.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:

Detailed specifications

Specifications To Consider

  • Will your forms use inline field validation? Or will the data be validated after the form is submitted?
  • If validating inline, present the logic and visual stying for your valid/invalid markers.
  • If the form does not validate after submission, will all the fields retain state? Or will certain fields, such as passwords or credit card expiration dates, be cleared?
  • If the screen is redrawn after validation, show the messaging and visual treatment to idenitfy the problematic field. Will it change color or add a border? Where will terror description and repair suggestion be presented?
  • If the form or copy must shift to accommodate your error messages, show the before and after positioning.
  • Give examples of the approved “voice” for your messages. Avoid using negative words as they may make users believe the situation is worse than it is, increasing the risk they will abandon the entire process.

Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository

Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
field error, error notification, field level validation, field error message
Related elements within this Style Framework:

Not Applicable (Remember: no field should be blank!)

Owners and governance
UX or design 0wner
John Designowner
Business or marketing owner
Mary Businessowner
Development owner
Mike Devowner

Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)

Comments & Questions

Leave a Reply