HTML tillhandahåller inbyggd validering via attribut, så webbläsaren blockerar ogiltiga inskickningar och visar meddelanden — ingen JavaScript krävs.
html
Submit
HTML tillhandahåller inbyggd validering via attribut, så webbläsaren blockerar ogiltiga inskickningar och visar meddelanden — ingen JavaScript krävs.
Submit
Valideringsattributen: required, min/max, minlength/maxlength, pattern (regex) och själva typen (email, url, number). Vid inskickning kontrollerar webbläsaren dem, stoppar inskickningen om något misslyckas och visar en inbyggd bubbla på det första ogiltiga fältet.
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äsa och anpassa 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 låter dig lägga till regler som attributen inte kan uttrycka (t.ex. "bekräftelse av lösenord matchar").
<form novalidate>...</form> <!-- skip native validation (handle in JS) -->
Validera alltid på servern också — klientvalidering är för UX; användare kan kringgå den.
Inbyggd validering ger dig tillgängliga, lokaliserade felmeddelanden och omedelbar feedback gratis.
Kombinera de deklarativa attributen med Constraint Validation API för anpassade regler — men förlita dig aldrig på det som din enda försvarslinje; servern måste också validera.