Form Validation

Interaction Specs

Interaction Specs: 

1. Click on 'Submit' button with error.

User may accidentally submit the form without entering proper information or entering wrong information on the form.

2. Page level Passive Alert Message

The system displays Passive Alert message on top of the page (below page title) for system to give an highlight on overall page status on the form that couldn’t be submitted due to insufficient info provided.

3. Contextual Alert Message.

The system also displays a contextual alert message below the form elements control such as drop down, text field, and radio button to show where the error is located on the page.

The Form UI controls should be outlined in red, the contextual alert message should be displayed with a red alert icon.

Visual Specs

Visual Specs: 

Pattern Summary

Pattern Summary (Unity): 

Why Use This Pattern

Form Validation provides specific contextual instructions on how to solve the problem. The validation message is presented next to a control or section of a form that has a problem as in the case incorrect or malformed data. It verifies that a form has all required information and that it is in the correct format. It validates user input at the field level, at the page level, and when the user submits a dialog or wizard

What is the Solution

Provide field-level validation so that users get immediate feedback when a problem is found, while focus is in a text input box, or immediately after it loses focus. A text box with invalid data has a red border. When the user moves the pointer over the text box, a red tooltip (contectual message) appears.

Form validation used to occur at the server, after the user had entered all necessary data and then pressed the 'Submit' button. If some of the data that had been entered by the user was in the wrong form or was simply missing, the system would have to send all the data back to the user, and request that the form be resubmitted with correct information.

When to Use This Pattern

  • Use when the form must be checked to ensure data entered into each form field conforms to pre-established criteria.
  • The data that is entered must be checked for correct form and value.

Do Not Use This Pattern

Do not use for page level system alert or error handling.

GUI Kit

GUI Kit contains all Unity Light theme patterns in vector format

Adobe Illustrator Download 2.1 MB
Vector PDF Download 2.7 MB

Updated November 2015