Marquer l'erreur dans le formulaire à l'aide de Bootstrap

J'ai commencé à utiliser Bootstrap afin de réaliser une belle conception de page sans recourir à GWT (le backend est fait en java)

Pour mon écran de connexion, j'ai copié cet exemple . Maintenant, je veux marquer une erreur, par exemple, que le nom d'utilisateur est resté vide. Je me demandais donc quelle est la procédure dans le framework Bootstrap pour cela. Ou peut-être 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 d'entrée avec une couleur rouge, ou de l'afficher sous l'élément d'entrée, ou peut-être avec une fenêtre contextuelle?

(MISE À JOUR avec des exemples pour Bootstrap v4, v3 et v3)

Exemples de formulaires avec des classes de validation pour les dernières versions majeures de Bootstrap.

Bootstrap v4

Voir la version live sur codepen

<div class="container">
  <form>
    <div class="form-group row">
      <label for="inputEmail" class="col-sm-2 col-form-label text-success">Email</label>
      <div class="col-sm-7">
        <input type="email" class="form-control is-valid" id="inputEmail" placeholder="Email">
      </div>
    </div>

    <div class="form-group row">
      <label for="inputPassword" class="col-sm-2 col-form-label text-danger">Password</label>
      <div class="col-sm-7">
        <input type="password" class="form-control is-invalid" id="inputPassword" placeholder="Password">
      </div>
      <div class="col-sm-3">
        <small id="passwordHelp" class="text-danger">
          Must be 8-20 characters long.
        </small>      
      </div>
    </div>
  </form>
</div>

Bootstrap v3

Voir la version live sur codepen

<form role="form">
  <div class="form-group has-warning">
    <label class="control-label" for="inputWarning">Input with warning</label>
    <input type="text" class="form-control" id="inputWarning">
    <span class="help-block">Something may have gone wrong</span>
  </div>
  <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>
  <div class="form-group has-info">
    <label class="control-label" for="inputError">Input with info</label>
    <input type="text" class="form-control" id="inputError">
    <span class="help-block">Username is taken</span>
  </div>
  <div class="form-group has-success">
    <label class="control-label" for="inputSuccess">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess" />
    <span class="help-block">Woohoo!</span>
  </div>
</form>

Bootstrap v2

Voir la version live sur jsfiddle

Le .error, .success, .warninget les .infoclasses sont ajoutées au .control-group. Il s'agit du balisage et du style Bootstrap standard dans la v2. Suivez simplement cela et vous êtes en forme. Bien sûr, vous pouvez aller au-delà de vos propres styles pour ajouter une fenêtre contextuelle ou un "flash en ligne" si vous préférez, mais si vous suivez la convention Bootstrap et accrochez ces classes de validation, .control-groupcela restera cohérent et facile à gérer (du moins depuis que vous " continuerons à bénéficier des documents et exemples Bootstrap)

  <form class="form-horizontal">
    <div class="control-group warning">
      <label class="control-label" for="inputWarning">Input with warning</label>
      <div class="controls">
        <input type="text" id="inputWarning">
        <span class="help-inline">Something may have gone wrong</span>
      </div>
    </div>
    <div class="control-group error">
      <label class="control-label" for="inputError">Input with error</label>
      <div class="controls">
        <input type="text" id="inputError">
        <span class="help-inline">Please correct the error</span>
      </div>
    </div>
    <div class="control-group info">
      <label class="control-label" for="inputInfo">Input with info</label>
      <div class="controls">
        <input type="text" id="inputInfo">
        <span class="help-inline">Username is taken</span>
      </div>
    </div>
    <div class="control-group success">
      <label class="control-label" for="inputSuccess">Input with success</label>
      <div class="controls">
        <input type="text" id="inputSuccess">
        <span class="help-inline">Woohoo!</span>
      </div>
    </div>
  </form>

Bootstrap V3 :

