✅ Bootstrap 5 – Form Validation: Style & Script for Better UX
🧲 Introduction – What Is Form Validation in Bootstrap 5?
Form validation ensures that users enter the correct data before submitting a form. Bootstrap 5 uses native HTML5 validation and styles it using classes like .is-valid
, .is-invalid
, and .was-validated
. It also provides JavaScript APIs to enhance user interaction and show feedback messages.
🎯 In this guide, you’ll learn:
- How to implement client-side validation
- Use feedback messages and validation classes
- Create custom validation logic with JavaScript
- Improve accessibility and user feedback
✅ Example 1 – Basic Required Field Validation
<form class="needs-validation" novalidate>
<div class="mb-3">
<label for="emailInput" class="form-label">Email address</label>
<input type="email" class="form-control" id="emailInput" required>
<div class="invalid-feedback">Please enter a valid email.</div>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
<script>
(() => {
'use strict';
const forms = document.querySelectorAll('.needs-validation');
forms.forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
})();
</script>
🔍 Explanation:
Class/Attribute | Purpose |
---|---|
required | HTML5 validation rule |
.needs-validation | Enables Bootstrap validation script |
.invalid-feedback | Error message shown when validation fails |
.was-validated | Added on submit to trigger validation styles |
✅ Example 2 – Valid & Invalid Styles Manually
<input type="text" class="form-control is-valid" value="John">
<input type="text" class="form-control is-invalid" value="123">
.is-valid
= green border + valid icon (if enabled).is-invalid
= red border + invalid feedback message
✅ Example 3 – Inline Validation with Feedback
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-6">
<label for="firstName" class="form-label">First name</label>
<input type="text" class="form-control" id="firstName" required>
<div class="valid-feedback">Looks good!</div>
</div>
<div class="col-md-6">
<label for="lastName" class="form-label">Last name</label>
<input type="text" class="form-control" id="lastName" required>
<div class="invalid-feedback">Please enter your last name.</div>
</div>
<div class="col-12">
<button class="btn btn-success" type="submit">Submit</button>
</div>
</form>
✅ Example 4 – Checkbox Validation
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" id="agreeTerms" required>
<label class="form-check-label" for="agreeTerms">I agree to terms</label>
<div class="invalid-feedback">You must accept before submitting.</div>
</div>
required
applies to checkboxes too- Use
.form-check
and.invalid-feedback
✅ Example 5 – Select Menu Validation
<div class="form-floating mb-3">
<select class="form-select" id="selectPlan" required>
<option value="">Choose...</option>
<option value="1">Basic</option>
<option value="2">Premium</option>
</select>
<label for="selectPlan">Select Plan</label>
<div class="invalid-feedback">Please choose a plan.</div>
</div>
🛠️ Best Practices for Bootstrap Validation
Tip | Reason |
---|---|
Use novalidate | Prevents native browser tooltips for clean UX |
Use required , type , pattern | Leverage HTML5 for basic rules |
Always pair inputs with <label> | Improves accessibility |
Use .was-validated for styling | Ensures only submitted forms show error styles |
Provide .invalid-feedback blocks | Gives users context when fixing errors |
📌 Summary – Validate Inputs Easily with Bootstrap 5
Bootstrap 5 simplifies form validation using native HTML5 rules and class-based styling. Whether you’re validating text, email, checkboxes, or selects, the framework provides accessible, consistent feedback.
🔍 Key Takeaways:
- Add
required
,type
, orpattern
to inputs - Use
.was-validated
+ JavaScript to control feedback behavior - Show feedback with
.invalid-feedback
or.valid-feedback
- Works with checkboxes, radios, selects, and file inputs
- Improves both form accuracy and user trust
⚙️ Ideal for login forms, checkout pages, contact forms, surveys, and registration screens.
❓ FAQs – Bootstrap 5 Form Validation
❓ Do I need JavaScript for Bootstrap form validation?
✅ Yes. Bootstrap uses a small JS snippet to add .was-validated
and show validation messages.
❓ Can I use Bootstrap validation with AJAX forms?
✅ Yes. Validate client-side first, then use JavaScript to trigger AJAX submission.
❓ How do I highlight a field as invalid manually?
✅ Add .is-invalid
to the input and show the associated .invalid-feedback
.
❓ Is Bootstrap validation accessible?
✅ Yes, when used with proper labels, aria-*
, and role attributes.
Share Now :