Zpracování formuláře JavaScriptem

Událost submit – zachycení odeslání formuláře

Formulář se odesílá událostí submit. Aby JavaScript mohl data zpracovat a nestránka se nezobnovovala, musíš volat event.preventDefault():

let formular = document.getElementById('kontakt-form');

formular.addEventListener('submit', function (event) {
  event.preventDefault(); // zabrání obnovení stránky

  // Zde zpracuješ data formuláře
  console.log('Formulář byl odeslán.');
});

Metoda preventDefault() zastaví výchozí chování prohlížeče (odeslání na server a obnovení stránky). Bez ní by JavaScript stihl spustit jen část kódu, než by se stránka znovu načetla.

Čtení hodnot z formulářových polí

Hodnotu pole přečteš přes vlastnost .value:

// Textové pole
let jmeno = document.getElementById('jmeno').value;

// Textarea
let zprava = document.getElementById('zprava').value;

// Checkbox (vrací true/false)
let souhlas = document.getElementById('souhlas').checked;

// Select (rozbalovací seznam)
let tema = document.getElementById('tema').value;

Hodnoty jsou vždy textové řetězce (string) – i číselné vstupy. Pokud potřebuješ číslo, převeď ho: parseInt(document.getElementById('vek').value).

Ověření (validace) dat

Než data zpracuješ, ověř jejich správnost. JavaScript validace probíhá před odesláním – uživatel dostane okamžitou zpětnou vazbu bez obnovení stránky:

formular.addEventListener('submit', function (event) {
  event.preventDefault();

  let jmeno = document.getElementById('jmeno').value.trim();
  let email = document.getElementById('email').value.trim();
  let chyby = [];

  // Povinné pole
  if (jmeno === '') {
    chyby.push('Vyplňte jméno.');
  }

  // Ověření e-mailového formátu
  if (email === '') {
    chyby.push('Vyplňte e-mail.');
  } else if (!email.includes('@') || !email.includes('.')) {
    chyby.push('E-mail nemá správný formát.');
  }

  if (chyby.length > 0) {
    zobrazChyby(chyby);
    return; // zastav zpracování
  }

  // Vše OK – zpracuj formulář
  zpracujFormular(jmeno, email);
});

Metoda .trim() odstraní bílé znaky na začátku a konci řetězce – zabrání situaci, kdy uživatel zadá mezeru a prohlídá to jako vyplněné pole.

Přístupná zpětná vazba

Chybové hlášky a potvrzení musí být čitelné nejen vizuálně, ale i pro VoiceOver. Použij oblast s aria-live, do které JavaScriptem vložíš zprávu:

<!-- HTML -->
<div id="formular-zprava" aria-live="assertive" role="alert"></div>

<form id="kontakt-form">
  <label for="jmeno">Jméno</label>
  <input type="text" id="jmeno" name="jmeno" required>

  <label for="email">E-mail</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">Odeslat</button>
</form>

// JavaScript
function zobrazChyby(chyby) {
  let oblast = document.getElementById('formular-zprava');
  oblast.innerHTML = '';

  let seznam = document.createElement('ul');
  chyby.forEach(function (chyba) {
    let polozka = document.createElement('li');
    polozka.textContent = chyba;
    seznam.appendChild(polozka);
  });
  oblast.appendChild(seznam);
}

Díky aria-live="assertive" VoiceOver přečte zprávu okamžitě po jejím vložení – bez nutnosti, aby uživatel znovu přejel přes pole.

Kompletní příklad – kontaktní formulář

Spojení HTML, CSS a JavaScriptu do funkčního kontaktního formuláře, který zobrazí potvrzení bez obnovení stránky:

// Zachytíme odeslání
document.getElementById('kontakt-form').addEventListener('submit', function (e) {
  e.preventDefault();

  let jmeno  = document.getElementById('jmeno').value.trim();
  let email  = document.getElementById('email').value.trim();
  let zprava = document.getElementById('zprava').value.trim();
  let oblast = document.getElementById('formular-zprava');

  // Validace
  if (!jmeno || !email || !zprava) {
    oblast.textContent = 'Prosím vyplňte všechna povinná pole.';
    oblast.style.color = 'red';
    return;
  }

  // Simulace odeslání (bez serveru)
  oblast.textContent = `Děkujeme, ${jmeno}! Tvá zpráva byla přijata.
                        Odpovíme na ${email}.`;
  oblast.style.color = 'green';

  // Vymazání formuláře po odeslání
  this.reset();
});

V reálném projektu by místo simulace následovalo skutečné odeslání na server pomocí technologie fetch() nebo přes e-mailovou službu (Formspree, EmailJS a podobně).

Tip od Zdeňka

Zdeněk radí: Přístupnost formuláře jde ruku v ruce se správným JavaScriptem. aria-live oblast pro chyby je naprostý základ – bez ní VoiceOver o chybách vůbec neví a uživatel neví, proč se formulář neodesílá. A nikdy nezapomeň na event.preventDefault() jako první řádek v obsluze události submit – bez ní JavaScript ani nemá šanci se spustit. Tyto dvě věci si zapamatuj a půl práce máš hotovou.