Kapitel 16: Formularvalidierung (Praxis-Muss!)

Formularvalidierung ist sehr wichtig für Webentwickler. In diesem Kapitel lernen Sie, wie Sie Eingabedaten prüfen.

16.1 Formular-Elemente abrufen

Bevor Sie validieren können, müssen Sie die Formular-Elemente abrufen.

Input-Feld abrufen

<form id="meinForm">
    <input type="text" id="name" name="name">
    <input type="email" id="email" name="email">
    <input type="password" id="passwort" name="passwort">
    <button type="submit">Absenden</button>
</form>

<script>
    let nameInput = document.getElementById("name");
    let emailInput = document.getElementById("email");
    let passwortInput = document.getElementById("passwort");
    let form = document.getElementById("meinForm");

    console.log(nameInput.value);  // Aktueller Wert des Eingabefelds
</script>

Formular absenden abfangen (submit-Event)

form.addEventListener("submit", function(event) {
    // ⚠️ WICHTIG: Standardverhalten verhindern!
    event.preventDefault();

    // Hier Validierung durchführen...
    console.log("Formular wird geprüft...");
});

16.2 Eingabe nicht leer prüfen (Non-empty Validation)

Die häufigste Validierung: Prüfen, ob ein Feld nicht leer ist.

Grundlegende Leer-Prüfung

let nameInput = document.getElementById("name");

// Methode 1: value.length prüfen
if (nameInput.value.length === 0) {
    alert("Name darf nicht leer sein!");
}

// Methode 2: value.trim() verwenden (Leerzeichen entfernen)
if (nameInput.value.trim() === "") {
    alert("Name darf nicht leer sein!");
}

Praxis-Beispiel: Komplette Formularvalidierung

<form id="registrierungForm">
    <div>
        <label>Name:</label>
        <input type="text" id="name">
        <span id="nameFehler" style="color: red;"></span>
    </div>
    <button type="submit">Registrieren</button>
</form>

<script>
    let form = document.getElementById("registrierungForm");
    let nameInput = document.getElementById("name");
    let nameFehler = document.getElementById("nameFehler");

    form.addEventListener("submit", function(event) {
        event.preventDefault();  // Standardverhalten verhindern

        // Fehler zurücksetzen
        nameFehler.textContent = "";

        // Validierung
        if (nameInput.value.trim() === "") {
            nameFehler.textContent = "Name darf nicht leer sein!";
            return;  // Funktion beenden
        }

        // Wenn alles okay ist
        alert("Registrierung erfolgreich!");
        form.reset();  // Formular zurücksetzen
    });
</script>

16.3 Handynummer / E-Mail-Format prüfen (Reguläre Ausdrücke)

Für komplexe Validierung verwenden wir reguläre Ausdrücke (Regular Expressions / RegExp).

E-Mail-Validierung

function validiereEmail(email) {
    // Einfacher regulärer Ausdruck für E-Mail
    let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
}

// Testen
console.log(validiereEmail("max@example.com"));  // true
console.log(validiereEmail("ungültig"));           // false

Handynummer-Validierung (Deutschland)

function validiereHandynummer(nummer) {
    // Deutsche Handynummer: +49 oder 0, dann 151/160/170 etc., dann 7-8 Ziffern
    let nummerRegex = /^(\+49|0)[1-9]\d{1,4}\d{7,8}$/;
    return nummerRegex.test(nummer);
}

// Testen
console.log(validiereHandynummer("015112345678"));  // true
console.log(validiereHandynummer("+4915112345678"));  // true
console.log(validiereHandynummer("12345"));          // false

Passwort-Validierung (Sicherheit)

function validierePasswort(passwort) {
    // Mindestens 8 Zeichen, mindestens 1 Großbuchstabe, 1 Kleinbuchstabe, 1 Zahl
    let passwortRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;
    return passwortRegex.test(passwort);
}

// Testen
console.log(validierePasswort("Passwort123"));  // true
console.log(validierePasswort("passwort"));     // false

16.4 Formular absenden verhindern (Default-Verhalten)

event.preventDefault() ist ESSENZIELL, um das Standardverhalten des Browsers zu verhindern.

Ohne preventDefault()

form.addEventListener("submit", function(event) {
    // KEIN event.preventDefault()!
    // → Seite lädt neu (schlecht für SPA)
    // → Formulardaten werden via GET/POST gesendet (vielleicht nicht gewollt)
});

