Introduzione: superare i limiti della validazione tradizionale nei moduli italiani
La validazione dei dati nei moduli web tradizionali si basa sul submit, un approccio che introduce ritardi, carico server e non intercetta errori critici prima del caricamento completo. Questo genera un’esperienza utente frammentata, particolarmente critica nel contesto italiano, dove form come quelli sanitari, anagrafici o fiscali richiedono precisione assoluta. La validazione in tempo reale — controllo immediato, feedback istantaneo, assenza di submit obbligatorio — è la chiave per ridurre errori di immissione, migliorare conversioni e rispettare standard UX nazionali.
Il Tier 2 ha delineato il framework per una validazione immediata con Web Components; qui approfondiamo le tecniche avanzate, i pattern esperti e le best practice per implementare un sistema robusto, performante e culturalmente aderente, capace di gestire dati italiani con granularità e sicurezza.
Il Tier 1 ha stabilito il contesto normativo e UX: form di prenotazione, adempimenti fiscali e adempimenti anagrafici richiedono campi validati in loco, con regole precise e feedback contestuale. Questo articolo trasforma quella base in una guida tecnica passo dopo passo, con esempi pratici, debounce, gestione errore e ottimizzazione — per costruire moduli che non solo funzionano, ma anticipano le esigenze dell’utente italiano.
Analisi delle criticità della validazione tradizionale: perché il submit non basta
La validazione post-submit comporta un ritardo di 500-1000ms, durante i quali l’input è già stato inserito, con rischio di input errati non rilevati. Inoltre, ogni submit genera carico al server, soprattutto in formulari lunghi o con migliaia di utenti.
Per i dati italiani, il problema si acuisce: formati codice postale (5 cifre), liste regioni e province non standardizzate, nomi e cognomi conformi al Registro Anagrafe, e normative fiscali complesse.
Un’esperienza utente bloccata o confusa dopo il submit è spesso irreversibile: dati errati invalidano processi critici (es. certificati, adempimenti).
La validazione in tempo reale elimina questi problemi, validando ogni campo non appena l’utente digita, con feedback immediato e senza penalizzare l’utente con attese o processi multi-step superflui.
Fondamenti tecnici: Custom Elements e API native per validazione immediata
La soluzione si basa su Custom Elements e API browser native: `ConstraintValidation`, `setCustomValidity`, eventi personalizzati (`input:validato`, `form:pronto`). Questi strumenti garantiscono compatibilità cross-browser e integrano perfettamente con l’ecosistema web moderno.
Un componente chiave è `
L’esempio seguente mostra l’implementazione base:
class CampoDataNazionali extends HTMLElement {
static get observedAttributes() { return ['codicePostale', 'regione', 'nome', 'cognome']; }
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.regole = {
codicePostale: { min: 5, max: 5, regex: /^\d{5}$/ },
regione: { valida: ['AT', 'ST', 'NB', 'PL', 'LV', 'LV'] }, // es. regioni italiane + alcune estere per flessibilità
nome: { validazione: (val) => /^[A-Z][a-z\s\°\°\°\°\°\°\°\°\°\°\°]*$/.test(val) },
codiceFiscale: { regex: /^[A-Z]{7}[0-9]{2}[A-Z]{3}[0-9]{4}$/ }
};
}
connectedCallback() {
this.render();
this.addEventListeners();
}
attributeChangedCallback(name, oldVal, newVal) {
this.validateField(name, newVal);
}
validateField(field, val) {
const regex = this.regole[field];
let valid = true;
let msg = '';
if (regex?.regex && val && !regex.regex.test(val)) {
valid = false;
msg = `${field.toUpperCase()} non conforme al formato richiesto`;
} else if (field === 'codicePostale') {
if (!val || val.length !== 5 || !/^\d{5}$/.test(val)) {
valid = false;
msg = 'Codice postale deve essere esattamente 5 cifre numeriche';
}
} else if (field === 'regione') {
valid = ['AT', 'ST', 'NB', 'SC', 'FR', 'LV'].includes(val); // esteso a regioni italiane + estere per flessibilità
if (!valid) msg = 'Regione non valida';
} else if (field === 'nome' && val) {
if (!/^[A-Z][a-z\s\°\°\°\°\°\°\°\°\°\°\°]*$/.test(val)) {
valid = false;
msg = 'Cognome/nome non conforme: deve partire con maiuscola e contenere solo lettere e spazi/simboli standard';
}
}
this.shadowRoot.querySelector(`#${field}-indicatore`).textContent = valid ? '✓' : '❌';
this.shadowRoot.querySelector(`#${field}-messaggio`).textContent = valid ? '' : msg;
if (!valid) {
this.validate.report(field, valid, msg);
}
}
render() {
const container = document.createElement('div');
container.style.marginBottom = '1rem';
container.style.border = '1px dashed #999';
container.style.padding = '0.8rem';
container.style.borderRadius = '6px';
const label = document.createElement('label');
label.textContent = 'Data:';
label.style.fontWeight = '600';
const input = document.createElement('input');
input.type = 'text';
input.required = true;
input.setAttribute('data-codicePostale', '');
input.setAttribute('data-regione', '');
input.setAttribute('data-nome', '');
input.setAttribute('data-cognome', '');
const indicatore = document.createElement('div');
indicatore.id = 'data-p-indicatore';
indicatore.style.marginTop = '0.3rem';
indicatore.style.fontStyle = 'italic';
indicatore.style.color = '#888';
const messaggio = document.createElement('div');
messaggio.id = 'data-messaggio';
messaggio.style.fontSize = '0.9rem';
messaggio.style.color = '#b34a4a';
container.appendChild(label);
container.appendChild(input);
container.appendChild(indicatore);
container.appendChild(messaggio);
this.shadowRoot.appendChild(container);
this.addEventListeners();
}
addEventListeners() {
['input', 'change', 'blur'].forEach(evt => {
this.shadowRoot.querySelector(`[data-${evt}`])?.addEventListener(evt, (e) => this.validateField(e.target.dataset[evt.toLowerCase()], e.target.value));
});
}
report(field, valid, msg) {
this.shadowRoot.querySelector(`[data-${field.toLowerCase()}-indicatore`).textContent = valid ? '✓' : '❌';
this.shadowRoot.querySelector(`[data-${field.toLowerCase()}-messaggio`).textContent = valid ? '' : msg;
if (!valid) {
this.validate.report(field, valid, msg);
}
}
}
