Form Validation
Custom styles
For custom Bootstrap form validation messages, you’ll need to add the
novalidate
boolean attribute to your
<form>
.
Valid Status
You can denote a valid status by applying a helper text with the class
.valid-feedback
.
Invalid Status
You can denote a invalid status by applying a helper text with the class
.invalid-feedback
.
Supported elements
Validation styles are available for the following form controls and components.
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.