跳到主要内容

Validation

Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.

Native HTML5 form validation

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).

结果
Loading...
实时编辑器

Form libraries and server-rendered styles

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.

结果
Loading...
实时编辑器

Tooltips

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.

结果
Loading...
实时编辑器

Input group validation

To properly show rounded corners in an <InputGroup> with validation, the <InputGroup> requires the hasValidation prop.

结果
Loading...
实时编辑器

API

Feedback