Validation form HTML5 (pattern, required)
La validation nativa HTML5 permette di verificare i dati dei form direttamente nel browser senza JavaScript, riducendo carico server e migliorando l'esperienza utente. Attributi come required, pattern, min, max e step offrono regole dichiarative che il browser applica al submit. Combinata con feedback visivo personalizzato, la validation HTML5 è uno strumento potente.
Attributi principali
required impone che il campo non sia vuoto; pattern impone una regex; min/max definiscono limiti numerici o di data; minlength/maxlength limitano la lunghezza testuale; step controlla l'incremento di valori numerici. Tutti questi attributi attivano la validation al submit, bloccando l'invio e mostrando un messaggio di errore browser-nativo all'utente con focus automatico sul primo campo non valido.
Pattern e regex
L'attributo pattern accetta espressioni regolari JavaScript senza delimitatori. Utile per CAP, codici fiscali, numeri di telefono. Esempio: <input pattern="[0-9]{5}" title="CAP a 5 cifre">. L'attributo title fornisce il messaggio di errore mostrato. Combina pattern con type appropriato (es. type="text" per dati testuali, type="email" per indirizzi mail) per la massima usabilità sui dispositivi mobili.
Pseudo-classi CSS per feedback
HTML5 espone diverse pseudo-classi CSS per stilizzare i form in base allo stato di validation: :valid e :invalid riflettono il match con le regole, :required e :optional indicano obbligatorietà, :in-range e :out-of-range per controlli numerici, :placeholder-shown quando il placeholder è visibile, :focus-visible per focus tastiera. Combinandole puoi creare feedback visivi sofisticati senza JavaScript: bordi verdi/rossi, icone, messaggi inline. Combina anche con :user-valid e :user-invalid che si attivano solo dopo l'interazione utente.
Constraint Validation API
JavaScript espone una Constraint Validation API completa: input.validity restituisce un ValidityState con flag come valueMissing, typeMismatch, patternMismatch. input.checkValidity() restituisce booleano. setCustomValidity(msg) imposta un'errore custom. reportValidity() forza la visualizzazione del messaggio. Combinando questi metodi con HTML5 nativi ottieni form robusti con UX raffinata. Particolarmente utile in flussi multi-step dove validi pezzo a pezzo prima del submit finale, con feedback immediato durante la compilazione.
Validation per campi multipli
Quando hai dipendenze tra campi (password ripetuta, range di date), la validation nativa non basta da sola. Usa Constraint Validation API: aggancia listener sui campi rilevanti, calcola la coerenza, chiama setCustomValidity. Esempio password ripetuta: confirm.addEventListener('input', () => { confirm.setCustomValidity(confirm.value === password.value ? '' : 'Password non corrispondenti') }). Il messaggio appare nativo, il form non si invia. Stesso pattern per data di inizio/fine: invalidi data fine se precedente alla data di inizio. Estensibile a logica arbitraria mantenendo UX nativa.
Accessibilità della validation
I messaggi di validation HTML5 nativi sono annunciati dai lettori di schermo, ma il browser non sposta sempre il focus sul campo non valido. Combina con aria-invalid="true" sui campi errati per assistive technology, aria-describedby per messaggi inline persistent, role="alert" per messaggi server-rendered. Per form lunghi mostra un riepilogo errori all'inizio del form con link ai campi. Test con screen reader (NVDA, VoiceOver) per verificare il flusso reale: ti accorgerai di problemi che il browser di test non evidenzia ma che impattano gli utenti reali.
Regex utili
Pattern comuni pronti: telefono italiano [0-9]{9,10}, CAP italiano [0-9]{5}, codice fiscale [A-Z]{6}[0-9]{2}[A-Z][0-9]{2}[A-Z][0-9]{3}[A-Z], partita IVA [0-9]{11}, password robusta (?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,}, email semplificata [a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}. Per regex complesse usa siti come regex101.com per testare, regexr.com per visualizzare. Bilancia precisione e tolleranza: regex troppo strette bloccano utenti legittimi (es. email con + valido), troppo larghe accettano dati invalidi. Documenta le regex nel codice con commenti, perché difficili da decifrare a distanza di tempo. Per casi avanzati, validation parser dedicati (libphonenumber per telefoni) battono regex.
Procedura passo-passo
- Aggiungi required ai campi obbligatori.
- Per email usa type="email", per URL type="url" per validation nativa.
- Per CAP usa <input pattern="[0-9]{5}" title="5 cifre numeriche">.
- Per password forte usa pattern con requirements di maiuscole, numeri, simboli.
- Per numeri imposta min, max e step appropriati.
- Personalizza i messaggi con JavaScript via setCustomValidity().
- Aggiungi feedback visivo CSS con :valid e :invalid pseudo-classi.
Errori comuni e come risolverli
- Pattern troppo restrittivo: regex severa blocca utenti legittimi; bilancia rigorosità e tolleranza.
- Validation solo client: bypassabile via DevTools; convalida sempre lato server.
- Messaggi confusi: senza title l'utente vede solo "Please match the requested format"; usa title chiari.
- Required senza label: gli utenti non sanno quale campo manca; mostra sempre l'asterisco e label associata.
- Pattern con caratteri italiani: ricorda di gestire accenti se rilevanti; usa Unicode property in regex.
Domande frequenti
D: Pattern usa la stessa regex di JavaScript?
R: Sì, ma senza i delimitatori / e flag. Il match è implicitamente ancorato all'inizio e alla fine.
D: Posso disabilitare la validation HTML5?
R: Sì, aggiungi novalidate al <form> o formnovalidate al pulsante submit.
D: La validation funziona con submit JavaScript?
R: Non automaticamente; chiama form.checkValidity() prima dell'invio AJAX.
D: Come personalizzare i messaggi di errore?
R: Usa setCustomValidity() in JavaScript per testi su misura, anche localizzati.
Hai bisogno di aiuto?
Se vuoi sviluppo web con il team di G Tech Group, scrivici tramite il modulo di contatto.