Markieren Sie den Fehler im Formular mit Bootstrap

194

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.

Luciano
quelle
1
Checkout jquery validieren. es ist ziemlich einfach. bassistance.de/jquery-plugins/jquery-plugin-validation
Scott Simpson

Antworten:

274

(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

Überprüfung des Bootstrap v4-Formulars

<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

Überprüfung des Bootstrap v3-Formulars

<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

Überprüfung des Bootstrap v2-Formulars

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>
jonschlinkert
quelle
130
Beachten Sie, dass mit Bootstrap 3 , die Sie ändern müssen control-groupzu form-group, fügen Sie form-controlauf <input>Elemente, help-inlineauf help-blockund warningzu has-warning.
Jim Stewart
@ JimStewart danke! gut zu wissen. Ich werde aktualisieren, sobald ich eine Chance habe
Jonschlinkert
11
Es wurde in Bootstrap V3,
Waqar Alamgir
8
Bootstrap 3 verwendet verschiedene Klassen wie has-error. Pleaserefer getbootstrap.com/css
Nish
1
Wie in der Bootstrap3-Dokumentation erwähnt: Bootstrap enthält Validierungsstile für Fehler-, Warn- und Erfolgszustände in Formularsteuerelementen. Fügen Sie zur Verwendung dem übergeordneten Element .has-warning, .has-error oder .has-success hinzu. Alle .control-label, .form-control und .help-block innerhalb dieses Elements
Nejmeddine Jammeli
147

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>
Waqar Alamgir
quelle
1
Es ist toll, eine v3-Antwort zu haben, aber es enthält keine Fehlermeldungen.
Dave
Danke @ Dave, aber dein Vorschlag wurde von anderen abgelehnt. Ich habe die Antwort aktualisiert.
Waqar Alamgir
Ihr Demo-Link zeigt nicht den Code an, den Sie gepostet haben.
Ayjay
Vielen Dank an @ayjay für diesen Hinweis. Leider gibt es separate Dokumente zum Hinzufügen von Hilfeblöcken. Die Antwort wurde aktualisiert.
Waqar Alamgir
1
@fsasvari verwendet ein Rastersystem wie folgt: <div class = "form-group has-success"> <span class = "col-sm-12"> <label class = "control-label" für = "inputSuccess1"> Eingabe mit Erfolg </ label> </ span> <span class = "col-sm-6"> <input type = "text" aria-descriptionby = "helpBlock2" id = "inputSuccess1" class = "form-control"> </ span> <span class = "col-sm-6"> <span id = "helpBlock2" class = "help-block"> Ein Hilfetextblock, der in eine neue Zeile umbricht. </ span> </ span> < / div>
Waqar Alamgir
16

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:

Beispiel für einen Fehlertext in modal

Jay
quelle
4

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: Geben Sie hier die Bildbeschreibung ein

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: Geben Sie hier die Bildbeschreibung ein

Avnish alok
quelle
3

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

hajpoj
quelle
1

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>

Sojtin
quelle
0

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