HTML oferă validare încorporată prin atribute, deci browserul blochează trimiteri invalide și afișează mesaje — nu este necesară JavaScript.
<form>
<input type="email" required /> <!-- must be present + valid email -->
<input type="text" minlength="3" maxlength="20" />
<input type="number" min="1" max="100" step="1" />
<input type="text" pattern="[A-Za-z]+" title="Letters only" /> <!-- regex -->
<button>Submit</button>
</form>
Atributele de validare: required, min/max, minlength/maxlength, pattern (regex), și tipul în sine (email, url, number). La trimitere, browserul le verifică, oprește trimiterea dacă oricare eșuează, și afișează o barbă nativă pe primul câmp invalid.
Stilizarea stărilor valide/invalide
input:invalid { border-color: red; }
input:valid { border-color: green; }
input:user-invalid { border-color: red; } /* only after the user has interacted — nicer UX */
API-ul Constraint Validation (control JS)
Poți citi și personaliza validarea în 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 îți permite să adaugi reguli pe care atributele nu le pot exprima (de ex. „confirmarea parolei se potrivește").
Dezactivare / avertismente
<form novalidate>...</form> <!-- skip native validation (handle in JS) -->
Validează întotdeauna și pe server — validarea client este pentru UX; utilizatorii o pot ocoli.
De ce contează
Validarea nativă îți oferă mesaje de eroare accesibile, localizate și feedback instant gratuit.
Combină atributele declarative cu API-ul Constraint Validation pentru reguli personalizate — dar nu-ți asuma niciodată că este singura ta linie de apărare; serverul trebuie să valideze și el.