JavaScript Formular submit() und Ereignisse

Das Verarbeiten von Formular-Übermittlungen ist eine der häufigsten Aufgaben im Frontend-JavaScript. Formulare sind der Weg, über den Benutzer Daten an einen Server senden — beim Einloggen, Registrieren, Suchen oder beim Checkout — daher möchte man fast immer die Möglichkeit haben, diese Daten zu validieren, umzuformen oder zu bestätigen, bevor sie die Seite verlassen.

Dafür gibt es zwei verwandte, aber unterschiedliche Werkzeuge:

• Das submit-Ereignis — wird vom Browser ausgelöst, wenn der Benutzer versucht, ein Formular abzusenden (durch Klicken auf einen Absende-Button oder durch Drücken der Enter-Taste in einem Feld). Hier führt man Validierungen durch und entscheidet, ob das Absenden erlaubt oder abgebrochen werden soll.
• Die form.submit()-Methode — sendet das Formular programmatisch aus dem Code heraus ab, ohne Benutzeraktion.

Ein wichtiger Fallstrick, über den viele Entwickler stolpern: Diese beiden sind nicht symmetrisch. Der Aufruf von form.submit() löst das submit-Ereignis nicht aus und überspringt die Constraint-Validierung vollständig. Wir erklären, warum, und was stattdessen zu verwenden ist.

Das submit-Ereignis verstehen

Das submit-Ereignis wird ausgelöst, wenn ein Formular im Begriff ist, seine Daten zu senden. Entscheidend ist, dass es abbrechbar ist: Der Aufruf von event.preventDefault() innerhalb des Handlers verhindert, dass der Browser die Seite verlässt, sodass der Benutzer auf der Seite bleiben kann, um Eingaben zu validieren, Fehler anzuzeigen oder die Daten stattdessen mit fetch zu senden.

Das Ereignis wird ausgelöst, wenn:

• Der Benutzer auf einen <button type="submit"> oder <input type="submit"> innerhalb des Formulars klickt.
• Der Benutzer Enter drückt, während der Fokus auf einem Textfeld eines Formulars liegt, das einen Absende-Button hat.

Es wird nicht ausgelöst, wenn form.submit() aus JavaScript aufgerufen wird (siehe unten).

Beispiel: Formularvalidierung vor dem Absenden

Dieses Skript verhindert das Absenden des Formulars, wenn die Felder nicht korrekt ausgefüllt sind, und zeigt dem Benutzer eine Fehlermeldung an. Es nutzt die integrierte Constraint-Validierung des Browsers (das required-Attribut und type="email") über checkValidity().

<div>
  <form style="display: flex; justify-content: center; gap: 2px; align-items: center; flex-direction: column;" id="registrationForm">
    Username: <input type="text" name="username" required />
    Email: <input type="email" name="email" required />
    <button type="submit">Register</button>
  </form>
  <div id="message" style="margin-top: 10px; text-align:center;"></div> <!-- Message container for feedback -->
  <script>
    const form = document.getElementById('registrationForm');
    form.addEventListener('submit', function(event) {
      event.preventDefault(); // Prevent actual form submission to a server
      const messageDiv = document.getElementById('message');
      if (!this.checkValidity()) {
        messageDiv.textContent = 'Please fill all required fields correctly.';
        messageDiv.style.color = 'red'; // Display the message in red for errors
      } else {
        messageDiv.textContent = 'The form was successfully submitted.';
        messageDiv.style.color = 'green'; // Display the message in green for success
        form.reset(); // Reset the form fields after successful submission
      }
    });
  </script>
</div>

JavaScript-Funktionalität:

• Ereignis-Listener: Ein Ereignis-Listener ist am Formular angehängt und wird ausgelöst, wenn versucht wird, das Formular abzusenden.
• Validierungsprüfung: Die Funktion checkValidity() wird hier verwendet. Sie ist eine eingebaute HTML-Formularmethode, die alle Eingaben des Formulars gegen ihre Validierungsregeln prüft (in diesem Fall z. B. das required-Attribut). Wenn ein Feld seine Validierungsregel nicht erfüllt, gibt die Funktion false zurück.
• Absenden verhindern: Wenn checkValidity() false zurückgibt (d. h. das Formular enthält ungültige oder leere Pflichtfelder), verhindert das Skript das Absenden des Formulars an einen Server. Stattdessen wird eine Meldung angezeigt, die den Benutzer auffordert, alle Pflichtfelder korrekt auszufüllen.
• Verarbeitung des Absendens: Wenn alle Felder gültig sind, zeigt das Formular eine Erfolgsmeldung an, anstatt eine leere Seite anzuzeigen oder an einen Server zu senden. In einer echten Anwendung würde man hier fetch() aufrufen, um die Daten zu senden.

Die übermittelten Daten auslesen

Innerhalb des Handlers möchte man in der Regel die vom Benutzer eingegebenen Werte auslesen. Die sauberste Methode ist das FormData-object, das alle benannten Steuerelemente in einem Schritt erfasst:

const form = document.getElementById("registrationForm");
form.addEventListener("submit", (event) => {
  event.preventDefault();
  const data = Object.fromEntries(new FormData(form));
  console.log(data.username, data.email);
  // data is a plain object: { username: "...", email: "..." }
});

Erkennen, welcher Button geklickt wurde

Wenn ein Formular mehrere Absende-Buttons hat (zum Beispiel „Speichern" und „Löschen"), teilt das submit-Ereignis über event.submitter mit, welcher Button es ausgelöst hat:

form.addEventListener("submit", (event) => {
  event.preventDefault();
  // event.submitter is the button element that caused submission
  console.log("Submitted via:", event.submitter?.value);
});

Die .submit()-Methode nutzen

