A HTML beépített validációt biztosít attribútumokon keresztül, így a böngésző blokkolja az érvénytelen beküldéseket és üzeneteket jelenít meg — nincs szükség JavaScriptre.
html
Submit
A HTML beépített validációt biztosít attribútumokon keresztül, így a böngésző blokkolja az érvénytelen beküldéseket és üzeneteket jelenít meg — nincs szükség JavaScriptre.
Submit
A validációs attribútumok: required, min/max, minlength/maxlength, pattern (regex), és a típus maga (email, url, number). Beküldéskor a böngésző ellenőrzi őket, leállítja a beküldést, ha valamelyik meghiúsul, és egy natív buborékot jelenít meg az első érvénytelen mezőn.
input:invalid { border-color: red; }
input:valid { border-color: green; }
input:user-invalid { border-color: red; } /* only after the user has interacted — nicer UX */
Olvassa és testreszabhatja a validációt JavaScriptben:
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
A setCustomValidity lehetővé teszi olyan szabályok hozzáadását, amelyeket az attribútumok nem tudnak kifejezni (pl. "erősítsd meg, hogy a jelszó megegyezik").
<form novalidate>...</form> <!-- skip native validation (handle in JS) -->
Mindig validáljon a szerveren is — az ügyféloldali validáció a UX-ért van; a felhasználók megkerülhetik.
A natív validáció ingyenesen biztosít Önnek hozzáférhető, lokalizált hibaüzeneteket és azonnali visszajelzést.
Az egyéni szabályok érdekében kombinálja a deklaratív attribútumokat a Constraint Validation API-val — de soha ne bízzon benne az egyetlen védelmi vonalként; a szervernek is validálnia kell.