Validate Bootstrap 5 forms with JavaScript, without jQuery

Bootstrap 5 forms with HTML constraints, checkValidity and setCustomValidity: correct markup, feedback and server-side checks.

Bootstrap 5 validation

Bootstrap 5 does not require jQuery. Combine HTML constraints such as required and type=email with Bootstrap feedback classes and native JavaScript. This sample feedback form posts to /feedback: replace that path with a real endpoint. Bootstrap 5 CSS must be loaded.

Form markup

Add needs-validation and novalidate to the form. novalidate suppresses built-in browser tooltips while retaining the validation API. Inputs have form-control, linked labels, name attributes, required and invalid-feedback. Display this HTML as a code example rather than injecting an active form into an article.

<form class="needs-validation" novalidate method="post" action="/feedback">
  <div class="mb-3">
    <label class="form-label" for="name">Name</label>
    <input class="form-control" id="name" name="name" required>
    <div class="invalid-feedback">Enter your name.</div>
  </div>
  <div class="mb-3">
    <label class="form-label" for="email">Email</label>
    <input class="form-control" id="email" name="email" type="email" required>
    <div class="invalid-feedback">Enter a valid email address.</div>
  </div>
  <button class="btn btn-primary" type="submit">Send</button>
</form>

Native JavaScript submit

Listen for submit. form.checkValidity() tests constraints; if invalid, preventDefault() stops submission and was-validated displays Bootstrap feedback. Valid input proceeds with ordinary submission to /feedback. Real applications also need any CSRF tokens and other server checks.

document.querySelectorAll('.needs-validation').forEach((form) => {
  form.addEventListener('submit', (event) => {
    if (!form.checkValidity()) {
      event.preventDefault();
      event.stopPropagation();
    }
    form.classList.add('was-validated');
  });
});

Custom constraints

If you add confirmEmail to the form, compare it with email through setCustomValidity(). Validate on both inputs so an old error can be cleared with an empty string. The optional snippet below requires an input with id confirmEmail; translate its error message for your page.

const email = document.querySelector('#email');
const confirmation = document.querySelector('#confirmEmail');
function validateMatch() {
  confirmation.setCustomValidity(
    confirmation.value === email.value ? '' : 'Email addresses differ'
  );
}
email.addEventListener('input', validateMatch);
confirmation.addEventListener('input', validateMatch);

Accessibility and security

Bootstrap notes that some client-side custom validation styles are not exposed properly to assistive technologies. Test keyboard and screen-reader use, or prefer built-in browser messages or server-side feedback. Never trust browser validation alone: validate and authorize each request on the server.

Practical checks

Try empty fields, malformed email addresses, valid input and repeated submits. For AJAX submission, remove was-validated when resetting visual state. Feedback should be clear and associated with each field; CSS classes alone do not provide accessible explanations.

Sources

Bootstrap 5.3: https://getbootstrap.com/docs/5.3/forms/validation/ ; HTML API: https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation .