React Bootstrap Form Validation
Form Validation with Bootstrap Styling
Bootstrap 5 components designed for React.js
This component is part of the CoreUI for React.js UI components library, which offers all Bootstrap components designed to work seamlessly with React.js.
If you want to use Bootstrap 5 in a React.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.
Learn how to use Bootstrap-style validation in React forms using CoreUI components. Show validation messages, use custom styles, and support native browser behavior.
How to use React Bootstrap Form Validation#
React Bootstrap validation lets you provide custom or native HTML5 feedback styles for form controls. CoreUI components support both approaches for a better user experience.
Custom validation styles#
Disable the browser’s native validation UI with the noValidate prop on <CForm>, and use the validated prop to enable feedback based on custom logic. Try submitting the form below to see how validation classes like :invalid and :valid are applied.
Browser default behavior#
If you prefer to rely on native browser validation, skip noValidate and validated. Submit the form and let the browser handle feedback based on built-in rules.
Manual validation#
Use the valid and invalid props directly on components like <CFormInput> to apply validation styles manually, which is useful for server-side validation or complex form logic.
Supported components#
These CoreUI components support Bootstrap validation classes:
<CFormCheck><CFormInput><CFormSelect><CFormTextarea>
Tooltip feedback#
For compact layouts, validation messages can appear as tooltips. Make sure the parent container has position: relative to position tooltips correctly.
API reference#
Refer to the API documentation for detailed descriptions of the props and features available: