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

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

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

Bootstrap v4

Voir le version live sur le 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 le version live sur le 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 le version live sur jsfiddle

El .error , .success , .warning y .info sont ajoutées à l .control-group . Il s'agit du balisage et du style standard de Bootstrap dans la version 2. Suivez-les et vous serez en bonne forme. Bien sûr, vous pouvez aller plus loin avec 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 que vous accrochez ces classes de validation sur la balise .control-group il restera cohérent et facile à gérer (au moins parce que vous continuerez à bénéficier de la documentation et des exemples de 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>

Answer 2

Bootstrap V3 :

Lien officiel du Doc 1
Lien officiel du Doc 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>

Answer 3

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

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

La sortie ressemble à quelque chose ci-dessous :

Answer 4

Bootstrap V3 :

Lorsque je cherchais les fonctionnalités de Laravel, j'ai découvert cette incroyable validation de formulaire. Plus tard, j'ai modifié les fonctionnalités de l'icône glyphicon. Maintenant, c'est 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>

Voilà à quoi ça ressemble :

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

Contrôleur

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

Voir

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

Sortie :

Answer 5

En général, il est préférable d'afficher l'erreur à proximité de l'endroit où elle se produit. Par exemple, si une personne a commis une erreur en saisissant son adresse électronique, vous mettez en évidence le champ de saisie de l'adresse électronique.

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

De plus, twitter bootstrap offre un style agréable qui aide à cela (faites défiler la page jusqu'à la section États de validation). http://twitter.github.com/bootstrap/base-css.html#forms

La mise en évidence de chaque champ de saisie est un peu plus compliquée. La solution de facilité consisterait à placer une alerte bootstrap en haut de l'écran avec les détails de ce que l'utilisateur a mal fait. http://twitter.github.com/bootstrap/components.html#alerts