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
Implementare il throttle in JavaScript
Gestione file Javascript in Blazor con .NET 9
Le cron expression di un workflow di GitHub
Usare i settings di serializzazione/deserializzazione di System.Text.Json di ASP.NET all'interno di un'applicazione non web
Anonimizzare i dati sensibili nei log di Azure Front Door
Pubblicare un MCP Server in GitHub MCP Registry
Integrare SQL Server in un progetto .NET Aspire
Utilizzare Intersect e Except per filtrare set di dati in TSql
DevSecOps per .NET: dalla teoria alla pratica
Eseguire query in contemporanea con EF
Gestione delle scrollbar dinamiche in HTML e CSS
Gestione degli eventi nei Web component HTML
I più letti di oggi
- Disponibile al download la versione finale di Internet Explorer 9
- Costruire il web del futuro con HTML5: la nostra guida rapida
- Utilizzo delle stepped value functions nel CSS
- Utilizzare @property per animare nativamente un oggetto HTML tramite CSS
- Impostare automaticamente l'altezza del font tramite CSS


