I browser dispongono di funzionalità integrate per la convalida, al fine di verificare che gli utenti abbiano inserito i dati nel formato corretto. Puoi attivare queste funzionalità utilizzando gli elementi e gli attributi corretti. Inoltre, puoi migliorare la convalida dei moduli con CSS e JavaScript.
Perché convalidare i moduli?
Nel modulo precedente hai imparato come aiutare gli utenti a evitare di ripetere reinserire le informazioni nei moduli. Come puoi aiutare gli utenti a inserire dati validi?
È frustrante compilare un modulo senza sapere quali campi sono obbligatori, o dai vincoli di questi campi. Ad esempio, inserisci un nome utente e invii un modulo, per poi scoprire che i nomi utente devono contenere almeno otto caratteri.
Puoi aiutare gli utenti definendo regole di convalida e comunicandole.
Aiuta gli utenti a eliminare accidentalmente i campi obbligatori
Puoi utilizzare l'HTML per specificare il formato e i vincoli corretti per i dati inseriti nei moduli. Devi anche specificare quali campi sono obbligatori.
Prova a inviare questo modulo senza inserire dati.
Visualizzi un messaggio di errore allegato alla <input> che ti comunica che il campo è obbligatorio?
Ciò si verifica a causa dell'attributo required.
<label for="name">Name (required)</label>
<input required type="text" id="name" name="name">
Hai già imparato che puoi utilizzare molti altri tipi, ad esempio type="email".
Diamo un'occhiata a un'email obbligatoria: <input>.
Prova a inviare questo modulo senza inserire dati. Ci sono differenze rispetto alla demo precedente? Ora inserisci il tuo nome nel campo dell'email e prova a inviare. Visualizzi un messaggio di errore diverso. Com'è possibile? Ricevi un messaggio diverso perché il valore inserito non è un indirizzo email valido.
L'attributo required indica al browser che il campo è obbligatorio.
Il browser verifica anche se i dati inseriti corrispondono al formato dell'elemento type.
Il campo email mostrato nell'esempio è valido solo se non è vuoto e se i dati inseriti sono un indirizzo email valido.
Aiuta l'utente a inserire il formato corretto
Hai imparato a rendere obbligatorio un campo. Come puoi indicare al browser che un utente deve inserire almeno otto caratteri per un campo del modulo?
Prova la demo. Dopo la modifica, non potrai inviare il modulo se inserisci meno di otto caratteri.
<label for="password">Password (required)</label> <input required="" minlength="8" type="password" id="password" name="password">
Il nome dell'attributo è minlength.
Impostando il valore su 8, otterrai la regola di convalida che ti interessa.
Se vuoi il contrario, usa maxlength.
Comunica le tue regole di convalida
<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password"
name="password" aria-describedby="password-minlength">
<div id="password-minlength">Enter at least eight characters</div>
Assicurati che tutti gli utenti comprendano le regole di convalida.
A questo scopo, collega il controllo modulo a un elemento che spiega le regole.
Per farlo, aggiungi un attributo aria-describedby all'elemento con il id del modulo.
Attributo pattern
A volte è necessario definire regole di convalida più avanzate.
Anche in questo caso, puoi utilizzare un attributo HTML.
Si chiama pattern e puoi definire
espressione regolare come valore.
<label for="animal">What is your favorite animal? (required)</label>
<input required pattern="[a-z]{2,20}" type="text" id="animal" name="animal">
In questo caso, sono consentite solo lettere minuscole; l'utente deve inserire almeno due caratteri e non più di venti.
Come cambieresti pattern in modo che consenta anche le lettere maiuscole?
Prova.
La risposta esatta è pattern="[a-zA-Z]{2,20}".
Aggiungi stili
Hai imparato ad aggiungere la convalida in HTML. Non sarebbe fantastico se potessi anche definire i controlli del modulo in base allo stato di convalida? Ciò è possibile con i CSS.
Come definire lo stile di un campo di modulo obbligatorio
Mostra all'utente che un campo è obbligatorio prima che possa interagire con il modulo.
Puoi applicare uno stile ai campi required con la pseudo classe CSS :required.
input:required {
border: 2px solid;
}
Controlli del modulo dello stile non validi
Ricordi cosa succede se i dati inseriti dall'utente non sono validi? Viene visualizzato il messaggio di errore allegato al controllo del modulo. Non sarebbe fantastico adattare l'aspetto dell'elemento in quel momento?
Puoi utilizzare la pseudo-classe :invalid
per aggiungere stili a controlli del modulo non validi.
Inoltre, esiste anche la pseudo-classe :valid per definire lo stile di elementi del modulo validi.
Esistono altri modi per adattare gli stili in base alla convalida. Nel modulo dedicato ai CSS, scoprirai di più sugli stili dei moduli.
Convalida con JavaScript
Per migliorare ulteriormente la convalida dei moduli, puoi utilizzare API JavaScript Constraint Validation.
Fornire messaggi di errore significativi
Hai già visto che i messaggi di errore non sono identici in tutti i browser. Come puoi mostrare lo stesso messaggio a tutti?
A questo scopo, utilizza
setCustomValidity()
dell'API Constraint Validation.
Vediamo come funziona.
const nameInput = document.querySelector('[name="name"]');
nameInput.addEventListener('invalid', () => {
nameInput.setCustomValidity('Please enter your name.');
});
Esegui una query sull'elemento per cui vuoi impostare il messaggio di errore personalizzato.
Ascolta l'evento invalid dell'elemento definito.
Ecco qui il messaggio impostato con setCustomValidity().
Questo esempio mostra il messaggio Please enter your name. se l'input non è valido.
Apri la demo in diversi browser. dovresti vedere lo stesso messaggio ovunque. Ora prova a rimuovere il codice JavaScript e riprova. Vengono visualizzati di nuovo i messaggi di errore predefiniti.
Puoi fare molto di più con l'API Constraint Validation. Troverai informazioni dettagliate sull'uso convalida con JavaScript in un modulo successivo.
Come eseguire la convalida in tempo reale
Puoi aggiungere la convalida in tempo reale in JavaScript ascoltando l'evento onblur di un controllo modulo,
e convalidare l'input immediatamente quando un utente abbandona il campo del modulo.
Fai clic sul campo del modulo nella sezione demo
inserisci "web" e fai clic in un altro punto della pagina.
Viene visualizzato il messaggio di errore nativo per minlength sotto il campo del modulo.
Scopri di più sull'implementazione convalida in tempo reale con JavaScript.
Verifica le tue conoscenze
Verifica le tue conoscenze in materia di convalida dei moduli
Quale attributo utilizzi per rendere obbligatori i controlli del modulo?
requiredneededessentialobligatoryÈ possibile definire messaggi di errore personalizzati?
message.:invalid.Puoi inviare un <input> con type="email" e l'attributo required: