Contrassegnare l'errore nel modulo utilizzando Bootstrap

Ho iniziato a utilizzare Bootstrap per ottenere un bel design di pagina senza ricorrere a GWT (il backend è realizzato in Java)

Per la mia schermata di accesso ho copiato questo esempio . Ora voglio contrassegnare un errore, ad esempio, che il nome utente è stato lasciato vuoto. Quindi mi chiedevo quale fosse la procedura nel framework Bootstrap per questo. O forse se ci sono esempi che mostrano il modulo con errori.

Non sono sicuro se l'idea sia quella di mostrare il messaggio di errore all'interno dell'elemento di input con un colore rosso, o di mostrarlo sotto l'elemento di input, o magari con un popup?

(AGGIORNATO con esempi per Bootstrap v4, v3 e v3)

Esempi di moduli con classi di validazione per le precedenti versioni principali di Bootstrap.

Bootstrap v4

Guarda la versione live su 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

Guarda la versione live su 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

Guarda la versione live su jsfiddle

La .error, .success, .warninge .infoclassi vengono aggiunte al .control-group. Questo è il markup Bootstrap standard e lo stile in v2. Basta seguirlo e sei in buona forma. Ovviamente puoi andare oltre con i tuoi stili per aggiungere un popup o "inline flash" se preferisci, ma se segui la convenzione Bootstrap e appendi quelle classi di validazione .control-grouprimarrà coerente e facile da gestire (almeno dal momento che ' Continuerò ad avere il vantaggio di documenti ed esempi 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 :

Doc Link ufficiale 1
Doc Link ufficiale 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>

Si può anche usare la seguente classe mentre si usa la classe modale bootstrap (v 3.3.7) ... help-inline e help-block non funzionavano in modale.

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

L'output è simile al seguente:

Bootstrap V3:

Una volta che stavo cercando le funzionalità di Laravel, ho avuto modo di conoscere questa fantastica validazione del modulo. Più tardi, ho modificato le funzioni dell'icona glyphicon. Ora sembra fantastico.

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

Ecco come appare:

Una volta completato, ho pensato che avrei dovuto implementarlo anche in Codeigniter. Ecco quindi la validazione di Codeigniter-3 con Bootstrap:

controllore

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

Visualizza

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

Produzione:

Mostrare generalmente l'errore vicino a dove si verifica l'errore è la cosa migliore. cioè se qualcuno ha un errore nell'inserimento della sua e-mail, si evidenzia la casella di input e-mail.

Questo articolo ha un paio di buoni esempi. http://uxdesign.smashingmagazine.com/2011/05/27/getting-started-with-defensive-web-design/

Anche Twitter Bootstrap ha uno stile piacevole che aiuta in questo (scorrere verso il basso fino alla sezione Stati di convalida) http://twitter.github.com/bootstrap/base-css.html#forms

Evidenziare ogni casella di input è un po 'più complicato, quindi il modo più semplice sarebbe quello di mettere un avviso bootstrap in alto con i dettagli di ciò che l'utente ha fatto di sbagliato. http://twitter.github.com/bootstrap/components.html#alerts

Per Bootstrap v4 utilizzare:
has-dangerper form-groupwrapper,
form-control-dangerper input per mostrare l'icona (visualizzerà ✖ alla fine dell'input),
form-control-feedbackper wrapper messaggi

Esempio:

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

Può usare CSS per mostrare il messaggio di errore solo in caso di errore.

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