Skip to docs navigation

Validation

We are aware that currently the client-side custom validation styles and tooltips are not accessible, since they are not exposed to assistive technologies. While we work on a solution, we'd recommend either using the server-side option or the default browser validation method.

Custom styles

If using custom styles, be sure to add the novalidate boolean attribute to your <form>.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting.

Browser defaults

Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? Use the browser defaults.

@

Server side

We recommend using client-side validation, but in case you require server-side validation, you can indicate invalid and valid form fields with .is-invalid and .is-valid. Note that .invalid-feedback is also supported with these classes.

For invalid fields, ensure that the invalid feedback/error message is associated with the relevant form field using aria-describedby (noting that this attribute allows more than one id to be referenced, in case the field already points to additional form text).

To fix issues with border radii, input groups require an additional .has-validation class.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting.

Supported elements

  • <input>s and <textarea>s with .form-control (including up to one .form-control in input groups)
  • <select>s with .form-select
  • .form-checks
Please enter a message in the textarea.
Example invalid feedback text
More example invalid feedback text
Example invalid select feedback
Example invalid form file feedback

Tooltips

If your form layout allows it, you can swap the .{valid|invalid}-feedback classes for .{valid|invalid}-tooltip classes to display validation feedback in a styled tooltip. Be sure to have a parent with position: relative on it for tooltip positioning.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.

Customizing

Validation states can be customized via Sass with the $form-validation-states map. Located in _variables.scss file, this Sass map is looped over to generate the default valid/invalid validation states. Included is a nested map for customizing each state’s color and icon. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.

Please note that we do not recommend customizing these values without also modifying the form-validation-state mixin.

This is the Sass map from _variables.scss. Override this and recompile your Sass to generate different states:

This is the loop from forms/_validation.scss. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop: