Error Summary

Example

 
<div class="cgds alert alert-danger">
  <h3>There is a problem with your submission</h3>
  <a class="alert-link text-danger" href="#">The date format entered is wrong</a>
  <br />
  <a class="alert-link text-danger" href="#">Address must be filled in</a>
  <br />
  <a class="alert-link text-danger" href="#">Email address is not valid</a>
</div>

        

Usage guidelines

• When you need to show users a summary of errors that they have made, usually upon submission of a form
• When you want to be able to link to the specific error on a page

• As a standalone for error messaging. If you require the error summary, it should always be used together with inline validation.

Usability guidelines

Error summary must always be at the top
This is to ensure that users will see the error summary when the page loads

Clear and concise message
This ensures that the users know exactly what errors there are and are able to rectify them. Having unclear messaging may annoy the user and lead to frustration

Link to error
Users will be able to quickly access the errors and rectify them without having to go through the entire page