Bootstrap 5 form validation provides visual feedback for user inputs. This page covers 4 validation patterns — browser validation, custom messages, real-time and inline errors — each with working JavaScript.

Quick Setup

Form validation requires Bootstrap 5 CSS and JS:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Key Classes Reference

ClassWhat It Does
.was-validatedTriggers validation styles on entire form
.is-validGreen valid state on individual input
.is-invalidRed invalid state on individual input
.valid-feedbackGreen success message below input
.invalid-feedbackRed error message below input
.valid-tooltipGreen tooltip-style success message
.invalid-tooltipRed tooltip-style error message
novalidateDisables browser default validation UI
requiredHTML5 required field attribute

1. Bootstrap 5 Browser Validation

Built-in HTML5 browser validation styled with Bootstrap. Add novalidate to the form and was-validated on submit.

2. Bootstrap 5 Custom Validation Messages

Custom error messages using is-invalid and invalid-feedback classes. Full control over when errors show.

3. Bootstrap 5 Real-Time Validation

Validate fields as the user types using input event listeners. Immediate feedback on each field.

4. Bootstrap 5 Inline Error Messages

Error messages displayed inline below each field with icons for a clear, accessible validation UI.

Frequently Asked Questions

Add novalidate to the form to disable browser defaults. On submit, add was-validated class to the form: form.classList.add('was-validated'). Bootstrap then applies green valid or red invalid styles based on HTML5 validity. Add valid-feedback and invalid-feedback divs for custom messages.
Add is-valid or is-invalid classes directly to the input element using JavaScript: input.classList.add('is-invalid'). This shows validation state immediately without requiring form submission. Remove the class to reset the state.
Compare the two password fields in JavaScript: if (pass.value !== confirm.value) { confirm.classList.add('is-invalid'); document.querySelector('#confirmFeedback').textContent = 'Passwords do not match'; }. Run this check on the confirm field's input event and on form submit.
Add required to the select element and a default empty option: <option value=''>Choose...</option>. When the user submits without selecting, Bootstrap shows the invalid style. For custom validation check select.value === '' and add is-invalid class manually.
Remove the was-validated class from the form: form.classList.remove('was-validated'). Also remove is-valid and is-invalid from individual inputs. Reset the form values: form.reset(). This returns all inputs to their unstyled default state.

Need a Full Bootstrap 5 Admin Dashboard?

Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.

Browse Templates →

Use code FIRST30 for 30% off your first purchase.

Related Components

Bootstrap 5 Login Form

View examples →

Bootstrap 5 Registration Form

View examples →

Bootstrap 5 Contact Form

View examples →