Corso di HTML / Validare un modulo: required, lunghezza del testo e intervalli

La convalida dei moduli integrata in HTML può controllare valori mancanti, lunghezza del testo, intervalli numerici e formati di input specifici prima dell'invio. Attributi come required, minlength e max aiutano il browser a guidare gli utenti. Tuttavia, non sostituiscono la convalida lato server.

Richiedere un valore e limitarne la lunghezza

Create un file validation.html con la struttura HTML di base, lang="it-IT" e meta charset="utf-8". Inserite un esempio di modulo alla volta nel body, salvate il file in UTF-8 e apritelo nel browser. Dopo ogni modifica, salvate e ricaricate la pagina per confrontare lo stesso esempio.

<form method="get">
  <label for="nickname">Pseudonimo (da 2 a 20 caratteri)</label>
  <input id="nickname" name="nickname" type="text"
         required minlength="2" maxlength="20">
  <button type="submit">Verifica</button>
</form>

Provate a inviare un campo vuoto, poi un carattere e poi due caratteri. required verifica la presenza di un valore, mentre minlength controlla la lunghezza del testo inserito dall'utente; nessuno dei due implica l'altro. Il messaggio esatto del browser varia a seconda del browser, del sistema operativo e della lingua. Informate gli utenti della regola prima che inviino qualcosa, invece di fare affidamento solo su un messaggio di errore. Le limitazioni di lunghezza possono comportarsi in modo diverso se i valori vengono riempiti tramite script, quindi testate separatamente gli input programmati se il vostro modulo li utilizza.

maxlength="20" impedisce generalmente agli utenti di inserire più del suo limite. HTML misura questo limite in unità di codice della codifica Unicode UTF-16, che non corrispondono sempre al numero di caratteri visibili – ad esempio con alcune emoji. Se si consentono tali caratteri, verificate l'effettivo input insieme alla regola di lunghezza del server. Consultate la documentazione MDN maxlength.

Verificare un intervallo o un formato di base

<form method="get">
  <label for="people">Partecipanti (1–10)</label>
  <input id="people" name="people" type="number"
         min="1" max="10" step="1" required>

  <label for="email">Indirizzo e-mail</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Verifica</button>
</form>

min e max definiscono l'intervallo; step definisce il valore di incremento consentito. Inserite manualmente 0, 11 e 2,5 e confrontate questo con i pulsanti di incremento. Il separatore decimale dipende dalla lingua del browser: usate 2.5 se 2,5 non è accettato. Il fatto che un valore sia visibile nel campo di immissione non significa che sia valido per l'invio. type="email" verifica un formato di base dell'indirizzo, non se la casella postale esiste effettivamente. Scegliete i tipi di input in base al significato del valore in Scelta dei tipi di input per e-mail, numeri, date e selezione.

Questo è un modulo GET che viene inviato all'URL attuale per esercitarsi. Usate un valore di prova come name@example.com e non un vero indirizzo personale. Una volta che i valori superano la convalida del browser, è possibile verificare people e email nella stringa di query dell'URL. Questo esempio non include un server che riceva o memorizzi i dati.

Fornire suggerimenti utili per la risoluzione dei problemi

Non limitatevi a contrassegnare gli errori solo con il colore. “Inserisci un numero intero da 1 a 10” fornisce più informazioni agli utenti rispetto a “Input non valido”. Quando create messaggi personalizzati, collegate ogni messaggio al controllo corrispondente e assicuratevi che gli utenti possano tornarvi tramite tastiera. L’attributo novalidate su form ignora la validazione interattiva integrata durante l’invio; non aggiungetelo semplicemente per nascondere un problema. Mantenete le condizioni visibili e collegatele al controllo utilizzando le istruzioni di aggiungere istruzioni ai campi del modulo.

Una persona può aggirare i controlli del browser con gli strumenti per sviluppatori o una richiesta diretta. Convalidate sempre i dati importanti sul server, in particolare i valori utilizzati per account, pagamenti o voci salvate. I controlli lato browser aiutano gli utenti a correggere i propri errori; i controlli lato server proteggono l'applicazione. Consultate la guida MDN sulla convalida dei vincoli.

Prima di aggiungere un'interfaccia di errore personalizzata, applicate anche i controlli di accessibilità per l'uso della tastiera, il focus e i nomi.

Confrontare i limiti con gli errori di convalida previsti

Il campo dei partecipanti utilizza min="1" max="10" step="1" required. Inserite ogni valore e provate a inviare, mantenendo una e-mail di test correttamente formattata, in modo che l'errore di un altro campo non copra il risultato.

La formulazione esatta degli errori incorporati varia. La tabella distingue le restrizioni non riuscite, invece di fornire un messaggio. Un valore numerico valido come 2 non garantisce la validità dell'intero modulo: un altro campo potrebbe ancora non superare la verifica.

Gli avvertimenti integrati seguono le limitazioni HTML. Un'interfaccia di errore personalizzata deve collegare i messaggi ai loro controlli e gestire i cambiamenti di stato e il focus. Questo richiede implementazione e test aggiuntivi; aria-describedby da solo non crea validazione.

Provare le regole

1. Lasciate vuoto un campo obbligatorio alla volta e provate a inviare il modulo.
2. Provate valori leggermente al di fuori e all'interno di ciascun limite indicato.
3. Usate solo la tastiera per raggiungere i campi, leggere gli errori, correggerli e inviarli di nuovo.