JavaScript Formulare
JavaScript Formulare
Werte auslesen, validieren, Fehlermeldungen anzeigen und Submit verhindern. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.
Lernziele
- Formularwerte mit JavaScript lesen
- clientseitige Validierung umsetzen
- Fehlermeldungen verständlich anzeigen
Erklärung
JavaScript kann Formulare komfortabler machen: Eingaben prüfen, Fehler direkt anzeigen, Buttons deaktivieren oder Daten für einen Request vorbereiten. Diese Prüfung verbessert UX, ersetzt aber niemals Backend-Validierung.
Wichtig ist, am submit-Event des Formulars zu arbeiten. So funktioniert die Logik auch, wenn Benutzer Enter drücken.
Beispiele
form.addEventListener("submit", (event) => {
event.preventDefault();
const email = form.elements.email.value.trim();
const message = form.elements.message.value.trim();
if (!email || !message) {
error.textContent = "Bitte fülle alle Pflichtfelder aus.";
return;
}
error.textContent = "";
});
Die Logik liest Werte, prüft sie und bricht bei Fehlern früh ab.
<p id="form-error" role="alert"></p>
role="alert" kann Screenreader auf neue Fehlermeldungen aufmerksam machen.
Typische Fehler
- Nur Placeholder statt Labels verwenden.
- Fehler nur farblich markieren.
- Validierung nur im Frontend umsetzen und Backend vergessen.
Best Practices
- Zeige Fehlermeldungen in Textform.
- Trimme Eingaben vor der Prüfung.
- Halte HTML-Validierung und JavaScript-Validierung konsistent.
Kleine Übung
Baue ein Kontaktformular, das leere Felder erkennt und eine Fehlermeldung neben dem Formular anzeigt.
Zusammenfassung
JavaScript ergänzt Webseiten um Verhalten. Robuster Code arbeitet mit klaren Daten, kleinen Funktionen, sicheren DOM-Operationen, guter Fehlerbehandlung und nachvollziehbarer Struktur.
Weiterführende Seiten
Zuletzt aktualisiert: 7. Juni 2026