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
Generare token per autenicarsi sulle API di GitHub
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
C# 12: Cosa c'è di nuovo e interessante
Visualizzare le change sul plan di Terraform tramite le GitHub Actions
Utilizzare il trigger SQL con le Azure Function
Creare un'applicazione React e configurare Tailwind CSS
Usare lo spread operator con i collection initializer in C#
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Utilizzare la session affinity con Azure Container Apps
Creazione di componenti personalizzati in React.js con Tailwind CSS
Migrare una service connection a workload identity federation in Azure DevOps