Lien officiel du document 1
Lien du document officiel 2

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess" />
  <span class="help-block">Woohoo!</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning">
  <span class="help-block">Something may have gone wrong</span>
</div>
<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>

On peut également utiliser la classe suivante tout en utilisant la classe modale bootstrap (v 3.3.7) ... help-inline et help-block ne fonctionnaient pas en modal.

<span class="error text-danger">Some Errors related to something</span>

La sortie ressemble à quelque chose ci-dessous:

Bootstrap V3:

Une fois que je cherchais les fonctionnalités de laravel, j'ai appris à connaître cette incroyable validation de formulaire. Plus tard, j'ai modifié les fonctionnalités des icônes de glyphicon. Maintenant, ça a l'air génial.

<div class="col-md-12">
<div class="form-group has-error has-feedback">
    <input id="enter email" name="email" type="text" placeholder="Enter email" class="form-control ">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>       
    <span class="help-block"><p>The Email field is required.</p></span>                                        
</div>
</div>
<div class="clearfix"></div>

<div class="col-md-6">
<div class="form-group has-error has-feedback">
    <input id="account_holder_name" name="name" type="text" placeholder="Name" class="form-control ">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>                                            
    <span class="help-block"><p>The Name field is required.</p></span>                                        
</div>
</div>
<div class="col-md-6">
<div class="form-group has-error has-feedback">
 <input id="check_np" name="check_no" type="text" placeholder="Check no" class="form-control ">
 <span class="glyphicon glyphicon-remove form-control-feedback"></span>
<span class="help-block"><p>The Check No. field is required.</p></span>                                       
</div>
</div>

Voici à quoi cela ressemble:

Une fois que je l'ai terminé, j'ai pensé que je devrais également l'implémenter dans Codeigniter. Voici donc la validation Codeigniter-3 avec Bootstrap:

Manette

function addData()
{
$this->load->library('form_validation');
$this->form_validation->set_rules('email','Email','trim|required|valid_email|max_length[128]');
if($this->form_validation->run() == FALSE)
{
//validation fails. Load your view.
$this->loadViews('Load your view','pass your data to view if any');
}
else
{  
 //validation pass. Your code here.
}
}

Vue

<div class="col-md-12">
<?php 
 $email_error = (form_error('email') ? 'has-error has-feedback' : '');
 if(!empty($email_error)){
 $emailData = '<span class="help-block">'.form_error('email').'</span>';
 $emailClass = $email_error;
 $emailIcon = '<span class="glyphicon glyphicon-remove form-control-feedback"></span>';
}
else{
    $emailClass = $emailIcon = $emailData = '';
 } 
 ?>
<div class="form-group <?= $emailClass ?>">
<input id="enter email" name="email" type="text" placeholder="Enter email" class="form-control ">
<?= $emailIcon ?>
<?= $emailData ?>
</div>
</div>

Production:

Il est préférable d'afficher généralement l'erreur près de l'endroit où l'erreur se produit. c'est-à-dire que si quelqu'un a une erreur lors de la saisie de son e-mail, vous mettez en surbrillance la zone de saisie de l'e-mail.

Cet article a quelques bons exemples. http://uxdesign.smashingmagazine.com/2011/05/27/getting-started-with-defensive-web-design/

Le bootstrap de Twitter a également un style agréable qui aide avec cela (faites défiler jusqu'à la section États de validation) http://twitter.github.com/bootstrap/base-css.html#forms

Mettre en évidence chaque zone de saisie est un peu plus compliqué, donc le moyen le plus simple serait de simplement mettre une alerte d'amorçage en haut avec des détails sur ce que l'utilisateur a mal fait. http://twitter.github.com/bootstrap/components.html#alerts

Pour Bootstrap v4, utilisez:
has-dangerpour le form-groupwrapper,
form-control-dangerpour que l'entrée affiche l'icône (affichera ✖ à la fin de l'entrée),
form-control-feedbackpour le wrapper de message

Exemple:

<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>

Peut utiliser 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>