submit • Formulardaten senden

submit – beim Absenden von Formulardaten

Auch wenn die input-Elemente mit Attributen wie required und Pseudoklassen wie valid / invalid viele Aufgaben übernehmen: Das clientseitige Prüfen vor dem Absenden von Benutzereingaben trägt zu einem barrierefreien Ausfüllen von Formularen mit weniger Abbrüchen bei.

Das submit-Event ist ausschließlich für das form-Element gedacht und wird in erster Linie bei der Validierung von Formularen eingesetzt. submit feuert in dem Augenblick, in dem der Benutzer das Formular zur Bearbeitung abschickt.

<input type="email" required placeholder="…">
<button type="submit">Absenden</button>

Wenn Javascript nicht aktiviert ist, wird die vorgegebene Aktion des Formulars – die Übertragung der Daten an die Anwendung – ohne Prüfung ausgeführt.

Absenden der Formulareingaben verhindern

Das Script muss das Absenden explizit verhindern: event.preventDefault() das Absenden des Formulars, wenn Eingaben nicht akzeptiert werden.

const myForm = document.querySelector("#myForm");
myForm.addEventListener("submit", function(event) {
	const emailField = document.querySelector("#email");
	const errorMessage = document.querySelector("#error-message");

	if (!emailField.checkValidity()) {
		event.preventDefault();  // Verhindert das Absenden des Formulars
		errorMessage.textContent = "Bitte geben Sie Ihre Emailadresse ein!";
	}
});

checkValidity() ist eine JavaScript-Methode für Formularelemente und prüft, ob die Eingaben den HTML5-Validierungsregeln entsprechen, im einfachsten Fall ob das Feld ausgefüllt wurde (weil required gesetzt ist). Bei Eingaben in Formularfeldern mit Bedingungen wie min, max oder pattern liefert checkValidity() die Fehlermeldung gleich mit. Das erspart z.B. die Prüfung, ob die Eingabe innerhalb eines bestimmten Wertebereichs liegt.

Geprüft, für richtig gefunden und dann … ?

Wenn die Eingaben geprüft und für richtig gefunden wurden, können sie mit fetch() oder XMLHttpRequest im Hintergrund versendet werden, ohne daß ein Neuladen der Seite erforderlich wird.

<form id="ajaxForm" class="field-group split split-2-1">
	<input type="text" name="username" required minlength="3" placeholder="…">
	<button class="btn" type="submit">Absenden</button>
</form>
<p id="response"></p>

document.querySelector("#ajaxForm").addEventListener("submit", function (e) {
    e.preventDefault(); // Standard-Submit verhindern

    let formData = new FormData(this);

    fetch("submit.php", {
        method: "POST",
        body: formData
    })
    .then(response => response.json())  // Antwort als JSON
    .then(data => {
        if (data.status === "success") {
            document.querySelector("#response").textContent = data.message;
        } else {
            alert("Fehler: " + data.message); // Fehlernachricht anzeigen
        }
    })
    .catch(error => console.error("Fehler:", error));
});

Natürlich kann der Check, ob alle Daten korrekt eingegeben wurden, nicht die Prüfung bei der verarbeitenden Anwendung ersetzen.