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
Utilizzare i variable font nel CSS
Usare i servizi di Azure OpenAI e ChatGPT in ASP.NET Core con Semantic Kernel
Collegare applicazioni server e client con .NET Aspire
Recuperare l'ultima versione di una release di GitHub
Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
Utilizzare Copilot con Azure Cosmos DB
Migliorare l'organizzazione delle risorse con Azure Policy
Filtrare i dati di una QuickGrid in Blazor con una drop down list
Eseguire una ricerca avanzata per recuperare le issue di GitHub
Combinare Container Queries e Media Queries
Rendere i propri workflow e le GitHub Action utilizzate più sicure
Creare un webhook in Azure DevOps