Ein Formular prüfen

Menschen machen Fehler: Sie lassen ein Feld leer, tippen vor ihren Namen ein Leerzeichen oder ein Wort, wo eine Zahl hingehört. Bevor eine Seite verwendet, was in ein Formular getippt wurde, prüft ihr Skript es, und wenn etwas nicht stimmt, sagt es direkt neben dem Feld, was.

Beginne mit trim(). Es gibt den Text ohne die Leerzeichen an seinem Anfang und Ende zurück; die Leerzeichen im Inneren bleiben:

const name = "  Anna Schmidt ".trim();
console.log(`[${name}]`);

[Anna Schmidt]

Ein Feld, in dem nur Leerzeichen stehen, ergibt dann "", also erkennt eine Prüfung auf ein leeres Feld es ebenfalls. Als Nächstes kannst du mit length prüfen, wie lang der Text ist. Jedes Feld hat daneben einen Platz für seine Fehlermeldung, zum Beispiel <span id="spitzname-fehler"></span> (ein span ist ein Textstück innerhalb einer Zeile, hier direkt hinter dem Feld), und der Handler füllt ihn aus oder leert ihn, wenn das Feld richtig ist:

formular.addEventListener("submit", function (event) {
    event.preventDefault();
    const spitzname = spitznameInput.value.trim();
    if (spitzname === "") {
        spitznameFehler.textContent = "Gib einen Spitznamen ein.";
    } else if (spitzname.length < 3) {
        spitznameFehler.textContent = "Der Spitzname braucht mindestens 3 Zeichen.";
    } else {
        spitznameFehler.textContent = "";
        ergebnis.textContent = `Hallo, ${spitzname}!`;
    }
});

Das Leeren der Meldung ist wichtig: Ohne es bliebe der Fehler auf der Seite, auch nachdem der Nutzer das Feld korrigiert hat.

Zahlen. Number() macht aus Text, der keine Zahl ist, NaN, und das erkennst du nicht mit ===. NaN ist nichts gleich, nicht einmal sich selbst, also ist alter === NaN immer false. Verwende Number.isNaN(alter), was true ist, wenn alter den Wert NaN hat. Auch Vergleiche mit NaN sind immer false: NaN < 1 ist false, also lässt eine Prüfung wie alter < 1 NaN durch. Und denke daran, dass ein leeres Feld Number("") ergibt, also 0.

Mehrere Felder. Ein gutes Formular zeigt alle seine Probleme auf einmal, nicht eines nach dem anderen. Prüfe also jedes Feld und merke dir in einer Variable, ob etwas falsch war:

let gueltig = true;

if (spitzname === "") {
    spitznameFehler.textContent = "Gib einen Spitznamen ein.";
    gueltig = false;
} else {
    spitznameFehler.textContent = "";
}

if (Number.isNaN(alter) || alter < 1) {
    alterFehler.textContent = "Gib dein Alter ein.";
    gueltig = false;
} else {
    alterFehler.textContent = "";
}

if (gueltig) {
    ergebnis.textContent = `Hallo, ${spitzname}!`;
}

Nur wenn jedes Feld richtig ist, erfüllt das Formular seine Aufgabe.