Bootstrap Form Validation — Native HTML + Bootstrap 5

<form class="needs-validation" novalidate
      action="https://splitforms.com/api/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />

  <div class="mb-3">
    <label class="form-label">Name</label>
    <input name="name" type="text" class="form-control" required minlength="2" />
    <div class="invalid-feedback">Please enter your name (at least 2 chars).</div>
  </div>

  <div class="mb-3">
    <label class="form-label">Email</label>
    <input name="email" type="email" class="form-control" required />
    <div class="invalid-feedback">Valid email required.</div>
  </div>

  <div class="mb-3">
    <label class="form-label">Message</label>
    <textarea name="message" class="form-control" rows="4" required></textarea>
    <div class="invalid-feedback">Please write a message.</div>
  </div>

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

<script>
(() => {
  const forms = document.querySelectorAll(".needs-validation");
  Array.from(forms).forEach(form => {
    form.addEventListener("submit", e => {
      if (!form.checkValidity()) { e.preventDefault(); e.stopPropagation(); }
      form.classList.add("was-validated");
    }, false);
  });
})();
</script>

Bootstrap 5 dropped jQuery validation in favor of native HTML validation styled with Bootstrap classes. The pattern: add novalidate to the form (disables the default browser UI), add required/pattern/type=email to each input, add .invalid-feedback divs for error messages, and toggle .was-validated on submit attempts.

The native browser validation runs whenever the user submits. If validation fails, the browser blocks the submit; you add the .was-validated class which triggers Bootstrap's styled error UI (red borders on invalid inputs, .invalid-feedback divs become visible). Tab through the form and the error states cascade naturally.

For custom validation rules beyond what HTML offers (cross-field, async, complex patterns), use setCustomValidity on the input. The error message is whatever string you pass; Bootstrap displays it the same way as built-in errors. ~5 lines for password confirmation, no jQuery needed.

Bootstrap 5's approach is cleaner than the jQuery-validate era because it leans on the platform: native HTML attributes for the rules, native validation for the logic, CSS for the visual feedback. The JavaScript glue (~10 lines) just controls when to add the .was-validated class. Most forms need no custom JS at all.

Native HTML attributes, ~10 lines of glue JS, no library.