Bootstrap mit jQuery Validation Plugin
Ich versuche, das add-Validierung, um meine form mit jQuery Validation Plugin, aber ich habe da ein problem, wo das plugin stellt die Fehlermeldungen wenn ich mit input-Gruppen.
$('form').validate({
rules: {
firstname: {
minlength: 3,
maxlength: 15,
required: true
},
lastname: {
minlength: 3,
maxlength: 15,
required: true
}
},
highlight: function(element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error');
}
});
Mein code: http://jsfiddle.net/hTPY7/4/
Du musst angemeldet sein, um einen Kommentar abzugeben.
für völlige Kompatibilität mit twitter bootstrap 3, die ich überschreiben müssen einige plugins Methoden:
Siehe Beispiel: http://jsfiddle.net/mapb_1990/hTPY7/7/
resetForm()
auf eine form der validator nicht nennenunhighlight
auf ungültige Elemente, die es erforderlich machen, entfernen Sie diehas-error
Klasse von hand, wenn das zurücksetzen eines Formulars. Was ich tun ist, rufen Sie die folgende Funktion anstelle von aufrufen der validator istresetForm()
direkt:function resetForm(form_id) { $(form_id).find(".form-group").removeClass("has-error"); $(form_id).data('validator').resetForm(); }
else if (element.prop('type') === 'radio') { error.insertBefore(element.parent().parent()); }
Für volle Kompatibilität mit Bootstrap 3, die ich Hinzugefügt Unterstützung für input-Gruppe, radio und checkbox, fehlte in den anderen Lösungen.
Update 10/20/2017: Überprüft Vorschläge der anderen Antworten und zusätzliche Unterstützung für spezielle markup radio-inline -, bessere Fehler-Platzierung für eine Gruppe von radios oder Checkboxen und zusätzliche Unterstützung für eine benutzerdefinierte .novalidation Klasse zu verhindern, Validierung der Kontrollen. Hoffe das hilft und vielen Dank für die Anregungen.
Nachdem, einschließlich der Validierung plugin fügen Sie den folgenden Aufruf:
Dies funktioniert für alle Bootstrap-3 form-Klassen. Wenn du eine horizontale form, verwenden Sie das folgende markup. Dadurch wird sichergestellt, dass die Hilfe-block text respektiert die Validierung Staaten ("muss-Fehler", ...) der form-Gruppe.
errorClass: "help-block error-help-block"
. Ich war ja schon mit .help-block für regelmäßige Informationen in der Hilfe, und dieser war überschrieben mit Formular-Validierung von Nachrichten. Das hinzufügen einer zweiten Klasse machte es einzigartig und so jetzt es fügt, anstatt überschreibt meine "wirkliche" Hilfe-Nachricht.width: 100%;
zu meiner checkbox-label für diese Arbeit, war die Botschaft sein, die direkt neben ihmVerwende ich Formen entwickelt, nur mit Twitter Bootstrap 3. Ich default setzen-Funktionen für validor und führen Sie nur validate-Methode mit Regeln. Ich verwende die Icons von FontAweSome, aber Sie können Glyphicons als im doc-Beispiel.
Getan. Nach dem ausführen der validate-Funktion:
JSFiddle-Beispiel
Hinzufügen auf Miguel Borges obige Antwort Sie können dem Benutzer, der grüne Erfolg-feedback durch hinzufügen der folgenden Zeile in der highlight - /unhighlight ist code-block.
dies ist die Lösung, die Sie benötigen, können Sie die
errorPlacement
Methode zu überschreiben, wo die Fehlermeldunges funktioniert für mich wie Magie.
Cheers
error.insertAfter('.form-group');
setzen, Fehler in allen .form-Gruppe. aber es zeigte mir die Idee. dankeHier ist was ich benutze, wenn das hinzufügen von Validierung zu bilden:
Dieser arbeitete für mich für Bootstrap-3-styling bei der Verwendung des jquery validation Bibliothek.
Habe ich es für ein radio ist:
diese Weise wird der Fehler angezeigt, nach der letzten radio option.
Ich weiß, diese Frage ist für Bootstrap 3, da aber einige Bootstrap-4 stellt sich die Frage, umgeleitet werden, um diese als Duplikate, hier ist das snippet Bootstrap-4-kompatibel:
Die wenigen Unterschiede sind:
has-danger
statthas-error
.has-*
Klassen. getbootstrap.com/docs/4.3/migration/#forms-1Für die bootstrap-4 beta wurden einige große änderungen zwischen der alpha-und beta-Versionen von bootstrap (und auch bootstrap 3), insb. in Bezug auf die form der Validierung.
Ersten, die Symbole korrekt, müssen Sie styling-das entspricht dem, was in bootstrap 3 und nicht mehr in der bootstrap-4-beta...hier ist, was ich mit
Den Klassen haben sich auch geändert, da die beta-verwendet den 'Zustand' der control-Klassen, die Ihre geposteten code nicht reflektieren, so dass Ihre obige code funktioniert möglicherweise nicht. Trotzdem, müssen Sie hinzufügen 'wurde validiert' - Klasse, um das Formular entweder in Erfolg oder highlight/unhighlight ist callbacks
Ich würde auch empfehlen, mit dem neuen element und Klassen für das Formular-Steuerelement-Hilfe-text
für die bootstrap-4 diese Arbeit mit mir gut
hoffe, es wird helfen !
Dies macht den Felder
fügen Sie ein radio-inline-Lösung für dieses https://stackoverflow.com/a/18754780/966181
DARK_DIESEL Antwort hat Super funktioniert für mich; hier ist der code für jedermann, das will, das äquivalent unter glyphicons:
Versuchen Sie es mit dieser Beispiel-code. Mit dem Jquery-validation-plugin und zusätzliche Methoden.
Dies ist der funktionierende code für mein Projekt. Hoffe, dies hilft Ihnen
JS:
CSS:
HTML:
Eine weitere Möglichkeit ist die Platzierung eines Fehler-container außerhalb des Formulars Gruppe vor der Zeit. Der validator wird dann zu verwenden, wenn notwendig.