Mit preventDefault()

form.addEventListener("submit", function(event) {
    event.preventDefault();  // Seite lädt NICHT neu

    // Hier können Sie:
    // 1. Daten per AJAX senden
    // 2. Formulardaten in localStorage speichern
    // 3. Benutzer weiterleiten
    console.log("Daten werden verarbeitet...");
});

Praxis-Beispiel: AJAX-ähnliches Absenden

form.addEventListener("submit", function(event) {
    event.preventDefault();

    // Daten sammeln
    let daten = {
        name: nameInput.value,
        email: emailInput.value
    };

    console.log("Gesendete Daten:", daten);
    alert("Daten gesendet! (Simuliert)");

    // In echtem Projekt: fetch() oder axios verwenden
    // fetch("/api/registrieren", {
    //     method: "POST",
    //     headers: { "Content-Type": "application/json" },
    //     body: JSON.stringify(daten)
    // });
});

16.5 Praxis: Registrierungs-Formularvalidierung

Vollständiges Registrierungs-Formular

<form id="regForm">
    <div>
        <label>Name:</label>
        <input type="text" id="regName">
        <span id="nameFehler" style="color: red;"></span>
    </div>
    <div>
        <label>E-Mail:</label>
        <input type="email" id="regEmail">
        <span id="emailFehler" style="color: red;"></span>
    </div>
    <div>
        <label>Passwort:</label>
        <input type="password" id="regPasswort">
        <span id="passwortFehler" style="color: red;"></span>
    </div>
    <div>
        <label>Passwort bestätigen:</label>
        <input type="password" id="regPasswortBestaetigen">
        <span id="bestaetigenFehler" style="color: red;"></span>
    </div>
    <button type="submit">Registrieren</button>
</form>

<script>
    let regForm = document.getElementById("regForm");
    let regName = document.getElementById("regName");
    let regEmail = document.getElementById("regEmail");
    let regPasswort = document.getElementById("regPasswort");
    let regPasswortBestaetigen = document.getElementById("regPasswortBestaetigen");

    regForm.addEventListener("submit", function(event) {
        event.preventDefault();

        // Fehler zurücksetzen
        document.querySelectorAll("span").forEach(span => span.textContent = "");

        let isValid = true;

        // 1. Name prüfen
        if (regName.value.trim() === "") {
            document.getElementById("nameFehler").textContent = "Name darf nicht leer sein!";
            isValid = false;
        }

        // 2. E-Mail prüfen
        let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(regEmail.value)) {
            document.getElementById("emailFehler").textContent = "Ungültige E-Mail-Adresse!";
            isValid = false;
        }

        // 3. Passwort prüfen
        let passwortRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;
        if (!passwortRegex.test(regPasswort.value)) {
            document.getElementById("passwortFehler").textContent = "Passwort muss mind. 8 Zeichen, Groß-/Kleinbuchstaben und Zahlen enthalten!";
            isValid = false;
        }

        // 4. Passwort bestätigen prüfen
        if (regPasswort.value !== regPasswortBestaetigen.value) {
            document.getElementById("bestaetigenFehler").textContent = "Passwörter stimmen nicht überein!";
            isValid = false;
        }

        // Wenn alles gültig ist
        if (isValid) {
            alert("Registrierung erfolgreich!");
            regForm.reset();
        }
    });
</script>

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ Formular-Elemente mit getElementById() abrufen
• ✅ submit-Event abfangen
• ✅ Eingabe auf Leere prüfen (value.trim() === "")
• ✅ E-Mail/Handynummer mit regulären Ausdrücken validieren
• ✅ event.preventDefault() verhindert das Neuladen der Seite
• ✅ Praxis-Projekt: Komplette Registrierungs-Formularvalidierung

➡️ Nächster Schritt

Im nächsten Kapitel lernen wir Timer (setInterval, setTimeout) - Werkzeuge für zeitverzögerte Ausführung!

---

Übung:

1. Erstellen Sie ein Login-Formular mit Validierung
2. Prüfen Sie, ob E-Mail und Passwort ausgefüllt sind
3. Validieren Sie das E-Mail-Format mit einem regulären Ausdruck
4. Verhindern Sie das Absenden mit event.preventDefault()
5. Testen Sie alles im Browser