Form Level Error Displays
Last updated: October 8, 2015 at 13:24 pm

Form level errors occur whenever a form is submitted and the system is unable to process the data.


Visual example of the element:


What problem does this element or pattern solve?
In addition to form field errors, you may also need to display error messages that apply to an entire form. These messages are usually more generic in nature and normally appear at the top of the page or form after a forced refresh. But they can provide important information to the user, particularly when an error occurs after submission and all the fields were properly validated.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:


Detailed specifications
  • Define the display logic for form-level error messages. When should they be displayed? Can you display more than one error at a time?
  • Cover the positioning, size and shape of the error messages.
  • Discuss any iconography and/or color variations needed to differentiate error types and their severity.
  • When a message appears, does your content need to be repositioned or shifted? If possible, include a before and after screen shot.
  • Like field error displays, give examples of the approved “voice” for your error messages. Attempt to minimize negative connotations as much as possible and remember to suggest a solution.


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:
form validation error, form error message, form submit failure, 502, 504
Related elements within this Style Framework:

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



Owners and governance
UX or design 0wner
John Designowner
Email: design.owner@yourcompany.com
Business or marketing owner
Mary Businessowner
Email: business.owner@yourcompany.com
Development owner
Mike Devowner
Email: development.owner@yourcompany.com


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