La Constraint Validation API

HTML5 ha introdotto la validazione integrata dei moduli tramite attributi: required, type="email", type="number", min, max, pattern, minlength, maxlength. Il browser esegue automaticamente la validazione all'invio e mostra i messaggi di errore, senza bisogno di JavaScript.

:invalid corrisponde agli input che non superano la validazione; :valid corrisponde agli input che la superano. :user-invalid (moderno) corrisponde agli input solo dopo l'interazione dell'utente, evitando bordi rossi su un modulo ancora intatto. Stilizzi gli errori con queste pseudo-classi.

Ogni controllo del modulo espone una proprietà validity: un oggetto ValidityState con flag booleani: valid, valueMissing, typeMismatch, patternMismatch, rangeUnderflow, tooShort e altri. Lo esamini per decidere quale errore mostrare.

input.checkValidity() restituisce true se il valore soddisfa tutti i vincoli, altrimenti restituisce false. form.checkValidity() controlla l'intero modulo. È utile per i controlli programmatici prima di eseguire AJAX o di consentire all'utente di avanzare in una procedura guidata.

input.reportValidity() si comporta come checkValidity, ma attiva anche il tooltip integrato del browser e porta il focus sul primo campo non valido. Lo usi quando desidera ottenere gratuitamente l'interfaccia nativa; usi checkValidity quando desidera visualizzare gli errori in modo completamente personalizzato.

I messaggi predefiniti del browser ("Compili questo campo") potrebbero non corrispondere al tono o alla lingua desiderati. Li sovrascriva con input.setCustomValidity("Enter a valid coupon code"). L'input diventa non valido finché non elimina il messaggio con setCustomValidity("").

Aggiunga novalidate al modulo per sopprimere il comportamento di validazione predefinito del browser. È utile quando implementa una visualizzazione degli errori completamente personalizzata; il modulo viene comunque inviato, indipendentemente dal fatto che avrebbe superato la validazione, quindi lo controlli programmaticamente prima dell'invio.

Ogni controllo emette un evento invalid quando la validazione non riesce. Lo ascolti per sopprimere il tooltip predefinito e visualizzare un messaggio personalizzato: input.addEventListener("invalid", (e) => { e.preventDefault(); showError(input); }).

L'attributo pattern contiene un'espressione regolare JavaScript a cui il valore deve corrispondere integralmente (non servono i caratteri di ancoraggio ^ e $: sono impliciti). Lo associ all'attributo title per descrivere agli utenti il formato previsto.

La validazione HTML è una comodità per gli utenti, ma può essere aggirata da chiunque modifichi il DOM. Esegua sempre una nuova validazione sul server. I vincoli HTML servono all'esperienza utente (feedback immediato, meno richieste), non alla sicurezza.

I vincoli si sommano: <input type="number" min="18" max="120" required step="1"> deve essere presente, contenere un intero e avere un valore compreso tra 18 e 120. Il browser indica quale vincolo specifico non è stato rispettato tramite i flag di ValidityState, così può mostrare il messaggio corretto.

In che modo la pseudo-classe CSS :user-invalid differisce da :invalid?

Gli attributi di validazione nativi (required, type, pattern, min, max) e l'API ValidityState offrono una potente validazione lato client, senza JavaScript per impostazione predefinita. CSS :user-invalid applica gli stili agli errori dopo l'interazione. checkValidity/reportValidity eseguono controlli programmatici. setCustomValidity sovrascrive i messaggi predefiniti. Esegua sempre una nuova validazione sul server.