HTML fornisce validazione integrata tramite attributi, quindi il browser blocca gli invii non validi e mostra messaggi — senza JavaScript necessario.
html
Submit
HTML fornisce validazione integrata tramite attributi, quindi il browser blocca gli invii non validi e mostra messaggi — senza JavaScript necessario.
Submit
Gli attributi di validazione: required, min/max, minlength/maxlength, pattern (regex), e il tipo stesso (email, url, number). Al submit, il browser li verifica, blocca l'invio se uno fallisce, e mostra una bolla nativa sul primo campo non valido.
input:invalid { border-color: red; }
input:valid { border-color: green; }
input:user-invalid { border-color: red; } /* only after the user has interacted — nicer UX */
Puoi leggere e personalizzare la validazione in 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 ti consente di aggiungere regole che gli attributi non possono esprimere (ad es. "conferma che la password corrisponde").
<form novalidate>...</form> <!-- skip native validation (handle in JS) -->
Convalida sempre anche sul server — la validazione client è per l'UX; gli utenti possono aggirarla.
La validazione nativa ti offre messaggi di errore accessibili e localizzati e feedback immediato gratuitamente.
Combina gli attributi dichiarativi con Constraint Validation API per regole personalizzate — ma non fidarti mai come unica difesa; il server deve validare altrettanto bene.