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
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Utilizzare Azure AI Studio per testare i modelli AI
Utilizzare database e servizi con gli add-on di Container App
Utilizzare un numero per gestire la concorrenza ottimistica con SQL Server ed Entity Framework
Hosting di componenti WebAssembly in un'applicazione Blazor static
Usare lo spread operator con i collection initializer in C#
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Utilizzare la session affinity con Azure Container Apps
Configurare dependabot per aggiornare le dipendenze di terze parti con GitHub Actions
Utilizzare gRPC su App Service di Azure
Filtrare i dati di una QuickGrid in Blazor con una drop down list
Come migrare da una form non tipizzata a una form tipizzata in Angular