HTML poskytuje vestavěnou validaci prostřednictvím atributů, takže prohlížeč blokuje neplatná odeslání a zobrazuje zprávy — není vyžadován JavaScript.
html
Submit
HTML poskytuje vestavěnou validaci prostřednictvím atributů, takže prohlížeč blokuje neplatná odeslání a zobrazuje zprávy — není vyžadován JavaScript.
Submit
Validační atributy: required, min/max, minlength/maxlength, pattern (regex) a samotný typ (email, url, number). Při odeslání prohlížeč tyto atributy zkontroluje, zastaví odeslání, pokud některý selže, a zobrazí nativní bublinu na prvním neplatném poli.
input:invalid { border-color: red; }
input:valid { border-color: green; }
input:user-invalid { border-color: red; } /* only after the user has interacted — nicer UX */
Můžete číst a přizpůsobovat validaci v JavaScriptu:
const input = document.querySelector("input");
input.validity.valueMissing; // true if required and empty
input.validity.typeMismatch; // true if email/url format is wrong
input.checkValidity(); // returns boolean, fires invalid event
input.setCustomValidity("Passwords don't match"); // custom error message
setCustomValidity vám umožňuje přidat pravidla, která atributy nemohou vyjádřit (např. "potvrzení hesla se shoduje").
<form novalidate>...</form> <!-- skip native validation (handle in JS) -->
Vždy validujte také na serveru — klientská validace je pro uživatelský zážitek; uživatelé ji mohou obejít.
Nativní validace vám zdarma poskytuje dostupné, lokalizované chybové zprávy a okamžitou zpětnou vazbu.
Skombinujte deklarativní atributy s Constraint Validation API pro vlastní pravidla — ale nikdy se na ní nespoléhejte jako na jedinou linii obrany; server musí také validovat.