JavaScript-Formularvalidierung: Entscheidungen treffen mit Bedingungen und Events

Warum Formularvalidierung wichtig ist – und wie sie deine App verbessert

Stell dir vor, du bestellst bei einem Online-Lieferservice ein Getränk, aber das Formular akzeptiert einen leeren Preis oder eine Größe, die es gar nicht gibt. Das Ergebnis: Fehler in der Bestellung, verärgerte Kunden und unnötiger Support-Aufwand. Genau hier kommt die JavaScript-Formularvalidierung ins Spiel. Sie stellt sicher, dass nur korrekte und vollständige Daten an den Server gesendet werden. In diesem Tutorial zeig ich dir, wie du mit Bedingungen (if/else) und Event-Listenern ein Formular Schritt für Schritt validierst – genau wie in der CPSC1520-Aufgabe.

Das Ziel: Ein Bestellformular mit Validierung

Wir bauen eine kleine Bestell-App, bei der Nutzer Artikel mit Name, Preis und Größe hinzufügen können. Das Formular soll nur dann akzeptiert werden, wenn alle Felder korrekt ausgefüllt sind. Klingt einfach? Ist es auch – mit der richtigen Struktur.

Schritt 1: Formular auswählen und Submit-Event abfangen

Zuerst verknüpfst du dein JavaScript mit dem Formular. Wähle das Formular über die Klasse new-order-form aus und füge einen Event-Listener für das submit-Event hinzu. Mit event.preventDefault() verhinderst du den standardmäßigen Neuladen der Seite – so kannst du die Daten selbst prüfen.

const form = document.querySelector('.new-order-form');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  // Hier kommt die Validierung
});

Schritt 2: Formulardaten auslesen

Nutze die elements-Eigenschaft des Formulars, um auf die einzelnen Eingabefelder zuzugreifen. Weise sie Variablen zu – das macht den Code lesbarer.

const itemName = event.target.elements['item-name'];
const itemPrice = event.target.elements['item-price'];
const itemSize = event.target.elements['item-size'];

Bedingungen treffen: Die Validierungslogik

Jetzt kommt der spannende Teil: Entscheidungen mit if/else. Wir prüfen jedes Feld einzeln und setzen eine boolesche Variable isFormValid. Nur wenn alle Prüfungen bestanden sind, rufen wir die Funktion addOrderItem auf.

Validierung des Artikelnamens

Der Name darf nicht leer sein. Ist er gültig, entfernen wir die CSS-Klasse is-invalid – andernfalls fügen wir sie hinzu und setzen isFormValid = false.

let isFormValid = true;

if (itemName.value.trim() !== '') {
  itemName.classList.remove('is-invalid');
} else {
  itemName.classList.add('is-invalid');
  isFormValid = false;
}

Validierung des Preises

Der Preis darf weder leer sein noch unter 5 liegen. Das prüfen wir mit einer logischen UND-Verknüpfung: itemPrice.value !== '' && Number(itemPrice.value) > 5.

if (itemPrice.value !== '' && Number(itemPrice.value) > 5) {
  itemPrice.classList.remove('is-invalid');
} else {
  itemPrice.classList.add('is-invalid');
  isFormValid = false;
}

Validierung der Größe

Die Größe (z. B. „small“, „medium“, „large“) darf ebenfalls nicht leer sein. Die Prüfung erfolgt analog zum Namen.

if (itemSize.value.trim() !== '') {
  itemSize.classList.remove('is-invalid');
} else {
  itemSize.classList.add('is-invalid');
  isFormValid = false;
}

Alles zusammenführen: Nur gültige Daten verarbeiten

Nach allen Prüfungen entscheidest du: Nur wenn isFormValid true ist, rufst du addOrderItem auf und setzt die Felder zurück.

if (isFormValid) {
  addOrderItem(itemName.value, itemPrice.value, itemSize.value);
  itemName.value = '';
  itemPrice.value = '';
  itemSize.value = '';
}

Testfälle – so prüfst du deine Validierung

Um sicherzustellen, dass alles funktioniert, teste folgende Szenarien:

• Ungültig: Name „Burger“, Preis leer, Größe leer → Fehler bei Preis und Größe
• Ungültig: Name leer, Preis 18, Größe leer → Fehler bei Name und Größe
• Ungültig: Name „pop“, Preis 4, Größe „small“ → Preis zu niedrig
• Gültig: Name „pop“, Preis 6, Größe „small“ → alles okay

Trend-Beispiel: Wie ein E‑Commerce-Formular bei einer Sneaker-Release funktioniert

Stell dir vor, du willst bei einem Sneaker-Drop mitmachen. Das Anmeldeformular verlangt deine Größe, Zahlungsmethode und Lieferadresse. Ohne Formularvalidierung könntest du versehentlich eine falsche Größe eingeben – und am Ende kommt Schuhgröße 38 statt 44. Mit JavaScript-Bedingungen wie if (size >= 38 && size <= 48) verhinderst du solche Fehler. Genau diese Logik wendest du heute an.

Häufige Fehler und wie du sie vermeidest

• Vergessen, event.preventDefault() aufzurufen: Die Seite wird neu geladen und deine Validierung ist weg.
• Falsche Bedingungen: Prüfe immer, ob der Wert nicht nur leer ist, sondern auch den Anforderungen entspricht (z. B. Preis > 5).
• Keine Rücksetzung der Felder: Nach erfolgreicher Eingabe sollten die Felder leer sein, damit der Nutzer direkt den nächsten Artikel hinzufügen kann.

Fazit: Mit Bedingungen und Events zu robuster Formularvalidierung

Du hast gelernt, wie du mit JavaScript ein Formular Schritt für Schritt validierst: Event-Listener, Zugriff auf Formularelemente, Bedingungen mit if/else und das Setzen von CSS-Klassen. Diese Technik ist die Grundlage für jede interaktive Webanwendung – von Bestellformularen bis zu Login-Masken. Übe die Testfälle und du wirst sehen: Sobald die Logik sitzt, kannst du jede Art von Formular selbstständig validieren.