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.
twitter-bootstrap
Luciano
quelle
quelle
Antworten:
(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
Bootstrap v3
Siehe die Live-Version auf Codepen
Bootstrap v2
Siehe die Live-Version auf jsfiddle
Die
.error
,.success
,.warning
und.info
Klassen 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.quelle
control-group
zuform-group
, fügen Sieform-control
auf<input>
Elemente,help-inline
aufhelp-block
undwarning
zuhas-warning
.Bootstrap V3 :
Offizieller Doc Link 1
Offizieller Doc Link 2
quelle
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.
Die Ausgabe sieht wie folgt aus:
quelle
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.
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
Aussicht
Ausgabe:
quelle
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
quelle
Verwenden Sie
has-danger
für Bootstrap v4: für denform-group
Wrapper,form-control-danger
für die Eingabe das Symbol (am Ende der Eingabe wird ✖ angezeigt),form-control-feedback
für den Nachrichten-WrapperBeispiel:
quelle
Kann CSS verwenden, um Fehlermeldungen nur bei Fehlern anzuzeigen.
quelle