Formulare
Formulardaten mit JavaScript lesen, validieren und ohne Neuladen absenden — der Standard-Workflow moderner Web-Apps.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
submit abfangen
Das submit-Event feuert am form-Element.
preventDefault() verhindert das Neuladen der Seite.
So übernimmt JavaScript den Versand, etwa per fetch an eine API.
form.addEventListener('submit', async (event) => {
event.preventDefault();
const daten = new FormData(form);
await fetch('/api/kontakt', {
method: 'POST',
body: daten
});
});Werte lesen
FormData sammelt alle Feldwerte anhand der name-Attribute.
Einzelne Felder liest man auch direkt über input.value oder checkbox.checked.
const daten = new FormData(form);
daten.get('email');
Object.fromEntries(daten); // als ObjektValidierung
HTML liefert die erste Stufe: required, minlength, type="email".
JavaScript ergänzt eigene Regeln und zeigt verständliche Fehlermeldungen. Serverseitige Validierung bleibt trotzdem Pflicht.
Vertiefung
FormData und Validierung
Beim submit-Event musst du preventDefault() aufrufen, sonst lädt der Browser die Seite neu. FormData liest alle Felder anhand ihrer name-Attribute.
HTML-Validierung ist die erste Stufe, aber kein Sicherheitsmechanismus. Serverseitige Prüfung bleibt Pflicht; JavaScript liefert nur schnelles Feedback.
form.addEventListener("submit", (event) => {
event.preventDefault();
const daten = new FormData(form);
console.log(Object.fromEntries(daten));
});Merksatz: preventDefault verhindert den Reload. FormData macht Feldwerte einfach lesbar.
Übungsaufgabe
Formular validieren
Fange das submit-Event ab, lies E-Mail und Passwort aus und zeige eine Fehlermeldung, wenn die E-Mail kein @ enthält oder das Passwort zu kurz ist.
Das soll dein Programm können
- submit-Listener mit preventDefault
- FormData und get
- E-Mail- und Passwortprüfung
- Fehlermeldung im DOM anzeigen
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
formData.get("email") liefert einen String. Für die Anzeige: fehler.textContent = "...".
Lösung anzeigen
const form = document.querySelector("#login");
const fehler = document.querySelector("#fehler");
form.addEventListener("submit", (event) => {
event.preventDefault();
const daten = new FormData(form);
const email = String(daten.get("email") ?? "").trim();
const passwort = String(daten.get("passwort") ?? "");
if (!email.includes("@")) {
fehler.textContent = "Bitte eine gültige E-Mail eingeben.";
return;
}
if (passwort.length < 8) {
fehler.textContent = "Das Passwort braucht mindestens 8 Zeichen.";
return;
}
fehler.textContent = "";
console.log("Formular ist gültig");
});Warum funktioniert das?
preventDefault verhindert den Reload. FormData liefert Strings; die Prüfungen laufen vor dem Absenden. Serverseitige Validierung ersetzt das nicht.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Der Lernzähler
Baue einen kleinen Zähler, der bei jedem Klick hochzählt und den Wert im DOM anzeigt. Erweitere ihn um einen Reset-Button.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.