Gestire lo stile dei campi errati con Bootstrap

di Stefano Mostarda, in HTML5, Boostrap,

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

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi