I browser sono dotati di funzionalità integrate per la convalida che consentono di verificare che gli utenti abbiano inserito i dati nel formato corretto. Puoi attivare queste funzioni utilizzando gli elementi e gli attributi corretti. Inoltre, puoi migliorare la convalida del modulo con CSS e JavaScript.
Perché dovresti convalidare i tuoi moduli?
Nel modulo precedente hai imparato come aiutare gli utenti a evitare di dover reinserire ripetutamente le informazioni nei moduli. In che modo puoi aiutare gli utenti a inserire dati validi?
È frustrante compilare un modulo senza sapere quali campi sono obbligatori o i vincoli di tali campi. Ad esempio, inserisci un nome utente e invii un modulo per scoprire che i nomi utente devono contenere almeno otto caratteri.
Puoi aiutare gli utenti a farlo definendo e comunicando le regole di convalida.
Aiuta gli utenti a evitare la perdita accidentale di campi obbligatori
Puoi utilizzare il codice HTML per specificare il formato e i vincoli corretti per i dati inseriti nei moduli. Devi inoltre specificare quali campi sono obbligatori.
Prova a inviare questo modulo senza inserire dati.
Visualizzi un messaggio di errore allegato a <input> che ti informa che il campo è obbligatorio?
Questo accade a causa dell'attributo required.
<label for="name">Name (required)</label>
<input required type="text" id="name" name="name">
Hai già appreso 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. C'è qualche differenza rispetto alla demo precedente? Ora inserisci il tuo nome nel campo dell'email e prova a inviare. Viene visualizzato 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 type.
Il campo dell'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 indichi al browser che un utente deve inserire almeno otto caratteri per un campo del modulo?
Prova la demo. Dopo la modifica, non potrai più 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.
Imposta il valore su 8 per ottenere la regola di convalida da applicare.
Se vuoi il contrario, utilizza maxlength.
Comunicare le 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 tue regole di convalida.
Per farlo, collega il controllo modulo con un elemento che spiega le regole.
Per farlo, aggiungi un attributo aria-describedby all'elemento con il valore 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 un'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">
Qui sono consentite solo lettere minuscole; l'utente deve inserire almeno due caratteri e non più di venti.
Come modificheresti pattern per consentire 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 applicare stili ai controlli del modulo in base allo stato di convalida? Questo è possibile con i CSS.
Come applicare uno stile a un campo del modulo obbligatorio
Mostra all'utente che un campo è obbligatorio prima di interagire con il modulo.
Puoi definire i campi required con la pseudoclasse CSS :required.
input:required {
border: 2px solid;
}
Stile controlli modulo non validi
Ti ricordi cosa succede se i dati inseriti dall'utente non sono validi? Viene visualizzato il messaggio di errore allegato al controllo modulo. Non sarebbe bello adattare l'aspetto dell'elemento quando accadesse?
Puoi utilizzare la pseudo-classe :invalid
per aggiungere stili ai controlli dei moduli non validi.
Inoltre, esiste anche la pseudo-classe :valid per definire lo stile degli elementi dei moduli validi.
Esistono altri modi per adattare gli stili in base alla convalida. Nel modulo sui CSS scoprirai di più sull'applicazione di stili ai moduli.
Convalida con JavaScript
Per migliorare ulteriormente la convalida dei tuoi moduli, puoi utilizzare l'API JavaScript Constraint Validation.
Fornire messaggi di errore significativi
Hai già appreso che i messaggi di errore non sono identici in tutti i browser. Come si può mostrare lo stesso messaggio a tutti?
A questo scopo, utilizza il metodo 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 in cui vuoi impostare il messaggio di errore personalizzato.
Ascolta l'evento invalid dell'elemento definito.
A questo punto, hai impostato il messaggio con setCustomValidity().
In questo esempio viene mostrato il messaggio Please enter your name. se i valori non sono validi.
Apri la demo in browser diversi, dovresti visualizzare lo stesso messaggio su tutti i dispositivi. Ora prova a rimuovere JavaScript e riprova. Vengono visualizzati di nuovo i messaggi di errore predefiniti.
Puoi fare molto di più con l'API Constraint Validation. In uno dei moduli successivi, vedremo nel dettaglio come utilizzare la convalida con JavaScript.
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 esce da un campo del modulo.
Fai clic sul campo del modulo nella 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 della convalida in tempo reale con JavaScript in un modulo successivo.
Verifica la tua comprensione
Verifica le tue conoscenze sulla convalida dei moduli
Quale attributo utilizzi per rendere obbligatori i controlli dei moduli?
requiredneededessentialobligatoryÈ possibile definire messaggi di errore personalizzati?
message.:invalid.È possibile inviare un <input> con type="email" e l'attributo required: