Nearby lessons
39 of 39✅ BS5 Form Validation
📌 What Is Bootstrap 5 Form Validation?
Bootstrap shows validation state with .was-validated on the form (after submit or via JS) and .is-valid / .is-invalid on inputs. Use .valid-feedback or .invalid-feedback for message text. You can use the browser’s built-in validation (e.g. required) and add .needs-validation to the form, then toggle .was-validated on submit.
✅ Valid and Invalid States (.is-valid, .is-invalid)
.is-valid – green border and check (valid state). .is-invalid – red border and cross (invalid state). Add to the input (or form control). Use with .valid-feedback and .invalid-feedback divs for messages.
📋 Form with .was-validated
Add .needs-validation to the form and novalidate if you want to control validation in JavaScript. On submit, add .was-validated to the form; Bootstrap will show .invalid-feedback / .valid-feedback based on each input’s .is-valid / .is-invalid or the browser’s checkValidity().
✅ Validation Best Practices
- Use .was-validated on the form after submit so feedback is shown.
- Use .valid-feedback and .invalid-feedback for messages.
- Use HTML5 required, pattern, etc., and checkValidity() in JS.