Markieren Sie den Fehler im Formular mit Bootstrap

Ich habe angefangen, Bootstrap zu verwenden, um ein schönes Seitendesign zu erzielen, ohne auf GWT zurückzugreifen (das Backend ist in Java erstellt).

Für meinen Anmeldebildschirm habe ich dieses Beispiel kopiert . Jetzt möchte ich zum Beispiel einen Fehler markieren, dass der Benutzername leer gelassen wurde. Also habe ich mich gefragt, wie das im Bootstrap-Framework dafür vorgeht. Oder vielleicht, wenn es Beispiele gibt, die das fehlerhafte Formular zeigen.

Ich bin mir nicht sicher, ob die Fehlermeldung im Eingabeelement rot oder unterhalb des Eingabeelements oder möglicherweise mit einem Popup angezeigt werden soll.

(AKTUALISIERT mit Beispielen für Bootstrap v4, v3 und v3)

Beispiele für Formulare mit Validierungsklassen für die letzten Hauptversionen von Bootstrap.

Bootstrap v4

Siehe die Live-Version auf 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

Siehe die Live-Version auf 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

Siehe die Live-Version auf jsfiddle

Die .error, .success, .warningund .infoKlassen sind auf die beigefügten .control-group. Dies ist das Standard-Bootstrap-Markup und -Stiling in Version 2. Folgen Sie einfach dem und Sie sind in guter Verfassung. Natürlich können Sie mit Ihren eigenen Stilen darüber hinaus ein Popup oder einen "Inline-Flash" hinzufügen, wenn Sie dies bevorzugen. Wenn Sie jedoch die Bootstrap-Konvention befolgen und diese Validierungsklassen an die hängen .control-group, bleibt sie konsistent und einfach zu verwalten (zumindest seit Sie ' Ich werde weiterhin die Vorteile von Bootstrap-Dokumenten und -Beispielen nutzen.

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

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

Man kann auch die folgende Klasse verwenden, während man die Bootstrap-Modal-Klasse verwendet (Version 3.3.7) ... Help-Inline und Help-Block funktionierten nicht in Modal.

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

Die Ausgabe sieht wie folgt aus:

Bootstrap V3:

Nachdem ich nach Laravel-Funktionen gesucht hatte, lernte ich diese erstaunliche Formularvalidierung kennen. Später habe ich die Funktionen des Glyphikonsymbols geändert. Jetzt sieht es toll aus.

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

So sieht es aus:

Nachdem ich es fertiggestellt hatte, dachte ich, ich sollte es auch in Codeigniter implementieren. Hier ist also die Codeigniter-3-Validierung mit Bootstrap:

Regler

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

Aussicht

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

Ausgabe:

Im Allgemeinen ist es am besten, den Fehler in der Nähe des Fehlerortes anzuzeigen. Wenn also jemand einen Fehler bei der Eingabe seiner E-Mail hat, markieren Sie das E-Mail-Eingabefeld.

Dieser Artikel enthält einige gute Beispiele. http://uxdesign.smashingmagazine.com/2011/05/27/getting-started-with-defensive-web-design/

Auch Twitter Bootstrap hat ein nettes Styling, das dabei hilft (scrollen Sie nach unten zum Abschnitt Validierungsstatus) http://twitter.github.com/bootstrap/base-css.html#forms

Das Hervorheben der einzelnen Eingabefelder ist etwas komplizierter. Der einfachste Weg wäre, einfach einen Bootstrap-Alarm oben mit Details darüber zu platzieren, was der Benutzer falsch gemacht hat. http://twitter.github.com/bootstrap/components.html#alerts

Verwenden Sie
has-dangerfür Bootstrap v4: für den form-groupWrapper,
form-control-dangerfür die Eingabe das Symbol (am Ende der Eingabe wird ✖ angezeigt),
form-control-feedbackfür den Nachrichten-Wrapper

Beispiel:

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

Kann CSS verwenden, um Fehlermeldungen nur bei Fehlern anzuzeigen.

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