Die .submit()-Methode löst die Formularübermittlung programmatisch aus — direkt aus dem Code heraus, ohne Benutzerklick. Sie ist nützlich, wenn ein Formular nach Erfüllung einer Bedingung gesendet werden muss (z. B. nach einem Timer, einer bestandenen automatischen Prüfung oder einem in JavaScript berechneten Wert).

Zwei Besonderheiten unterscheiden .submit() von einer benutzerseitig ausgelösten Übermittlung:

• Es wird kein submit-Ereignis ausgelöst, daher werden alle Validierungen oder Logiken, die an dieses Ereignis geknüpft sind, übersprungen.
• Es wird keine Constraint-Validierung des Browsers durchgeführt, sodass required- und type-Regeln ignoriert werden.

Dies ist absichtlich so — historisch war .submit() dafür gedacht, ohne erneutes Ausführen des aufrufenden Handlers zu senden (was sonst zu einer Endlosschleife führen würde). In den meisten Fällen sollte stattdessen form.requestSubmit() verwendet werden (siehe unten), das sich wie eine echte Benutzerabgabe verhält.

Beispiel: Programmatische Formularübermittlung

Das folgende Beispiel sendet ein Formular aus dem Code heraus, sobald die Seite geladen wird. Da das Formular kein action-Attribut hat, sendet es an die aktuelle Seite zurück; der Alert zeigt den Wert des versteckten Feldes, damit sichtbar wird, was gesendet werden würde:

<!DOCTYPE html>
<html>
<head>
  <title>Auto Submit Form Demo</title>
</head>
<body>
  <form id="autoSubmitForm">
    <input type="hidden" name="data" value="Automatic Submission" />
  </form>
  <script>
    function submitFormAutomatically() {
      document.getElementById('autoSubmitForm').submit();
      alert("Form submitted with data: " + document.getElementById('autoSubmitForm').data.value);
    }
    document.addEventListener('DOMContentLoaded', submitFormAutomatically); // Call the function when the DOM is ready
  </script>
</body>
</html>

document.getElementById('autoSubmitForm').data funktioniert, weil benannte Formularelemente als Eigenschaften am Formularelement verfügbar sind — form.data gibt das <input name="data">-Element zurück, und .value liest dessen Wert.

requestSubmit() statt submit() bevorzugen

form.requestSubmit() ist das moderne, sicherere Gegenstück zu form.submit(). Im Gegensatz zu .submit():

• löst es das submit-Ereignis aus, sodass Validierungs-Handler ausgeführt werden;
• führt es die Constraint-Validierung des Browsers durch und zeigt native Fehlermeldungen an, wenn ein Feld ungültig ist;
• akzeptiert es optional einen Button, sodass event.submitter gesetzt wird, z. B. form.requestSubmit(saveButton).

const form = document.getElementById("registrationForm");
// Behaves exactly like a real user click on the submit button:
form.requestSubmit();

Wenn man tatsächlich das Bypass-Verhalten von .submit() benötigt, aber dennoch den Handler ausführen möchte, kann man das Ereignis selbst auslösen mit form.dispatchEvent(new Event('submit', { cancelable: true })) — in fast allen Fällen ist jedoch requestSubmit() die richtige Wahl.

.submit() mit Ereignis-Listenern kombinieren

Man kann das Absenden auch an eigene Bedingungen knüpfen: Das Formular wird nur gesendet, wenn bestimmte Kriterien erfüllt sind. Das folgende Beispiel verwendet einen gewöhnlichen (nicht vom Typ „submit") Button, sodass nichts passiert, bis JavaScript entscheidet, submit() aufzurufen.

Beispiel: Bedingtes Absenden von Formularen

<form id="conditionalForm">
  Accept Terms: <input type="checkbox" id="acceptTerms">
  <button type="button" onclick="checkAndSubmit()">Submit</button>
</form>
<script>
  function checkAndSubmit() {
    var form = document.getElementById('conditionalForm');
    var termsCheckbox = document.getElementById('acceptTerms');
    if (termsCheckbox.checked) {
      form.submit();
    } else {
      alert('You must accept the terms and conditions to proceed.');
    }
  }
</script>

Dieser Code stellt einen Button bereit, der beim Klicken prüft, ob eine Checkbox aktiviert ist, bevor das Formular abgesendet wird. Wenn die Bedingungen nicht akzeptiert wurden, wird der Benutzer informiert. Da hier form.submit() verwendet wird, wird das submit-Ereignis nicht ausgelöst — ersetze es durch form.requestSubmit(), wenn auch ein submit-Listener ausgeführt werden soll.

submit-Ereignis vs. submit() vs. requestSubmit()

Faustregel: Das submit-Ereignis nutzen, um zu validieren und abzufangen; requestSubmit() aufrufen, um eine Übermittlung aus dem Code auszulösen; .submit() nur dann verwenden, wenn man gezielt eigene Handler umgehen möchte.

Fazit

Das submit-Ereignis ermöglicht es, ein Formular abzufangen und zu validieren, bevor es die Seite verlässt, während .submit() und requestSubmit() es ermöglichen, es aus dem Code heraus zu senden. Die wichtigste Erkenntnis ist, dass .submit() sowohl das submit-Ereignis als auch die Validierung stillschweigend überspringt — daher sollte requestSubmit() bevorzugt werden, außer man möchte diesen Bypass gezielt nutzen. In Kombination mit event.preventDefault() und FormData geben diese Werkzeuge die vollständige Kontrolle darüber, wie Benutzereingaben erfasst und gesendet werden.

Weiterführende Informationen finden sich unter Formulareigenschaften und -methoden, der Constraint-Validierungs-API, den change- und input-Ereignissen für Live-Feldreaktionen sowie unter focus und blur für die Interaktion auf Feldebene.

Übungen