www/docs/forms/validation.mdx
import ValidationFormik from '!!raw-loader!../examples/Form/ValidationFormik'; import ValidationInputGroup from '!!raw-loader!../examples/Form/ValidationInputGroup'; import ValidationNative from '!!raw-loader!../examples/Form/ValidationNative'; import ValidationTooltips from '!!raw-loader!../examples/Form/ValidationTooltips';
For native HTML form validation–available in all our supported browsers,
the :valid and :invalid pseudo selectors are used to apply validation
styles as well as display feedback messages.
Bootstrap scopes the :valid and :invalid styles to parent .was-validated
class, usually applied to the <Form> (you can use the validated prop
as a shortcut). Otherwise, any required field without a value shows up
as invalid on page load. This way, you may choose when to activate them
(typically after form submission is attempted).
:::caution Watch out!
Browsers provide their own validation UI by default on forms. You can disable the
default UI by adding the HTML noValidate attribute to your <Form> or <form> element.
:::
<CodeBlock language="jsx" live> {ValidationNative} </CodeBlock>It's often beneficial (especially in React) to handle form validation
via a library like Formik, or react-formal. In those cases, isValid
and isInvalid props can be added to form controls to manually apply
validation styles. Below is a quick example integrating with
Formik.
If your form layout allows it, you can use the tooltip prop 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.
To properly show rounded corners in an <InputGroup> with validation,
the <InputGroup> requires the hasValidation prop.