Dashboard
Browser Default
Depending on your browser and OS, you’ll see a slightly different style of 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. When attempting to submit, you’ll see the :invalid and
:valid styles applied to your form controls.
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.
Supported elements
Validation styles are available for the following form controls and components:
<input>s and<textarea>s with.form-control(including up to one.form-controlin input groups)<select>s with.form-select.form-checks
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.