--- layout: docs title: Validation description: Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript. group: forms toc: true extra_js: - src: "/docs/5.1/assets/js/validate-forms.js" async: true --- {{< callout warning >}} 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. {{< /callout >}} ## How it works Here's how form validation works with Bootstrap: - HTML form validation is applied via CSS's two pseudo-classes, `:invalid` and `:valid`. It applies to ``, `
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
{{< /example >}} ## 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. In the example below, our column classes have this already, but your project may require an alternative setup. {{< example >}}
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.
{{< /example >}} ## Sass ### Variables {{< scss-docs name="form-feedback-variables" file="scss/_variables.scss" >}} ### Mixins Two mixins are combined together, through our [loop](#loop), to generate our form validation feedback styles. {{< scss-docs name="form-validation-mixins" file="scss/mixins/_forms.scss" >}} ### Map This is the validation Sass map from `_variables.scss`. Override or extend this to generate different or additional states. {{< scss-docs name="form-validation-states" file="scss/_variables.scss" >}} Maps of `$form-validation-states` can contain three optional parameters to override tooltips and focus styles. ### Loop Used to iterate over `$form-validation-states` map values to generate our validation styles. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop. {{< scss-docs name="form-validation-states-loop" file="scss/forms/_validation.scss" >}} ### Customizing Validation states can be customized via Sass with the `$form-validation-states` map. Located in our `_variables.scss` file, this Sass map is how we generate the default `valid`/`invalid` validation states. Included is a nested map for customizing each state's color, icon, tooltip color, and focus shadow. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.