reportValidity e setCustomValidity

La Constraint Validation API espone due metodi che controllano l'interfaccia di validazione integrata del browser: reportValidity (mostra il tooltip) e setCustomValidity (fornisce un messaggio di errore personalizzato). Insieme consentono di personalizzare i messaggi mantenendo la presentazione nativa.

checkValidity() restituisce silenziosamente true/false, senza effetti sull'interfaccia. reportValidity() esegue lo stesso controllo, ma porta inoltre il focus sul primo campo non valido e mostra il tooltip di validazione del browser. Scelga reportValidity quando desidera ottenere gratuitamente un'esperienza utente nativa.

Per le procedure guidate a più passaggi, convalidi i campi di ogni passaggio prima di avanzare: if (step.reportValidity()) { next(); }. Il browser gestisce la visualizzazione dell'errore e porta il focus dell'utente sul campo che richiede attenzione, evitando di dover reimplementare la gestione del focus.

I messaggi predefiniti ("Compili questo campo") potrebbero non corrispondere al tono desiderato. input.setCustomValidity("Username is required") sostituisce il messaggio predefinito con il testo specificato. L'input viene considerato non valido finché il messaggio non viene eliminato.

input.setCustomValidity("") rimuove il messaggio personalizzato e riattiva la validazione normale. Lo richiami ogni volta che esegue una nuova validazione; in caso contrario, i messaggi personalizzati obsoleti rimangono anche dopo che l'utente ha risolto il problema.

Per i controlli lato server (unicità del nome utente, validità del coupon), usi setCustomValidity dopo la risposta asincrona: const ok = await checkUsername(value); input.setCustomValidity(ok ? "" : "Already taken");. Il browser rileva immediatamente il nuovo stato di validità.

Per usare una propria visualizzazione degli errori mantenendo il tracciamento della validità, ascolti l'evento invalid e chiami e.preventDefault() per sopprimere il tooltip nativo: input.addEventListener("invalid", (e) => { e.preventDefault(); showError(input, input.validationMessage); }).

setCustomValidity supporta un solo messaggio personalizzato alla volta. Per applicare diverse regole, le verifichi tutte e chiami setCustomValidity con il messaggio più rilevante, seguendo un ordine di priorità. Viene visualizzata la prima regola che non è stata rispettata.

Se imposta un messaggio personalizzato per un campo required vuoto, il suo messaggio e quello predefinito potrebbero entrare in conflitto. Scelga un solo approccio per ogni campo: disabiliti il vincolo integrato (usi type="text" invece di type="email" e convalidi tramite setCustomValidity) oppure si affidi completamente alla validazione integrata.

Per la validazione tra campi (ad esempio, per verificare che la conferma della password corrisponda), applichi setCustomValidity al campo correlato: confirmInput.setCustomValidity(confirmInput.value === passInput.value ? "" : "Passwords do not match"). Il modulo rimane non valido finché i due valori non coincidono.

I messaggi integrati vengono localizzati dal browser in base alla lingua dell'utente. I messaggi personalizzati impostati tramite setCustomValidity devono essere forniti da lei nella lingua corretta: legga navigator.language o il proprio stato i18n e fornisca la traduzione corrispondente.

Apra DevTools e provi ogni percorso di errore: invio con campo vuoto, input parziale, formato non corrispondente, errore asincrono. Verifichi che venga mostrato il messaggio corretto, che la sua risoluzione lo rimuova e che l'invio di un modulo valido prosegua. I casi limite (incollare un formato non valido, compilazione automatica del browser) meritano test specifici.

Dopo aver chiamato input.setCustomValidity("Already taken"), come si comunica al browser che l'input è di nuovo valido?

reportValidity attiva l'interfaccia di validazione integrata del browser (focus e tooltip), risultando ideale per i controlli programmatici. setCustomValidity sovrascrive i messaggi predefiniti con il testo desiderato: lo cancelli con una stringa vuota quando il campo torna valido. Ascolti l'evento invalid con preventDefault per visualizzare gli errori in modo completamente personalizzato. Lo usi per la validazione tra campi, i controlli asincroni e i messaggi personalizzati localizzati.