Formularvalidierung
Gute Formulare prüfen Eingaben früh, erklären Fehler verständlich und verlassen sich nicht nur auf JavaScript.
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
Native Constraints
required markiert ein Pflichtfeld.
minlength, maxlength, min, max und step prüfen Länge und Wertebereich.
type="email" oder type="url" aktiviert passende Prüfungen und Tastaturen. pattern erlaubt einen eigenen regulären Ausdruck.
<form>
<label for="email">E-Mail</label>
<input id="email" name="email" type="email" required>
<label for="plz">Postleitzahl</label>
<input id="plz" name="plz" inputmode="numeric"
pattern="[0-9]{5}" required>
</form>Fehler verständlich ausgeben
Die eingebauten Fehlermeldungen des Browsers sind kurz und nicht immer hilfreich.
Ergänze einen Hinweis direkt beim Feld und verknüpfe ihn mit aria-describedby.
Verlasse dich nicht auf Farbe allein. Ein Fehler braucht Text, eine klare Position und einen sichtbaren Fokus. Die Prüfung auf dem Server bleibt trotzdem Pflicht.
<label for="passwort">Passwort</label>
<input id="passwort" type="password" minlength="8" required
aria-describedby="passwort-hinweis">
<p id="passwort-hinweis">Mindestens 8 Zeichen.</p>Mit JavaScript prüfen
checkValidity() prüft alle nativen Regeln, reportValidity() zeigt die Meldungen an.
Mit setCustomValidity() kannst du eigene Botschaften setzen.
JavaScript ersetzt die Serverprüfung nicht: Wer die Seite manipuliert, kann Browser-Regeln umgehen. Gute Validierung prüft auf beiden Seiten.
const form = document.querySelector("form");
form.addEventListener("submit", (event) => {
if (!form.checkValidity()) {
event.preventDefault();
form.reportValidity();
}
});Vertiefung
Validierung ist mehr als ein rotes Feld
Native Constraints sind schnell eingebaut, aber die Browser-Meldungen sind knapp. Ein sichtbarer Hinweis, eine klare Beschriftung und ein Fokus auf das erste fehlerhafte Feld machen Formulare deutlich besser.
Browser-Validierung ist Komfort, keine Sicherheit. Sie lässt sich umgehen, deshalb muss der Server dieselben Regeln erneut prüfen. setCustomValidity() hilft für eigene Meldungen, muss aber nach einer Korrektur wieder geleert werden.
const plz = document.querySelector("#plz");
plz.addEventListener("input", () => {
plz.setCustomValidity("");
if (!/^[0-9]{5}$/.test(plz.value)) {
plz.setCustomValidity("Bitte fünf Ziffern eingeben.");
}
});Merksatz: Prüfe im Browser für gutes Feedback und auf dem Server für Sicherheit. Fehlermeldungen müssen Text, Kontext und einen sichtbaren Fokus bieten.
Übungsaufgabe
Anmeldeformular mit Validierung
Baue ein Anmeldeformular mit Name, E-Mail und Passwort. Nutze native Prüfregeln, beschriftete Felder und einen verständlichen Hinweis beim Passwort.
Das soll dein Programm können
- Drei Felder mit label und passendem type
- required für alle Pflichtfelder
- E-Mail-Feld mit type="email"
- Passwort mit minlength="8" und aria-describedby
- Ein Absende-Button mit type="submit"
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
Verknüpfe jedes label über for mit der id des Feldes. Der Passwort-Hinweis bekommt eine id, die im input über aria-describedby referenziert wird.
Lösung anzeigen
<form action="/anmelden" method="post">
<label for="name">Name</label>
<input id="name" name="name" autocomplete="name" required>
<label for="email">E-Mail</label>
<input id="email" name="email" type="email" autocomplete="email" required>
<label for="passwort">Passwort</label>
<input id="passwort" name="passwort" type="password"
minlength="8" autocomplete="new-password" required
aria-describedby="passwort-hinweis">
<p id="passwort-hinweis">Mindestens 8 Zeichen.</p>
<button type="submit">Anmelden</button>
</form>Warum funktioniert das?
Die nativen Regeln prüfen Pflichtfelder, E-Mail-Format und Passwortlänge. aria-describedby verbindet das Feld mit dem sichtbaren Hinweis. Die Serverprüfung bleibt zusätzlich notwendig.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Deine Lieblingsseite
Baue eine kleine Seite über ein Thema, das dich wirklich interessiert. Nutze die Struktur, die du in dieser Lektion gelernt hast.
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.