Skip to content

Bootstrap Form Validation

Bootstrap adds visual feedback for valid and invalid form fields on top of native HTML5 validation. This lesson covers styling states, feedback messages, and custom validation triggers.

Bootstrap Form Validation Overview

Bootstrap styles form controls based on the is-valid and is-invalid classes, or automatically once a form has the was-validated class and native HTML5 constraint validation runs. Valid and invalid states change border color and add matching icons, while valid-feedback and invalid-feedback elements display contextual messages.

For custom validation logic beyond native HTML5 rules, you can toggle is-valid or is-invalid manually with JavaScript based on your own checks, which is common for confirming passwords match or checking availability via an API call.

Concept Description Common Usage
Native HTML5 validation required, pattern, minlength, type attributes Baseline validation without JavaScript
was-validated Class on the form that triggers Bootstrap's validation styles Showing feedback after a submit attempt
is-valid / is-invalid Manually applied state classes Custom or asynchronous validation logic
valid-feedback / invalid-feedback Contextual message blocks tied to a field Explaining why a field passed or failed
Custom validation with JavaScript checkValidity() and setCustomValidity() Cross-field rules like matching passwords

Bootstrap Form Validation Example

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email" required>
    <div class="invalid-feedback">Please enter a valid email address.</div>
  </div>

  <div class="mb-3">
    <label for="username" class="form-label">Username</label>
    <input type="text" class="form-control is-valid" id="username" value="jane_doe">
    <div class="valid-feedback">Looks good!</div>
  </div>

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

<script>
  const form = document.querySelector(".needs-validation");
  form.addEventListener("submit", (event) => {
    if (!form.checkValidity()) {
      event.preventDefault();
      event.stopPropagation();
    }
    form.classList.add("was-validated");
  }, false);
</script>

The email field relies on native required and type="email" validation, and its invalid-feedback message appears once the form gains the was-validated class. The username field demonstrates a manually applied is-valid state with a matching valid-feedback message. The script intercepts submission, checks native validity, and adds was-validated so Bootstrap's styling activates.

Top 10 Bootstrap Form Validation Examples

These are the validation classes and patterns you'll use to give users clear form feedback.

# Example Syntax
1 Required field <input class="form-control" required>
2 Invalid state <input class="form-control is-invalid">
3 Valid state <input class="form-control is-valid">
4 Invalid feedback message <div class="invalid-feedback">Required field.</div>
5 Valid feedback message <div class="valid-feedback">Looks good!</div>
6 Form-level validation trigger <form class="needs-validation" novalidate>...</form>
7 Auto-styled state after submit form.classList.add("was-validated");
8 Pattern-based validation <input class="form-control" pattern="[0-9]{5}" required>
9 Custom checkValidity check if (!form.checkValidity()) { event.preventDefault(); }
10 Custom error message input.setCustomValidity("Passwords must match");

Best Practices

  • Use the novalidate attribute on the form and drive validation display through was-validated for full control.
  • Always pair is-invalid or is-invalid feedback with a specific, actionable error message.
  • Use native HTML5 validation attributes (required, pattern, type) whenever possible before writing custom JavaScript.
  • Trigger custom validation on blur or submit rather than on every keystroke to avoid distracting users.
  • Use setCustomValidity for cross-field rules like confirming matching passwords.
  • Keep valid-feedback messages brief and positive; they reassure rather than instruct.
  • Test validation behavior with keyboard-only and screen-reader navigation.

Common Mistakes

  • Forgetting the novalidate attribute, which causes native browser tooltips to fight with Bootstrap's styled feedback.
  • Adding is-invalid without an accompanying invalid-feedback message, leaving users without guidance.
  • Validating on every keystroke, which feels aggressive and error-prone before the user finishes typing.
  • Not calling event.preventDefault() when validation fails, letting an invalid form submit anyway.
  • Styling fields as invalid without ever clearing the state once the user fixes the input.
  • Relying solely on client-side validation without validating again on the server.

Key Takeaways

  • Bootstrap can style native HTML5 validation automatically through the was-validated class.
  • is-valid and is-invalid can be applied manually for custom validation logic.
  • valid-feedback and invalid-feedback provide contextual messages next to each field.
  • JavaScript's checkValidity() and setCustomValidity() enable custom validation rules.
  • Client-side validation improves UX but should never replace server-side validation.

Pro Tip

Combine native constraint attributes (required, pattern, minlength) with was-validated for most fields, and reserve manual is-valid/is-invalid toggling for the handful of fields that truly need custom or asynchronous checks.

You now understand Bootstrap's form validation system. Continue to Bootstrap Buttons to learn button styles and states.