HTML giver indbygget validering via attributter, så browseren blokerer ugyldige indleveringer og viser meddelelser — ingen JavaScript påkrævet.
html
Submit
HTML giver indbygget validering via attributter, så browseren blokerer ugyldige indleveringer og viser meddelelser — ingen JavaScript påkrævet.
Submit
Valideringsattributterne: required, min/max, minlength/maxlength, pattern (regex) og typen selv (email, url, number). Ved indlevering tjekker browseren dem, stopper indleveringen hvis nogen fejler, og viser en native boble på det første ugyldige felt.
input:invalid { border-color: red; }
input:valid { border-color: green; }
input:user-invalid { border-color: red; } /* only after the user has interacted — nicer UX */
Du kan læse og tilpasse validering i JavaScript:
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 lader dig tilføje regler, som attributterne ikke kan udtrykke (f.eks. "bekræft at adgangskode stemmer overens").
<form novalidate>...</form> <!-- skip native validation (handle in JS) -->
Valider altid på serveren også — klientvalidering er for UX; brugere kan omgå den.
Nativ validering giver dig tilgængelige, lokaliserede fejlmeddelelser og øjeblikkelig feedback gratis.
Kombiner de deklarative attributter med Constraint Validation API'en for brugerdefinerede regler — men stol aldrig på det som din eneste forsvarslinje; serveren skal validere også.