Formulář, který hlídá chyby · Programuj s Martinem

Návštěvník ti nechá vzkaz a formulář slušně upozorní, když něco zapomene vyplnit.

Ukaž mi to: formulář v HTML

Formulář je sada políček, do kterých návštěvník něco píše:

<form id="vzkaz-formular">
  <label for="jmeno">Tvoje jméno</label>
  <input id="jmeno" type="text" placeholder="Kuba">

  <label for="zprava">Vzkaz</label>
  <textarea id="zprava" placeholder="Ahoj! Máš super web."></textarea>

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

<p id="potvrzeni"></p>

<form> obaluje celý formulář. <input> je jednořádkové políčko, <textarea> víceřádkové.
<label> je popisek políčka – díky for a id k sobě patří (kliknutí na popisek skočí do políčka).
placeholder je šedý nápovědný text.
Tlačítko s type="submit" formulář odesílá.

A trochu CSS, ať to vypadá k světu:

form {
  display: flex;
  flex-direction: column;   /* políčka pod sebe */
  gap: 8px;
  max-width: 400px;
}

input, textarea {
  font: inherit;
  padding: 10px;
  border: 1px solid #d6d3d1;
  border-radius: 8px;
}

.chyba {
  border-color: #dc2626 !important;
  background-color: #fee2e2;
}

flex-direction: column je flexbox naležato → nastojato: děti se rovnají pod sebe.

Ukaž mi to: kontrola v JavaScriptu

const formular = document.getElementById("vzkaz-formular");
const jmeno = document.getElementById("jmeno");
const zprava = document.getElementById("zprava");
const potvrzeni = document.getElementById("potvrzeni");

formular.addEventListener("submit", (udalost) => {
  udalost.preventDefault();   // zastav normální odeslání (stránka by se obnovila)

  // Sundej staré označení chyb
  jmeno.classList.remove("chyba");
  zprava.classList.remove("chyba");

  // Zkontroluj vyplnění
  if (jmeno.value.trim() === "") {
    jmeno.classList.add("chyba");
    potvrzeni.textContent = "Zapomněl(a) jsi na jméno. 🙂";
    return;
  }

  if (zprava.value.trim() === "") {
    zprava.classList.add("chyba");
    potvrzeni.textContent = "A co mi chceš vzkázat? Napiš něco.";
    return;
  }

  // Všechno v pořádku
  potvrzeni.textContent = "Díky za vzkaz, " + jmeno.value + "! 💌";
  formular.reset();   // vyprázdni políčka
});

Novinky:

submit – událost „formulář se odesílá”. Posloucháme ji na formuláři, ne na tlačítku.
udalost.preventDefault() – „nedělej, co bys normálně udělal”. Bez toho by se stránka obnovila a náš skript by nedostal šanci.
.value – co je v políčku napsané. .trim() ořeže mezery („ ” se počítá jako prázdné!).
return – okamžitě skonči funkci (další kontroly už nemá smysl dělat).

💡

Kam se vzkaz odešle? Zatím nikam – nemáme server, který by ho přijal. Vzkaz jen zkontrolujeme a poděkujeme. Ale zapamatuj si tohle místo: v Úrovni 3 postavíme opravdový server s návštěvní knihou a tenhle formulář na něj napojíme. Pak se vzkazy budou doopravdy ukládat!

Teď ty 💪

Přidej na svůj web formulář, který dává u tvého projektu smysl, s kontrolou vyplnění:

🏫 Vzkaz pro školu – jméno + vzkaz (přesně podle ukázky).
🙋 Napiš mi – jméno + vzkaz, klidně přidej políčko „tvoje oblíbená hra”.
🌍 Tip na výlet – jméno + „kam bychom měli vyrazit a proč”.
⚽ Přihláška na trénink – jméno + věk (<input type="number">) + zkontroluj, že věk je vyplněný a je aspoň 6: if (vek.value < 6) { ... }.

⚠️

Bezpečnostní návyk profíků: nikdy nevěř tomu, co uživatel napíše. Vždycky to zkontroluj – prázdné pole, nesmyslný věk, příliš dlouhý text. Dnes to děláš kvůli slušnosti, u opravdových aplikací je to první obranná linie proti útočníkům.

✅

Kontrola: Odeslání prázdného formuláře políčko červeně označí a vypíše hlášku. Vyplněný formulář poděkuje jménem a vyprázdní se. Slušné, přátelské, profesionální.

Co si z téhle lekce odnést

Formulář: <form>, <input>, <textarea>, <label> a událost submit s preventDefault().
.value.trim() = co uživatel napsal, bez mezer okolo.
Vstupy od uživatele se vždycky kontrolují – to je základ bezpečného programování.