Come abbiamo visto nello script precedente, HTML5 introduce diverse novità nell'ambito delle form. Una di queste, tradizionalmente demandata a codice client side e server side, è la validazione dei dati.
In tal senso, HTML5 introduce un insieme di nuovi attributi sui tag legati alle form, come ad esempio required:
<input type="url" required="true" />
L'effetto che scatena l'attributo è di rendere obbligatorio il campo: il browser, da parte sua, eviterà il submit della form a cui è associato se il campo non è compilato correttamente. Il messaggio di errore visualizzato, purtroppo, non può essere cambiato e il comportamente dipende dal browser. E' supportato da IE10+, Chrome5+, Firefox 4+, Safari 5+ e Opera 9.5+.
In alcuni casi è necessario aggiungere un controllo più complesso: questo è possibile grazie all'utilizzo dell'attributo pattern, che accetta una regular expression su cui effettuare la convalida del dato.
Indica un nome (da 3 a 9 caratteri alfanumerici): <input required="true" pattern="[0-9][A-Z][a-z]{3,9}" name="product" type="text"/>
E' possibile gestire lo stile associato ai campi attraversi due selettori, come in questo esempio:
:invalid { border-color:#f00; } :valid { border-color:#0f0; }
Il primo applicherà un bordo rosso a tutti i campi non validi, il secondo uno verde, aiutando l'utente a capire quali campi necessitano di essere controllati.
Infine, particolarmente utile in questi casi può essere l'utilizzo della proprietà placeholder, che mostra un testo che sparisce automaticamente quando l'utente ha il focus del campo o inserisce del testo:
Sito: <input type="url" name="site" placeholder="http://" />
L'uso di questi nuovi tipi di input non ha effetti negativi sui browser che non li supportano: semplicemente, in questi casi le nuove feature verranno ignorate. Per questo motivo, è suggeribile comunque effettuare tutti i controlli di validità dei campi lato server.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Autenticazione di git tramite Microsoft Entra ID in Azure DevOps
Montare Azure Blob Storage su Linux con BlobFuse2
.NET Conference Italia 2024
Gestione dei nomi con le regole @layer in CSS
Rendere i propri workflow e le GitHub Action utilizzate più sicure
Triggerare una pipeline su un altro repository di Azure DevOps
Ridurre il reflow ottimizzando il CSS
Evitare memory leaks nelle closure JavaScript
Managed deployment strategy in Azure DevOps
Gestire eccezioni nei plugin di Semantic Kernel in ASP.NET Core Web API
Creare una libreria CSS universale: i bottoni
Creare una libreria CSS universale: Nav menu
I più letti di oggi
- Sfruttare i nuovi overload di TimeSpan.From* per creare timespan usando numeri interi
- Documentare i servizi REST con Swagger e OpenAPI con .NET 9
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!