Ich kann Popovers mit Bootstrap leicht genug anzeigen lassen und ich kann auch Validierungen mit dem Standard- Plugin für die jQuery-Validierung oder der jQuery-Validierungs-Engine durchführen , aber ich kann nicht herausfinden, wie man sie ineinander überführt.
Ich denke, was ich brauche, ist ein Hook, der vom Validator aufgerufen wird, wenn er eine Benachrichtigung anzeigen möchte. Geben Sie ihm einen Abschluss, der die Nachricht und das Zielelement an ein Popover weiterleitet. Dies scheint eine Art Abhängigkeitsinjektion zu sein.
Theoretisch alles schön, aber ich kann einfach nicht herausfinden, wo sich dieser Hook befindet oder ob einer in einer der Validierungs-Engines vorhanden ist. Beide scheinen darauf bedacht zu sein, die Verantwortung für die Anzeige von Benachrichtigungen mit allen Arten von ausgefeilten Optionen für Platzierung, Wrapper und Stile zu übernehmen, wenn ich nur die Fehlertypen (ich brauche nicht unbedingt den Nachrichtentext) und das Element, auf das sie sich beziehen, suche zu. Ich habe Hooks für das gesamte Formular gefunden, nicht für die einzelnen Benachrichtigungen.
Ich bevorzuge Validierungssysteme, die Klassen zum Definieren von Regeln verwenden, da sie gut mit dynamisch erstellten Formularen spielen.
Hat jemand eine Lösung oder eine bessere Idee?
quelle
Dies ist ein praktisches Beispiel:
Es werden keine Bootstrap-Popover verwendet, aber es sieht wirklich gut aus und ist leicht zu erreichen.
AKTUALISIEREN
Um eine Popover-Validierung zu erhalten, können Sie diesen Code verwenden:
Sie bekommen so etwas:
Schauen Sie sich die jsFiddle an .
quelle
Chris Fulstow hatte es richtig gemacht, aber es hat noch eine Weile gedauert, also hier ist der vollständige Code:
Dies zeigt das Popover bei einem Fehler an und verbirgt die Standardfehlerbezeichnungen:
Dadurch wird das Popover eingerichtet. Das einzige, was Sie dafür brauchen, ist Trigger: 'manuell'
Die an Popover übergebenen Titel- und Inhaltsattribute funktionierten nicht, daher habe ich sie in meiner # Passwort-Eingabe mit Dateninhalt = 'Mindestens 5 Zeichen' und Daten-Originaltitel = 'Ungültiges Passwort' inline angegeben. Sie benötigen außerdem rel = 'popover' in Ihrem Formular.
Dies funktioniert, aber der Popover flackert, wenn die Auswahl aufgehoben wird. Irgendeine Idee, wie man das behebt?
quelle
Hier ist eine Fortsetzung des hervorragenden Vorschlags von Varun Singh, der verhindert, dass das "Flimmern" der Validierung ständig versucht, "zu zeigen", obwohl das Popup bereits vorhanden ist. Ich habe einfach ein Fehlerstatus-Array hinzugefügt, um zu erfassen, welche Elemente Fehler anzeigen und welche nicht. Klappt wunderbar!
quelle
popover
für jedes einzelne Feld, das Sie validieren möchten, eine explizite Definition definieren müssen ? Wenn ja, ist das verrückt .Diese jQuery-Erweiterung für das jQuery Validation Plugin (getestet mit Version 1.9.0) reicht aus.
https://github.com/tonycoco/rails_template/blob/master/files/assets/javascripts/jquery.validate.bootstrap.js
Dies fügt auch einige Rails-esk-Fehlermeldungen hinzu.
quelle
Ich ziehe es vor, das CSS von Bootstrap zu ändern. Fügen Sie einfach die Klassen von jQuery validate an der richtigen Stelle hinzu. Feldvalidierungsfehler und Eingabevalidierungsfehler
quelle
So habe ich es mit Bootstrap 2.x und jQuery Validate 1.9 gemacht
quelle
Bitte schauen Sie sich Folgendes an:
- https://gist.github.com/3030983
Ich denke, es ist das einfachste von allen.
BEARBEITEN
Code vom Link:
quelle
Vielen Dank für das Heads Up! Hier ist meine Version für Bootstrap, aber mit Tooltips. Meiner Meinung nach ist es eleganter als Popovers. Ich weiß, dass die Frage für Popover war, also stimmen Sie aus diesem Grund bitte nicht ab. Vielleicht wird es jemandem so gefallen. Ich liebe es, wenn ich nach etwas suche und neue Ideen für Stackoverflow gefunden habe. Hinweis: Es ist kein Markup auf dem Formular erforderlich.
quelle
So habe ich es geschafft. Es sind jedoch zwei Änderungen am Validierungsskript erforderlich (ich habe hier den Code für Bootstrap 1.4 erhalten und ihn dann geändert - http://mihirchitnis.net/2012/01/customizing-error-messages-using-jquery-validate-plugin- for-twitter-bootstrap / )
Mein Aufruf zur Bestätigung:
Dann müssen Sie zwei Dinge in jquery.validate.js ändern.
1. Wenden Sie diesen Fix an - https://github.com/bsrykt/jquery-validation/commit/6c3f53ee00d8862bd4ee89bb627de5a53a7ed20a
2. Erstellen Sie nach Zeile 647 (in der Funktion showLabel den Etikettenteil ) nach Zeile Zeile
.addClass(this.settings.errorClass)
hinzufügen:.addClass("help-inline")
Jemand kann vielleicht einen Weg finden, den zweiten Fix in der Validierungsfunktion anzuwenden, aber ich habe keinen Weg gefunden, da showLabel nach Hervorhebung aufgerufen wird.
quelle
Dies ist, was ich in meine Validierung eingefügt habe, um den Twitter Bootstrap-Richtlinien zu entsprechen. Die Fehlerüberprüfungsnachricht wird in a
<span class=help-inline>
eingefügt und wir möchten den äußeren Container alserror
oder hervorhebensuccess
:quelle
Hier ist ein Update zu Kenny Meyers ausgezeichneter Antwort oben . Es gab einige Probleme, die verhindert haben, dass es für mich funktioniert, die ich in diesem Ausschnitt angesprochen habe:
quelle
Ich bin mir nicht sicher, ob dies für die Diskussion relevant ist, da im Originalposter nach Hooks zum Ein- / Ausblenden von Bootstrap-Popovers gefragt wurde.
Ich suchte nach einer einfachen Validierung und Popovers spielten keine Rolle. Ein verwandter Beitrag und der erste in den Google-Suchergebnissen wurden bereits als Duplikat dieser Frage markiert. Daher war es sinnvoll, das ausgezeichnete jqValidation JS von @ ReactiveRaven zu erwähnen, das treffend als jqBootstrapValidation bezeichnet wird und gut mit Twitter Bootstrap harmoniert. Die Einrichtung dauert nur wenige Minuten. Laden Sie hier .
Hoffe das schafft Mehrwert.
quelle
tl; dr vermeiden , um explizite popovers aufzuzählen durch eine Hash - Tabelle mit den IDs der Elemente zu speichern, und die Schaffung von popovers on-the-fly (Mashup Jeffrey Gilbert und Kenny Meyers Ansätze).
Hier ist mein nehmen, die das Flackern Problem von anderen erwähnt behebt, aber im Gegensatz zu @Jeffrey Gilberts Antwort, verwendet keine Liste (
errorStates
) , sondern verwendet eine Fehler Karte . Hash-Karten FTW. Ich denke, ich erinnere mich, dass ich irgendwo gelesen habe, dass jedes Problem in CS mit einer Hash-Map gelöst werden kann :)Vielen Dank an alle anderen, die Ideen dazu gepostet haben.
quelle
Schau dir das an: https://github.com/mingliangfeng/jquery.validate.bootstrap.popover
Es zeigt, wie Bootstrap-Popover-CSS anstelle von JS verwendet wird. Das Popup der JS-Methode verursacht ein blinkendes Problem.
quelle
Wenn Sie den obigen Kenny Meyer-Code für Popups verwenden, beachten Sie, dass Regeln, die den Inhalt eines Felds überprüfen, aber nicht erforderlich sind, z. B. eine gültige URL, dazu führen, dass das Popup beim Löschen des Felds nicht verschwindet. Siehe unten onkeyup für die Lösung. Wenn jemand eine bessere Lösung hat, bitte posten.
quelle