# Validation

###### Provide valuable, actionable feedback to your users with HTML5 form validation.

Validation styles are available for the following form controls and components: `<input>` and `<textarea>` with `.form-control`, `<select>` with `.form-select`, and `.form-check` inputs.

## Invalid form styles

Text input
Please enter a message in the textarea.
Textarea
Please enter a message in the textarea.
Checkbox & Radio
Check this custom checkbox
Example invalid feedback text
Toggle this custom radio
Or toggle this other custom radio
More example invalid feedback text
Switch elements
Toggle this switch element
Custom select
Example invalid custom select feedback
Multiple Select
Please select at least one option
File input
Please choose a file

## Custom Styles

For custom Bootstrap form validation messages, you'll need to add the `novalidate` boolean attribute to your `<form>`. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you'll see the `:invalid` and `:valid` styles applied to your form controls.

Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback. Background icons for `<select>`s are only available with `.custom-select`, and not `.form-control`.

First name *
Looks good!
Last name *
Looks good!
Username *
@
Please choose a username.
City *
Please provide a valid city.
State *
Please select a valid state.
Zip *
Please provide a valid zip.
Agree to terms and conditions *
You must agree before submitting.

## 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
First name
Looks good!
Last name
Looks good!
Username
@
Please choose a username.
City
Please provide a valid city.
State
Please provide a valid state.
Zip
Please provide a valid zip.
Agree to terms and conditions
You must agree before submitting.

## Valid form styles

Text input
Please enter a message in the textarea.
Textarea test
Please enter a message in the textarea.
Checkbox & Radio
Check this custom checkbox
Example valid feedback text
Toggle this custom radio
Or toggle this other custom radio
More example valid feedback text
Switch elements
Toggle this switch element
Custom select
Example valid custom select feedback
Multiple Select
File input
Please choose a file

## Tooltip Styles

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.

First name *
Looks good!
Last name *
Looks good!
Username *
@
Please choose a username.
City *
Please provide a valid city.
State *
Please select a valid state.
Zip *
Please provide a valid zip.
Comment *
Please enter a message in the textarea.
Please disclose your gender profile *
Male
Female
Prefer not to say
Please select at least one
Agree to terms and conditions *
You must agree before submitting.

## Browser defaults

Not interested in custom validation or JavaScript? No problem—use browser defaults. Try submitting the form below to see built-in feedback styles, which vary by browser and OS. While CSS can't style them, you can customize the text with JavaScript.

First name
Last name
Username
@
City
State
Zip
Agree to terms and conditions

#### Hi Sunny,

how can I help you today?
Analyze my data

Create a new report

Summarize my Calendar

App Builder
Unlock limitless design potential with 16+ layout combinations and extensive customization options—tailor your dashboard to fit your exact needs.
Header position fixed
Navigation full height
Navigation position fixed
Navigation collapsed
Navigation Minified
Dark Navigation
Colorblind Mode
High Contrast Mode