Una delle funzioni più comuni in un sito è la validazione dei valori inseriti dall'utente e la segnalazione di eventuali errori. Bootstrap semplifica anche questo compito offrendo classi CSS che gestiscono i casi in cui il campo sia valido, contenga errori o contenga dei warning.
Le classi CSS da utilizzare sono has-success, has-warning e has-error che segnalano rispettivamente quando un campo è valido, contiene warnign e contiene errori. Queste classi non vanno applicate direttamente al campo, bensì al suo contenitore. Nel prossimo esempio possiamo vedere come utilizzare le classi.
<div class="form-group has-success"> <label class="control-label" for="firstName">Nome</label> <input class="form-control" id="firstName"> </div> <div class="form-group has-warning"> <label class="control-label" for="lastName">Cognome</label> <input class="form-control" id="lastName"> </div> <div class="form-group has-error"> <label class="control-label" for="birthDate">Data nascita</label> <input class="form-control" id="birthDate"> </div>
Applicando le suddette classi a runtime durante la fase di validazione, possiamo dare un feedback all'utente in maniera molto semplice.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Eseguire operazioni con timeout in React
Linting di un Dockerfile con un workflow di GitHub
Usare un KeyedService di default in ASP.NET Core 8
Gestione degli environment per il deploy con un workflow di GitHub
Gestire i null nelle reactive form tipizzate di Angular
Cache policy su route groups di Minimal API in ASP.NET Core 7
Usare le collection expression per inizializzare una lista di oggetti in C#
Utilizzare i primary constructor in C#
Verificare la provenienza di un commit tramite le GitHub Actions
Semplificare il deployment di siti statici con Azure Static Web App
Elencare le container images installate in un cluster di Kubernetes
Generare file PDF da Blazor WebAssembly con iText
I più letti di oggi
- Evitare il flickering dei componenti nel prerender di Blazor 8
- Rilasciata la Beta 2 di Visual Studio 2008
- tra pochi minuti inizia la keynote della seconda giornata. seguila live su http://aspitalia.com/mix-11 #mix11
- .@dbochicchio ora su #aspnetcore 2 a #netconfit https://aspit.co/netconf-17
- Utilizzare angular-cli per creare una direttiva in Angular 2
- Windows Vista: il ritorno di WinFS con la beta1
- .@CristianCivera tra poco su #azure con i suoi tips&tricks per lo sviluppatore web: https://aspit.co/web15-live #aspilive
- Le novità di C# 10