• Ready for review

    • Validation

    Owned by Sara Greenwood
    Last updated: Nov 30, 2023
    2 min read

    Focused State

    • Colour: #337ab7

    • Box-shadow

    Success State

    • Colour: #3c763d

    • Checkmark: glyphicon-ok

    • Focused state: box-shadow

    Error State

    • Colour: #a94442

    • Icon: glyphicon-remove

    • Error message appears below the field in red

    • Focus state: box-shadow

    Types of Validation

    field level validation -> when we're checking to see if the field is blank or conforms to a particular format. e.g. did you enter the phone number in the correct format including area code

    form level validation-> when we're validating if what the user has entered allows them to go to the next step in the process. e.g. is the area code 416 or 647? if it is then continue or if it isn't exit the application

    Guidance

    • Keep language simple. Avoid extra words like “please” and “sorry”.

    • Where is the error? Use the field label name to avoid ambiguity.

    • What is the error? Is the format invalid, are there illegal characters, etc.

    • How do I fix it? Be specific. Instead of just saying “the format is invalid”, tell the user what the valid format is.

    Sample messages for common errors

    Error example

    Message text

    Error example

    Message text

    Mandatory field

    <field> is required and cannot be left blank.

    Invalid postal code

    Postal code must be in the format of M1M 1M1.

    Invalid phone number

    The phone number must in the format of ###-###-####.

    Invalid email address

    The value is not a valid email address.

    Email addresses do not match

    The email addresses must match.

    References: