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
La gestione della riconnessione al server di Blazor in .NET 9
Ridurre il reflow cambiando il CSS
Creare una libreria CSS universale: Clip-path
Anonimizzare i dati sensibili nei log di Azure Front Door
Applicare un filtro per recuperare alcune issue di GitHub
Utilizzare WhenEach per processare i risultati di una lista di task
Utilizzare una qualunque lista per i parametri di tipo params in C#
.NET Aspire per applicazioni distribuite
Utilizzare Hybrid Cache in .NET 9
Abilitare automaticamente il force push di un gruppo su Azure DevOps
Migliorare la scalabilità delle Azure Function con il Flex Consumption