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
Ottimizzare le pull con Artifact Cache di Azure Container Registry
Montare Azure Blob Storage su Linux con BlobFuse2
Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
Usare i settings di serializzazione/deserializzazione di System.Text.Json di ASP.NET all'interno di un'applicazione non web
Generare una User Delegation SAS in .NET per Azure Blob Storage
Fornire parametri ad un Web component HTML
Inference di dati strutturati da testo con Semantic Kernel e ASP.NET Core Web API
Documentare i servizi REST con Swagger e OpenAPI con .NET 9
Esporre i propri servizi applicativi con Semantic Kernel e ASP.NET Web API
Configurare e gestire sidecar container in Azure App Service
Recuperare l'ultima versione di una release di GitHub
Eseguire una ricerca avanzata per recuperare le issue di GitHub
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Utilizzare il pattern matching per semplificare le espressioni
- 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!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Utilizzare requestAnimationFrame per animazioni fluide