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
Proteggere le risorse Azure con private link e private endpoints
Aggiungere interattività lato server in Blazor 8
Gestione dell'annidamento delle regole dei layer in CSS
Miglioramenti nell'accessibilità con Angular CDK
Configurare il nome della run di un workflow di GitHub in base al contesto di esecuzione
Generare token per autenicarsi sulle API di GitHub
Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
Miglioramenti nelle performance di Angular 16
Creazione di componenti personalizzati in React.js con Tailwind CSS
Ordine e importanza per @layer in CSS
Visualizzare le change sul plan di Terraform tramite le GitHub Actions
Migliorare i tempi di risposta di GPT tramite lo streaming endpoint in ASP.NET Core