Validation
Form 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
When a field contains invalid data
an error or warning message should be displayed
the user should still be able to move freely around the form or page
invalid data should not be saved
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.
When a mandatory field is empty the error message should state: “Please fill this in to continue”.
Insert example.
When the input format is wrong, the error message should follow the format: {Field label} must {description}.
Email must use the format name@domain
Insert example
URL must include “http” or “https”
Insert 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.
Error
Insert example
Warning
Insert example
On save:
All invalid fields should be highlighted.
Focus should move to the first invalid field.