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
Supporto ai tipi DateOnly e TimeOnly in Entity Framework Core
Utilizzare Copilot con Azure Cosmos DB
Conoscere il rendering Server o WebAssembly a runtime in Blazor
La gestione della riconnessione al server di Blazor in .NET 9
Managed deployment strategy in Azure DevOps
Utilizzare il nuovo modello GPT-4o con Azure OpenAI
Generare HTML a runtime a partire da un componente Razor in ASP.NET Core
Gestire il colore CSS con HWB
Gestione dei nomi con le regole @layer in CSS
Referenziare un @layer più alto in CSS
Utilizzare il metodo Index di LINQ per scorrere una lista sapendo anche l'indice dell'elemento
Recuperare l'ultima versione di una release di GitHub