HTML biedt ingebouwde validatie via attributen, dus de browser blokkeert ongeldige inzendingen en geeft berichten weer — geen JavaScript vereist.
html
Submit
HTML biedt ingebouwde validatie via attributen, dus de browser blokkeert ongeldige inzendingen en geeft berichten weer — geen JavaScript vereist.
Submit
De validatieattributen: required, min/max, minlength/maxlength, pattern (regex), en het type zelf (email, url, number). Bij inzending controleert de browser deze, stopt de inzending als er één mislukt, en toont een native tooltip op het eerste ongeldige veld.
input:invalid { border-color: red; }
input:valid { border-color: green; }
input:user-invalid { border-color: red; } /* only after the user has interacted — nicer UX */
Je kunt validatie in JavaScript lezen en aanpassen:
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 laat je regels toevoegen die de attributen niet kunnen uitdrukken (bijv. "bevestig wachtwoord komt overeen").
<form novalidate>...</form> <!-- skip native validation (handle in JS) -->
Valideer altijd ook aan de serverzijde — client-validatie is voor UX; gebruikers kunnen het omzeilen.
Native validatie geeft je toegankelijke, gelokaliseerde foutmeldingen en directe feedback zonder inspanning.
Combineer de declaratieve attributen met de Constraint Validation API voor aangepaste regels — maar vertrouw er nooit alleen op; de server moet ook valideren.