Kontrola formuláře

Lidé dělají chyby: nechají textové pole prázdné, napíšou před jméno mezeru nebo slovo tam, kam patří číslo. Než stránka použije, co kdo napsal do formuláře, její skript to zkontroluje, a když je něco špatně, řekne co, a to přímo u textového pole.

Začněte metodou trim() (anglicky zastřihnout). Vrátí text bez mezer na začátku a na konci; mezery uvnitř zůstanou:

const jmeno = "  Anna Nováková ".trim();
console.log(`[${jmeno}]`);

[Anna Nováková]

Textové pole, ve kterém jsou jen mezery, pak dá "", takže ho zachytí i kontrola, jestli je prázdné. Dál můžete zkontrolovat, jak dlouhý text je, pomocí length. Každé textové pole má vedle sebe místo pro chybovou zprávu, třeba prvek <span id="prezdivka-chyba"></span> (span je kousek textu uvnitř řádku, tady hned za textovým polem). Obsluha do něj zprávu vypíše, nebo ho vyprázdní, když je textové pole v pořádku:

formular.addEventListener("submit", function (event) {
    event.preventDefault();
    const prezdivka = vstupPrezdivka.value.trim();
    if (prezdivka === "") {
        chybaPrezdivka.textContent = "Zadejte přezdívku.";
    } else if (prezdivka.length < 3) {
        chybaPrezdivka.textContent = "Přezdívka musí mít aspoň 3 znaky.";
    } else {
        chybaPrezdivka.textContent = "";
        vysledek.textContent = `Ahoj, ${prezdivka}!`;
    }
});

Vyprázdnit zprávu je důležité: jinak by chyba zůstala na stránce, i když ji uživatel už opravil.

Čísla. Number() převede text, který není číslo, na NaN, a to pomocí === nepoznáte. NaN se nerovná ničemu, ani sobě samému, takže vek === NaN je vždy false. Použijte Number.isNaN(vek), které vrátí true, když je ve vek hodnota NaN. A každé porovnání s NaN dá false: NaN < 1 je false, takže kontrola jako vek < 1 hodnotu NaN pustí dál. A pamatujte, že prázdné textové pole dá 0, protože Number("") je 0.

Víc textových polí. Dobrý formulář ukáže všechny problémy najednou, ne jeden po druhém. Zkontrolujte tedy každé textové pole a v proměnné si pamatujte, jestli bylo něco špatně:

let spravne = true;

if (prezdivka === "") {
    chybaPrezdivka.textContent = "Zadejte přezdívku.";
    spravne = false;
} else {
    chybaPrezdivka.textContent = "";
}

if (Number.isNaN(vek) || vek < 1) {
    chybaVek.textContent = "Zadejte svůj věk.";
    spravne = false;
} else {
    chybaVek.textContent = "";
}

if (spravne) {
    vysledek.textContent = `Ahoj, ${prezdivka}!`;
}

Teprve když je všechno v pořádku, udělá formulář svou práci.