Form and Form Validation

Required Form Fields


* indicates the field is required

Input (text)

Please provide a value The value provided has unacceptable characters
  • Input (text) is required
  • Cannot be empty
  • Is alphanumeric (+french characters): /^[A-Za-z\u00E0-\u00FC\d]+$/
  • Examples: First Name, Last Name, Address

Input (number)

Please provide a number The value provided has unacceptable characters
  • Input (number) is required
  • Cannot be empty
  • Is numeric: /^\d+$/
  • Examples: YYYYMMDD, YYYY, MM, DD, hh, ss

Input (email)

Please provide a value The value provided does not match an email format
  • Input (email) is required
  • Cannot be empty
  • Is email: /^(([^<>>()[\]\\.,;:\s@"]+(\.[^<>>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

Input (postal code)

Please provide a value The value provided does not match the postal code format
  • Input (postal code) is required
  • Cannot be empty
  • Is postal code: /^[A-Za-z]\d[A-Za-z][ -]?\d[A-Za-z]\d$/

Input (zip code)

Please provide a value The value provided does not match a zip code (e.g. 90210)
  • Input (zip code) is required
  • Cannot be empty
  • Is postal code: /(^\d{5}$)|(^\d{5}-\d{4}$)/

Input (password)

Please provide a value
  • Minimum 8 characters
  • Minimum 1 number
  • Minimum 1 special character
  • Minimum 1 lower case letter
  • Minimum 1 upper case letter
Please provide a value
  • Minimum 8 characters
  • Minimum 1 number
  • Minimum 1 special character
  • Minimum 1 lower case letter
  • Minimum 1 upper case letter
  • Matching

Input (Disabled)

Select / Dropdown

Please select an option Helper Text
Please select an option Provinces (EN)
Please select an option Provinces (FR)
Please select an option Month (EN)
Please select an option Month (FR)

Traditional Checkboxes

Please select an option

Parent-Child Checkboxes

Traditional Box Checkboxes

Please select an option

Parent-Child Box Checkboxes

Card Checkbox

Card checkboxes *

Please select an option

Traditional Radio Buttons

Traditional radio buttons * Please select an option

Box Radio Buttons

Box radio button * Please select an option

Card Radio Buttons

Card radio button *

Please select an option

Select All (Box Checkbox)

Required Select All (Box Checkbox) not applicable

Select All (Switch: Button)

Required Select All (Switch: Button) not applicable

Textarea

Please provide a value
  • Textarea is required
  • Textarea will expand as you type
  • Cannot be empty

Textarea (Disabled)

Textarea error

Slider

  • 1
  • 25
  • 50
  • 75
  • 100
  • 1
  • 25
  • 50
  • 75
  • 100

Range Slider

  • -100
  • 0
  • 100
  • -100
  • 0
  • 100

Switch (button implementation)

Example w/ Label
Example w/o Label
Type
Size
Regular
Regular
Inner label
Regular
Regular
Small
Inner label
Small
Background change
Regular
Thumb change
Regular
Background change
Small
Thumb change
Small
Background and thumb change
Regular
Background and thumb change
Small
Blue theme
Regular
Red theme
Small
Blue theme
Inner Label
No Thumb
Regular
Red theme
Inner Label
No Thumb
Small

Optional Form Fields


Input (text)

The value provided has unacceptable characters Input(text) is optional, is alpha_numeric format

Input (number)

The value provided has unacceptable characters Input(number) is optional, is numeric format

Input (email)

The value provided does not match an email format Input(email) is optional and is email format

Input (postal code)

The value provided does not match a postal code format (e.g. A1B2C3) Postal Code is optional, is postal code format

Input (zip code)

The value provided does not match a zip code format (e.g. 90210) Zip Code is optional, is zip code format

Input (password)

Please provide a value
  • Minimum 8 characters
  • Minimum 1 number
  • Minimum 1 special character
  • Minimum 1 lower case letter
  • Minimum 1 upper case letter
Please provide a value
  • Minimum 8 characters
  • Minimum 1 number
  • Minimum 1 special character
  • Minimum 1 lower case letter
  • Minimum 1 upper case letter
  • Matching

Input (Disabled)

Optional Input (Disabled) not applicable

Select / Dropdown

Helper Text
Provinces (EN)
Provinces (FR)
Month (EN)
Month (FR)

Traditional Checkboxes

Parent-Child Checkboxes

Traditional Box Checkboxes

Parent-Child Box Checkboxes

Card Checkbox

Card checkboxes

Traditional Radio Buttons

Traditional radio buttons

Box Radio Buttons

Box radio button

Card Radio Buttons

Card radio button

Select All (Box Checkbox)

Select All (Switch: Button)

Textarea

Please provide a value
  • Textarea is optional

Textarea (Disabled)

Optional Textarea (Disabled) not applicable

Slider

Optional slider not applicable

Range Slider

Optional two point slider not applicable

Switch (button implementation)

Optional switch not applicable

Required Form Submission Successful!

Optional Form Submission Successful!