Formulare mit Bootstrap 5 und JavaScript ohne jQuery validieren

Bootstrap-5-Formulare mit HTML-Regeln, checkValidity und setCustomValidity: korrekter Code, Rückmeldungen und serverseitige Prüfung.

Validierung mit Bootstrap 5

Bootstrap 5 benötigt kein jQuery. Nutzen Sie HTML-Regeln wie required und type=email mit Bootstrap-Rückmeldungen und reinem JavaScript. Das Feedbackformular sendet beispielhaft an /feedback: ersetzen Sie dies durch einen echten Endpunkt. Laden Sie das Bootstrap-5-CSS.

HTML des Formulars

Ergänzen Sie needs-validation und novalidate am Formular: novalidate unterdrückt Browser-Tooltips, lässt die API aber nutzbar. Die Felder haben form-control, zugehörige Labels, name, required und invalid-feedback. Zeigen Sie das HTML als Quelltext und fügen Sie kein aktives Formular in einen Artikel ein.

<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>

Absenden mit JavaScript

Fangen Sie submit ab. form.checkValidity() prüft Vorgaben; bei Fehlern verhindert preventDefault() das Absenden und was-validated zeigt Bootstrap-Rückmeldungen. Gültige Eingaben werden normal an /feedback gesendet. Echte Anwendungen benötigen auch CSRF-Token und serverseitige Prüfungen.

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

Eigene Regeln

Wenn Sie confirmEmail ergänzen, vergleichen Sie den Wert über setCustomValidity() mit email. Prüfen Sie beide Eingaben bei input, damit eine frühere Fehlermeldung mit leerem Text entfernt wird. Der optionale Ausschnitt benötigt ein Feld mit id confirmEmail; übersetzen Sie die Meldung.

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);

Barrierefreiheit und Sicherheit

Bootstrap weist darauf hin, dass manche benutzerdefinierten Stile der clientseitigen Validierung Hilfstechnologien nicht korrekt erreichen. Testen Sie Tastatur und Screenreader oder bevorzugen Sie Browsermeldungen beziehungsweise serverseitiges Feedback. Jede Anfrage muss zusätzlich auf dem Server geprüft und autorisiert werden.

Praktische Prüfung

Testen Sie leere Felder, ungültige E-Mail-Adressen, korrekte Eingaben und wiederholtes Absenden. Bei AJAX-Eingaben entfernen Sie was-validated beim Zurücksetzen. Meldungen sollen verständlich und Feldern zugeordnet sein; CSS allein liefert keine barrierefreie Erklärung.

Quellen

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 .