Validation - Usage

Basic Guidelines

The Validation component is used for validating the content/selection within a form. It is already built into the Control Field, Field, Text Input, Select and Textarea components.

Form fields are validated on submit, which means the form is either sent without issues, or updated to show an error. The validation error is removed when the user edits the input field. If errors are rectified, the form needs to be submitted again to trigger another validation. If the form passes all validation requirements, it is submitted and it’s not necessary to display a success state.

There are a few ways an error can occur:

• A Text Input field is required but was left blank before submitting
• Content with a Text Input field did not reach validation criteria
• A Checkbox or Radio selection was needed to proceed

The error message will be displayed directly beneath the input field, above any in-line messaging.

The Success variant is available for legacy reasons, but not implicitly necessary.

Content Guidelines

Error messages need to fulfil three goals:

1. Clearly and simply explain there is a problem and what the problem is

2. Provide a solution so users can complete what they are trying to achieve

3. Turn the delay into an experience that is as pleasant as possible.

All Validation messages should be in sentence case to be consistent with all other content, and should not have a full stop at the end.

Alignment

Validation is already built into the majority of components that require validation, however for some components this isn’t possible.

When the Validation component is used with Radio Cards, it must always appear above any in-line messaging, 16px below the last field.