Formular abschicken mit JavaScript

Ein HTML-Formular mit JavaScript zu übermitteln bedeutet in der Regel, das submit-Ereignis zu behandeln, die eingegebenen Werte zu prüfen und gültige Daten vom Browser an die action des Formulars senden zu lassen. Das folgende Beispiel erstellt ein Formular, liest seine Felder aus und verwendet eine clientseitige Validierung, um unvollständige Übermittlungen zu verhindern. Bevor der Server die übermittelten Daten verwendet, muss er sie weiterhin selbst validieren. (Formularübermittlung; serverseitige Validierung)

Ein HTML-Formular erstellen

Gib jedem Steuerelement ein name-Attribut. Sein Wert wird zum Schlüssel der entsprechenden Angabe in den übermittelten Formulardaten. Verwende ein Label, damit jedes Feld einen zugänglichen Namen hat. action gibt die URL an, an die das Formular gesendet wird; method legt fest, wie der Browser die Daten übermittelt. Bei einer POST-Anfrage werden die Formulardaten im Anfragekörper gesendet. Wie sie verarbeitet oder gespeichert werden, entscheidet der Server.

<form action="/signup" method="post" id="signup-form">
  <label for="username">Name</label>
  <input id="username" name="username" type="text" required>

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>

  <button type="submit">Sign up</button>
  <p id="form-message" role="status"></p>
</form>

Dieses Markup für eine Browserseite ist ein statisches Beispiel. Ist das Formular gültig und betätigt der Benutzer die Schaltfläche zum Übermitteln, sendet der Browser die benannten Steuerelemente an /signup.

Auf das Formular zugreifen

Wähle das Formular anhand seiner ID mit document.getElementById() oder document.querySelector() aus. Der folgende Browsercode setzt voraus, dass das obige Markup bereits in der Seite vorhanden ist. Verwende im späteren Submit-Ereignis denselben Verweis auf das Formular.

const form = document.getElementById("signup-form");

Das Ergebnis ist das Formularelement. Wird das Skript ausgeführt, bevor das Formular geparst wurde, platziere es nach dem Formular oder warte, bis das Dokument bereit ist.

Werte von Formularfeldern in JavaScript abrufen

Über die elements-Sammlung eines Formulars kannst du Steuerelemente anhand ihres name-Attributs abrufen. Der aktuelle Text jedes Steuerelements ist über die Eigenschaft .value im Singular verfügbar. Für das obige Formular kannst du den Namen und die E-Mail-Adresse so auslesen:

const username = form.elements.username.value.trim();

const email = form.elements.email.value.trim();

Die name-Attribute im HTML müssen mit den Schlüsseln übereinstimmen, die du mit form.elements verwendest. Durch das Entfernen von Leerzeichen am Anfang und Ende des Textes lassen sich die Werte anschließend zuverlässig prüfen.

Formulardaten in JavaScript validieren

Die folgende Hilfsfunktion prüft, ob beide Feldwerte Text enthalten. Sie gibt einen booleschen Wert zurück, den ein Handler auf der Seite zusammen mit den aus dem Formular ausgelesenen Werten verwenden kann. Das Beispielobjekt enthält einen Namen und eine E-Mail-Adresse; das Programm gibt das Ergebnis für diese Werte aus:

function isSignupComplete(username, email) {
  return username.length > 0 && email.length > 0;
}

const sample = { username: "Ada", email: "ada@example.com" };
console.log(isSignupComplete(sample.username, sample.email));

true

Der Browser prüft required und type="email", bevor er das Submit-Ereignis des Formulars auslöst. Ein leerer Name oder eine fehlerhafte E-Mail-Adresse wird bereits hier abgewiesen: Der Listener wird nicht ausgeführt, preventDefault() wird nicht aufgerufen und der Browser zeigt seine eigene Validierungsmeldung an. Ein Name, der nur aus Leerzeichen besteht, erfüllt dagegen required; der Listener wird daher ausgeführt. Durch das Entfernen der Leerzeichen wird daraus eine leere Zeichenfolge. Die eigene Prüfung verhindert die Übermittlung mit preventDefault(), und die Seite zeigt ihre eigene Meldung an.

Für einen Handler auf der Seite kannst du dem ausgewählten Formular einen Listener hinzufügen und dieselbe Prüfung mit den aktuellen Feldwerten durchführen:

form.addEventListener("submit", (event) => { const username = form.elements.username.value.trim(); const email = form.elements.email.value.trim(); const message = document.getElementById("form-message"); if (!isSignupComplete(username, email)) { event.preventDefault(); message.textContent = "Enter your name and email."; return; } message.textContent = "Submitting…"; });

Besteht der Wert die Prüfung, lässt der Handler den normalen Übermittlungsablauf des Browsers zu. Schlägt die Prüfung fehl, verhindert event.preventDefault(), dass der Browser diese Übermittlung ausführt, und die Meldung erklärt, was korrigiert werden muss. Das ist eine clientseitige Validierung zur Rückmeldung an den Benutzer und keine Sicherheitsgrenze: Der Endpunkt muss die Daten weiterhin serverseitig validieren, da Anfragen auch ohne diese Seite oder ihr JavaScript gesendet werden können.

Wenn anderer Code die Übermittlung auslösen soll, verwende vorzugsweise form.requestSubmit(). Diese Methode durchläuft die normale Validierung und löst das Submit-Ereignis aus. form.submit() sendet das Formular direkt, ohne die Einschränkungen zu prüfen oder das Submit-Ereignis auszulösen. Ein Listener wie dieser wird dabei also nicht ausgeführt.