Bootstrap 5 Inline Form Validation

Common use cases

• →Email and password fields on a signup form that check format and minimum length before the user submits, reducing server-side validation round trips.
• →Checkout address forms that validate postcode format and required fields inline so users can correct mistakes field by field rather than seeing a page-level error list.
• →A multi-step onboarding wizard where each step validates its own fields before allowing progression, preventing users from reaching later steps with incomplete data.
• →A contact form with a character-limited textarea that turns invalid as soon as the user exceeds the maximum, showing a live character-count message in the feedback slot.

Variants and classes

Code example

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="emailAddress" class="form-label">Email address</label>
    <input
      type="email"
      class="form-control"
      id="emailAddress"
      placeholder="you@example.com"
      required
    />
    <div class="valid-feedback">Looks good!</div>
    <div class="invalid-feedback">Please enter a valid email address.</div>
  </div>

  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input
      type="password"
      class="form-control"
      id="password"
      minlength="8"
      required
    />
    <div class="valid-feedback">Strong password.</div>
    <div class="invalid-feedback">Password must be at least 8 characters.</div>
  </div>

  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="agreeTerms" required />
    <label class="form-check-label" for="agreeTerms">I agree to the terms</label>
    <div class="invalid-feedback">You must agree before submitting.</div>
  </div>

  <button type="submit" class="btn btn-primary">Create account</button>
</form>

<script>
  (function () {
    'use strict';
    var forms = document.querySelectorAll('.needs-validation');
    Array.prototype.slice.call(forms).forEach(function (form) {
      form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  })();
</script>

Live examples

Canvas template variants

Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:

• ✓Canvas Builder applies brand primary and danger colours to the valid and invalid border and icon tints, so validation states match the site's colour palette rather than Bootstrap's default green and red.
• ✓Canvas Builder outputs tooltip-style validation on dense forms (such as inline search or filter bars) and block-style feedback on standard stacked forms, choosing the pattern automatically based on the form layout selected.
• ✓Canvas Builder wraps every validated field in accessible markup including aria-describedby linking the input to its feedback element, ensuring screen readers announce the error message when the field receives focus.

Best practices

FAQ