CCM Web Design Standards

Form Validation

Error States

Form validation examples for different form controls. When to use: When you need to collect required data in order to complete submission.

Required Field Indicator

* Required Field
  • When to use: always display below the form heading on forms which have 1 or more items required for form submission.
  • If form has directional text below heading, ‘* Required Field’ will go below all text, just before the beginning of form.
  • ALWAYS include a space before the asterisk.

Standard Text Input, Without Errors

Standard Text Input, Required Error State

First Call of Page Form Validation

  • Site will scroll to the first field that errored from the top
  • Correct and incorrect data will persist
  • Tab order is top to bottom and on two column forms, top to bottom & left to right
  • Once data passes all validation checks on element and a user clicks outside of the field, the validated CSS should be removed.

Standard Text Input, Additional Validation Check State

On fields which have additional validation checks (email, numeric, websites, etc.) Customized error message will appear based on additional validation checks Elements containing additional validation checks: Phone, Email, Zip (Postal Code), Number, Decimal.

Error State for Text Areas (Multi-line Inputs)

Error State for Select Menus (Dropdowns)

Error State for Checkboxes

Error State for Radio Buttons

Validation Alert Message

There was an error on the form. Please fill in or correct the fields.
  • When to use: When all required fields are not filled out to the appropriate criteria.
  • Message should always appear right above the Submit button on the bottom of the form.
  • If form goes below the fold, display message at the top of the form in addition to the bottom of the form.
  • Below the Fold is defined as any content that goes below 768px.
  • Top placement: Message should always appear right below ‘* Required Field’.
  • Standard error message text: “There was an error on the form. Please fill in or correct the fields.”
  • Message(s) will hide once all required data has been correctly entered in fields.
  • CSS:
    color: red;
    background-color: #f7cece;
    border: 1px solid #b90000;
    padding: 20px;
    font-weight: bold;
    text-align: center;
    margin: 10px 0;
    font-size: 12px;

Sample Form

Live-action demo of validation states and behavior. This sample form illustrates all the different input/data types that currently have validation support.