Kontrola formuláře v JavaScriptu před odesláním

V návodu o formulářích v HTML jsme postavili formulář. Teď ho doplníme o kontrolu, která běží přímo v prohlížeči. Návštěvník hned vidí, co je špatně, a nemusí čekat na odpověď serveru.

Formulář s identifikátorem

<form id="kontakt" action="/odeslat.php" method="post">
  <input type="text" id="jmeno" name="jmeno" required>
  <input type="email" id="email" name="email" required>
  <p id="chyba"></p>
  <button type="submit">Odeslat</button>
</form>

JavaScript potřebuje najít formulář a jeho pole. K tomu slouží atribut id, který jsme použili u formuláře i u chybového odstavce.

Zachycení odeslání

const form = document.getElementById("kontakt");
const chyba = document.getElementById("chyba");

form.addEventListener("submit", function (event) {
  // ... kontrola ...
});

Událost submit nastane ve chvíli, kdy návštěvník formulář odešle. Pomocí event.preventDefault() odeslání zastavíme, dokud nejsou data v pořádku.

Samotná kontrola

form.addEventListener("submit", function (event) {
  const jmeno = document.getElementById("jmeno").value.trim();
  const email = document.getElementById("email").value.trim();

  if (jmeno === "") {
    event.preventDefault();
    chyba.textContent = "Vyplňte prosím jméno.";
    return;
  }
  if (email.indexOf("@") === -1) {
    event.preventDefault();
    chyba.textContent = "E-mail musí obsahovat zavináč.";
    return;
  }
  chyba.textContent = "";
});

Metoda trim() odstraní mezery na začátku a na konci, takže pole s jedinou mezerou se nepovažuje za vyplněné. Podmínka if rozhoduje, zda se odeslání zastaví. Kontrola indexOf("@") je jednoduchá a na úvod stačí. Přesnou kontrolu e-mailu ale děláme na serveru.

Časté chyby

• Zapomenuté preventDefault. Bez něj se formulář odešle i přes chybu v kontrole.
• Porovnání bez převodu. Hodnoty z polí jsou vždy text, i když vypadají jako čísla. Počítejte s tím a pro porovnání čísel je převeďte pomocí Number().
• Záměna value a textContent. value je obsah pole, textContent je text v elementu, třeba chybová zpráva.

Teď umíte ohlídat, co návštěvník do formuláře napíše, a upozornit ho dřív, než data odejdou. Dál můžete pokračovat s PHP, kde se data přijmou a uloží. 👍