Marquer une erreur dans un formulaire en utilisant Bootstrap

Question

J'ai commencé à utiliser Bootstrap afin d'obtenir un beau design de page sans avoir recours à GWT (le backend est fait en java).

Pour mon écran de connexion, j'ai copié ceci ejemplo . Maintenant je veux marquer une erreur, par exemple, que le nom d'utilisateur a été laissé vide. Je me demandais donc quelle était la procédure à suivre dans le cadre de Bootstrap pour cela. Ou s'il existe des exemples montrant le formulaire avec une erreur.

Je ne sais pas si l'idée est d'afficher le message d'erreur à l'intérieur de l'élément de saisie avec une couleur rouge, ou de l'afficher sous l'élément de saisie, ou peut-être avec une popup ?

Answer 1

Pour Bootstrap v4, utilisez :
has-danger para form-group l'emballage,
form-control-danger pour que l'entrée montre l'icône (s'affichera à la fin de l'entrée),
form-control-feedback à l'enveloppe du message

Ejemplo:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="form-group has-danger">
  <input type="text" class="form-control form-control-danger">
  <div class="form-control-feedback">Not valid :(</div>
</div>

Answer 2

On peut utiliser le CSS pour afficher le message d'erreur uniquement en cas d'erreur.

.form-group.has-error .help-block {
    display: block;
}

.form-group .help-block {
    display: none;
}

<div class="form-group has-error">
  <label class="control-label" for="inputError">Input with error</label>
  <input type="text" class="form-control" id="inputError">
  <span class="help-block">Please correct the error</span>
</div>