Někdo odešle váš formulář s neplatnou e-mailovou adresou. Formulář ji přijme. Uvítací e-mail se vrátí jako nedoručený. Dotyčný se od vás nic nedozví. Jiný člověk odešle formulář s chybějícími povinnými poli. Formulář přesto projde. Váš tým má neúplná data. Obě selhání vznikají proto, že validace chybí nebo je špatná.
Validace je kontrola, že data z formuláře jsou platná, než je přijmete. Probíhá na dvou místech: v prohlížeči a na serveru. Záleží na obou. Tento článek vysvětluje, jak validace funguje, proč potřebujete obojí, a jaké jsou časté chyby.
Co je validace?
Validace kontroluje, že data ve formuláři splňují vaše požadavky. Povinná pole mají hodnotu. Pole pro e-mail obsahují zavináč. Pole pro telefon obsahují jen čísla. Nahrané soubory jsou pod limitem velikosti.
Bez validace se do vašeho systému dostanou špatná data. Váš backend spadne. Vaše e-mailová služba odmítne zprávy. Ztrácíte čas čištěním nekvalitních dat.
Validace probíhá na dvou místech: na straně klienta (v prohlížeči, před odesláním) a na straně serveru (na vašem serveru, po odeslání). Obě jsou nezbytné.
Validace na straně klienta
Prohlížeč umí zkontrolovat data z formuláře ještě před odesláním. HTML má vestavěné atributy validace. Validovat umí i JavaScript.
Validace v HTML
<input type="email" required> ověří, že pole má hodnotu a vypadá jako e-mail. Pokud se uživatel pokusí odeslat neplatný formulář, prohlížeč zobrazí chybovou hlášku.
Atributy validace v HTML zahrnují required, který zajistí, že pole musí mít hodnotu, min/max u čísel, které drží hodnoty v rozsahu, minlength/maxlength, které vynucují počet znaků, pattern, který odpovídá regulárním výrazům, a type, který ověřuje samotný typ pole. Například type="email" kontroluje formát, zatímco type="number" odmítne nečíselný vstup.
Validace v HTML funguje okamžitě bez JavaScriptu, prohlížeč zobrazuje srozumitelné chybové hlášky a mobilní klávesnice se přizpůsobí typu pole. Nevýhodou je, že chybové hlášky prohlížeče jsou obecné a někdy nejasné, bez JavaScriptu je nelze upravit a různé prohlížeče zobrazují různé hlášky.
Validace v JavaScriptu
Pro větší kontrolu validujte v JavaScriptu pomocí function validateEmail(email) { const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return regex.test(email); } a form.addEventListener('submit', (e) => { if (!validateEmail(input.value)) { e.preventDefault(); showError('Please enter a valid email'); } });. Validace v JavaScriptu umožňuje psát vlastní pravidla, zobrazovat vlastní chybové hlášky a validovat pole už při psaní, tedy v reálném čase. Nevýhody zahrnují potřebu JavaScriptu (není spolehlivý z hlediska bezpečnosti), více kódu k údržbě a možné zobrazení chyb dřív, než uživatel dopíše, pokud validujete při události input.
Validace na straně serveru
Po odeslání formuláře server data zkontroluje znovu. Tady se odehrává skutečná bezpečnost.
Validaci na straně klienta nikdy nevěřte. Někdo může vypnout JavaScript. Někdo může požadavek zachytit a data upravit. Někdo může pomocí curlu nebo jiného nástroje odeslat špatná data, aniž by vůbec prošel vaším formulářem.
Validace na straně serveru je jediná ochrana, kterou máte. Není volitelná.
Když server obdrží odeslaný formulář, zkontrolujte, že povinná pole jsou přítomna, ověřte formát e-mailu, telefonu a adres URL, zkontrolujte, že čísla jsou v očekávaném rozsahu, ověřte, že nahrané soubory mají správný typ a velikost, zajistěte, aby data nebyla příliš dlouhá, a sanitizujte data, abyste zabránili injekčním útokům. Pokud validace selže, pošlete chybovou odpověď, aby se formulář nezpracoval a uživatel se dozvěděl, co je špatně. Validace na straně serveru je pomalejší, protože uživatel musí čekat na odpověď, ale je spolehlivá a bezpečná, takže ji dělejte vždy.
Kdy který typ validace použít
Validace na straně klienta je pro pohodlí uživatele. Okamžitě mu řekne, že je něco špatně. Nemusí formulář odeslat, aby zjistil, že e-mail je neplatný.
Validace na straně serveru je pro integritu dat a bezpečnost. Zajistí, že špatná data se do vašeho systému nikdy nedostanou.
Používejte obě. Validaci na straně klienta pro rychlost a zpětnou vazbu. Validaci na straně serveru pro bezpečí a zabezpečení.
Časté chyby při validaci
Jen validace na straně klienta
Někdo vypne JavaScript a vaše validace je pryč. Někdo pošle pomocí curlu metodou POST špatná data a vaše validace se nikdy nespustí. Skončíte s odpadem v databázi.
Vždy validujte na serveru. Strana klienta je navíc.
Příliš přísná validace
Vaše validace e-mailu je tak přísná, že neprojdou ani skutečné e-maily. Vaše validace telefonu přijímá jen americký formát a odmítá mezinárodní čísla. Vaše pole pro jméno odmítá spojovníky, apostrofy a další platné znaky.
Otestujte validaci na skutečných datech. Požádejte o test uživatele z jiných zemí. Pravidla validace nastavte co nejpovolnější, a přesto zachyťte špatná data.
Nejasné chybové hlášky
"Neplatný vstup." Co je neplatné? Které pole? Co mají udělat?
Chybové hlášky musí být konkrétní: "E-mail musí mít 5 až 254 znaků." "Telefon musí mít 10 číslic." "Heslo musí obsahovat alespoň jedno číslo."
Chybu zobrazte vedle pole, které ji způsobilo. Neskrývejte chyby v souhrnném seznamu, kde je uživatel musí hledat.
Validace citlivých dat na klientovi
Čísla platebních karet ani hesla neposílejte přes validaci na straně klienta. Nezobrazujte je v konzoli prohlížeče. Neukládejte je do logů.
Citlivá data validujte jen na serveru, přes HTTPS.
Žádná validace nahraných souborů
Někdo nahraje soubor o velikosti 100 megabajtů. Vašemu serveru dojde úložiště. Někdo nahraje spustitelný soubor. Váš server chytí virus.
Typ a velikost souboru validujte na serveru. Zkontrolujte, že soubor je skutečně takového typu, za jaký se vydává. Nespoléhejte jen na příponu souboru nebo typ MIME.
Validace v reálném čase a při odeslání
Validace v reálném čase kontroluje každé pole při psaní. Uživatel okamžitě vidí chybovou hlášku, pokud zadá něco špatně. Může to hned opravit.
Nevýhoda: Pokud chyby zobrazíte příliš brzy, uživatel bude frustrovaný. Zobrazujte chyby až poté, co uživatel pole opustí (při události blur), ne zatímco ještě píše.
Validace při odeslání kontroluje vše ve chvíli, kdy se formulář odešle. Uživatel vyplní celý formulář a pak uvidí všechny chyby najednou.
Nevýhoda: Uživatel se musí vrátit a opravit chyby poté, co už formulář odeslal. To přeruší plynulost.
Doporučený postup: Validujte při blur (když uživatel pole opustí) pro zpětnou vazbu v reálném čase. Validujte při odeslání jako závěrečnou kontrolu. Pokud něco selže, zobrazte všechny chyby najednou.
Validace pro konkrétní typy polí
Validace e-mailu
Úplná validace e-mailu je složitá (RFC 5322 má 60 stran), takže ve většině případů stačí zkontrolovat, že hodnota obsahuje zavináč a doménu, pomocí const email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;. Tím zachytíte většinu neplatných e-mailů, aniž by byla kontrola tak přísná, že neprojdou skutečné e-maily.
Validace telefonu
Formát telefonu se liší podle země. Americký formát je (123) 456-7890, britský formát je +44 20 7946 0958 a Německo používá +49 30 123456. Přijímejte mezinárodní formát, na serveru odstraňte nečíselné znaky a telefon ukládejte jako řetězec, ne jako číslo, aby se v některých zemích zachovaly úvodní nuly.
Validace hesla
Dobré heslo je dlouhé (alespoň 12 znaků) a těžko uhodnutelné. Nevyžadujte speciální znaky ani kombinaci velkých a malých písmen, protože tato pravidla uživatele frustrují a bezpečnost nezlepšují. Dobré požadavky na heslo jsou alespoň 12 znaků a vyhnutí se běžným vzorům (jako "123456" nebo jméno uživatele). Použijte měřič síly hesla, který uživateli ukáže, jak silné jeho heslo je.
Validace data
Zkontrolujte, že datum je podle potřeby v budoucnosti nebo v minulosti. Formulář pro registraci na událost má odmítnout data v minulosti. Formulář s datem narození má odmítnout data v budoucnosti.
Jak WEMASY zvládá validaci formulářů
Formuláře WEMASY zahrnují vestavěnou validaci na straně klienta (povinná pole, formát e-mailu atd.) pro okamžitou zpětnou vazbu. Při odeslání formulářů servery WEMASY všechna data před zpracováním znovu zvalidují. Uživatelé tak dostanou rychlou zpětnou vazbu a vaše data jsou chráněna.
Funkce validace najdete u svého tarifu WEMASY.