Marque el error en el formulario usando Bootstrap

Comencé a usar Bootstrap para lograr un buen diseño de página sin recurrir a GWT (el backend está hecho en Java)

Para mi pantalla de inicio de sesión, copié este ejemplo . Ahora quiero marcar un error, por ejemplo, que el nombre de usuario se dejó vacío. Entonces me preguntaba cuál es el procedimiento en el marco Bootstrap para esto. O tal vez si hay ejemplos que muestran el formulario con error.

No estoy seguro de si la idea es mostrar el mensaje de error dentro del elemento de entrada con un color rojo, o mostrarlo debajo del elemento de entrada, o tal vez con una ventana emergente.

(ACTUALIZADO con ejemplos para Bootstrap v4, v3 y v3)

Ejemplos de formularios con clases de validación para las últimas versiones principales de Bootstrap.

Bootstrap v4

Ver la versión en vivo en 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

Ver la versión en vivo en 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

Ver la versión en vivo en jsfiddle

El .error, .success, .warningy .infolas clases se añaden al .control-group. Este es el marcado y el estilo de Bootstrap estándar en v2. Solo sigue eso y estarás en buena forma. Por supuesto, puede ir más allá con sus propios estilos para agregar una ventana emergente o "flash en línea" si lo prefiere, pero si sigue la convención de Bootstrap y cuelga esas clases de validación .control-group, se mantendrá constante y fácil de administrar (al menos desde que usted ' Seguiré teniendo el beneficio de los documentos y ejemplos 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>

Bootstrap V3 :

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

También se puede usar la siguiente clase mientras se usa la clase modal bootstrap (v 3.3.7) ... help-inline y help-block no funcionaron en modal.

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

La salida se parece a algo a continuación:

Bootstrap V3:

Una vez que estaba buscando características de laravel, conocí esta increíble validación de formularios. Más tarde, modifiqué las características del icono de glifo. Ahora se ve genial.

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

Esto es lo que parece:

Una vez que lo completé, pensé que también debería implementarlo en Codeigniter. Así que aquí está la validación Codeigniter-3 con Bootstrap:

Controlador

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

Ver

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

Salida:

En general, es mejor mostrar el error cerca de donde se produce el error. es decir, si alguien tiene un error al ingresar su correo electrónico, resalta el cuadro de entrada de correo electrónico.

Este artículo tiene un par de buenos ejemplos. http://uxdesign.smashingmagazine.com/2011/05/27/getting-started-with-defensive-web-design/

Twitter Bootstrap también tiene un estilo agradable que ayuda con eso (desplácese hacia abajo hasta la sección de Estados de validación) http://twitter.github.com/bootstrap/base-css.html#forms

Destacar cada cuadro de entrada es un poco más complicado, por lo que la forma más sencilla sería colocar una alerta de arranque en la parte superior con detalles de lo que el usuario hizo mal. http://twitter.github.com/bootstrap/components.html#alerts

Para Bootstrap v4, use:
has-dangerpara form-groupenvoltorio,
form-control-dangerpara entrada para mostrar el icono (mostrará ✖ al final de la entrada),
form-control-feedbackpara envoltorio de mensaje

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>

Puede usar CSS para mostrar mensajes de error solo en caso de error.

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