Validation rules are run when data is provided to the system to check that it conforms. This guide focuses on validating data which is inputted manually by users via fields.
Validation can be invoked by one of two actions, either when the user:
Dirties a field - i.e. when they enter some content and then move away from the field - check this.
Selects “Save”
TBC - the rationale for each option. On the fly vs Save.
When a field contains invalid data
An error or warning message should be displayed beneath the field
Invalid data should not be saved
The user should be able to move freely around the form or page and not locked to the field
If the user leaves the form or page they should see the standard “Unsaved changes” warning
Feedback message
When a field contains invalid content, it should be made clear to the user what the problem is and how they can fix it. The message should always start with the field label and be short.
Empty mandatory field
When a mandatory field is empty the error message should state: “Enter the {field label}”.
Insert example.
Invalid format
When the input format is wrong, the error message should follow the format:
“{field label} must {description}”
Fields expecting an email address check for the format name@domain. The error message should read:
“{field label} must be an email address”
Fields expecting a URL check that http or https is included. The error message should read:
“{field label} must begin “http” or “https”
When a field’s content does not conform to data restriction rules in place, the error message should follow the same format as described. For example, “Latitude must be a number between -90 and 90”
Feedback presentation
Each validation message should be displayed underneath the relevant field. If the message takes up the full width of the field it should then wrap onto another row.
When a field in an error or warning state:
The field background colour change to the standard error or warning background colour
Field label text and feedback text are both displayed in the standard error or warning foreground colour
Validation on save
When validation is run on save and errors are found:
All invalid fields should be highlighted.
Focus should move to the first invalid field.