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
Gestione degli stili CSS con le regole @layer
Reactive form tipizzati con FormBuilder in Angular
Potenziare Azure AI Search con la ricerca vettoriale
Evitare la script injection nelle GitHub Actions
Utilizzare QuickGrid di Blazor con Entity Framework
Referenziare un @layer più alto in CSS
Garantire la provenienza e l'integrità degli artefatti prodotti su GitHub
Come migrare da una form non tipizzata a una form tipizzata in Angular
Persistere la ChatHistory di Semantic Kernel in ASP.NET Core Web API per GPT
Gestire la cancellazione di una richiesta in streaming da Blazor
Gestire il colore CSS con HWB
Utilizzare EF.Constant per evitare la parametrizzazione di query SQL