# Validation Provide valuable, actionable feedback to your users with HTML5 form validation. Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript.

How it works

Validation styles are available for the following form controls and components: `<input>` and `<textarea>` with `.form-control` (including up to one `.form-control` in input groups), `<select>` with `.form-select` or `.custom-select`, `.form-check`, `.custom-checkbox` and `.custom-radio`, `.custom-file`

Learn more about forms on bootstrap's official documentation

## 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
Custom file input
Choose file...
Example invalid custom file feedback

## 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 provide 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.

## 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
Custom file input
Choose file...
Example valid custom file feedback

## 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 provide 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 feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below. Depending on your browser and OS, you’ll see a slightly different style of feedback.

While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.

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

- Home
- Inbox
- Add More

Tracey Chang
IT Director

- Tracey Chang Online
- Oliver Kopyuv Online
- Dr. John Cook PhD Away
- Ali Amdaney Online
- Sarah McBrook Online
- oliver.kopyuv@gotbootstrap.com Offline
- oliver.kopyuv@gotbootstrap.com Busy
- oliver.kopyuv@gotbootstrap.com Offline
- +714651347790 Missed Call

Jun 19

Hey Tracey, did you get my files?

3:00 pm

Hi

Sorry going through a busy time in office. Yes I analyzed the solution.

It will require some resource, which I could not manage.

3:24 pm

Okay

Sending you some dough today, you can allocate the resources to this project.

3:26 pm

Perfect. Thanks a lot!

I will have them ready by tonight.

Cheers

Jun 20
Send

#### Layout Settings User Interface Settings

##### App Layout

Fixed Header header is in a fixed at all times
Fixed Navigation left panel is fixed
Minify Navigation Skew nav to maximize space
Hide Navigation roll mouse on edge to reveal
Top Navigation Relocate left pane to top
Fixed Footer page footer is fixed
Boxed Layout Encapsulates to a container

Fixed Background

##### Mobile Menu

Push Content Content pushed on menu reveal
No Overlay Removes mesh on menu reveal
Off-Canvas (beta) Content overlaps menu

##### Accessibility

Bigger Content Font content fonts are bigger for readability
High Contrast Text (WCAG 2 AA) 4.5:1 text contrast ratio
Daltonism (beta) color vision deficiency
Preloader Inside preloader will be inside content
SmartPanel Icons (not Panels) smartpanel buttons will appear as icons

##### Global Modifications

Clean Page Background adds more whitespace
Hide Navigation Icons invisible navigation icons
Disable CSS Animation Disables CSS based animations
Hide Info Card Hides info card from left panel
Lean Subheader distinguished page header
Hierarchical Navigation Clear breakdown of nav links
Dark Navigation Navigation background is darkend

##### Global Font Size

SM MD LG XL
Change root font size to effect rem values (resets on page refresh)

##### Theme colors more info

##### Theme Modes (beta) why beta?

###### Internet Explorer Issue

This particular component may not work as expected in Internet Explorer. Please use with caution.
Default
Light
Dark

Reset Settings
Factory Reset