Bootstrap 5 – Forms & Controls
Estimated reading: 4 minutes 13 views

✅ 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/AttributePurpose
requiredHTML5 validation rule
.needs-validationEnables Bootstrap validation script
.invalid-feedbackError message shown when validation fails
.was-validatedAdded 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

TipReason
Use novalidatePrevents native browser tooltips for clean UX
Use required, type, patternLeverage HTML5 for basic rules
Always pair inputs with <label>Improves accessibility
Use .was-validated for stylingEnsures only submitted forms show error styles
Provide .invalid-feedback blocksGives 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, or pattern 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 :

Leave a Reply

Your email address will not be published. Required fields are marked *

Share

Bootstrap 5 – Form Validation

Or Copy Link

CONTENTS
Scroll to Top