Ich versuche, meinem Formular mit dem jQuery Validation Plugin eine Validierung hinzuzufügen, aber ich habe ein Problem, bei dem das Plugin die Fehlermeldungen ausgibt, wenn ich Eingabegruppen verwende.
$('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/
twitter-bootstrap
jquery-validate
twitter-bootstrap-3
Miguel Borges
quelle
quelle
Antworten:
Für die vollständige Kompatibilität mit Twitter Bootstrap 3 muss ich einige Plugins-Methoden überschreiben:
Siehe Beispiel: http://jsfiddle.net/mapb_1990/hTPY7/7/
quelle
resetForm()
den Validator eines Formulars aufrufen, werden keineunhighlight
ungültigen Elemente aufgerufen. Daher muss diehas-error
Klasse beim Zurücksetzen eines Formulars manuell entfernt werden. Was ich tue, ist die folgende Funktion aufzurufen, anstatt die des ValidatorsresetForm()
direkt aufzurufen :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()); }
Aus Gründen der vollständigen Kompatibilität mit Bootstrap 3 habe ich Unterstützung für Eingabegruppe , Radio und Kontrollkästchen hinzugefügt , die in den anderen Lösungen fehlte.
Update 20.10.2017 : Überprüfte Vorschläge der anderen Antworten und zusätzliche Unterstützung für spezielles Markup von Radio-Inline , bessere Fehlerplatzierung für eine Gruppe von Radios oder Kontrollkästchen und zusätzliche Unterstützung für eine benutzerdefinierte .novalidierung , um die Validierung von Steuerelementen zu verhindern. Hoffe das hilft und danke für die Vorschläge.
Fügen Sie nach dem Einfügen des Validierungs-Plugins den folgenden Aufruf hinzu:
Dies funktioniert für alle Bootstrap 3-Formularklassen. Wenn Sie ein horizontales Formular verwenden, müssen Sie das folgende Markup verwenden. Dadurch wird sichergestellt , dass der Hilfe-Block Text im Einklang mit den Validierungszuständen ( „has-Fehler“, ...) der form Gruppe .
quelle
errorClass: "help-block error-help-block"
. Ich habe bereits .help-block für regelmäßige Hilfeinformationen verwendet, und dies hat es mit Formularüberprüfungsnachrichten überschrieben. Das Hinzufügen einer zweiten Klasse hat es einzigartig gemacht, und jetzt wird meine "echte" Hilfemeldung angehängt, anstatt sie zu überschreiben.Ich verwende Formulare, die nur mit Twitter Bootstrap 3 erstellt wurden. Ich setze Standardfunktionen für Validor und führe nur Validierungsmethoden mit Regeln aus. Ich verwende Symbole von FontAweSome, aber Sie können Glyphicons wie im Dokumentbeispiel verwenden.
Getan. Nach dem Ausführen Validierungsfunktion:
JSFiddle-Beispiel
quelle
Wenn Sie die Antwort von Miguel Borges oben hinzufügen, können Sie dem Benutzer das grüne Erfolgsfeedback geben, indem Sie die folgende Zeile in den Codeblock zum Hervorheben / Hervorheben einfügen.
quelle
Dies ist die Lösung, die Sie benötigen. Mit dieser
errorPlacement
Methode können Sie überschreiben, wo die Fehlermeldung abgelegt werden sollEs funktioniert für mich wie Magie. Prost
quelle
error.insertAfter('.form-group');
Fehler in alle .form-Gruppen einfügen. aber es zeigte mir die Idee. Vielen Dankfür bootstrap 4 funktioniert das bei mir gut
hoffe es wird helfen!
quelle
validClass: 'valid-feedback'
Folgendes verwende ich, wenn ich dem Formular eine Validierung hinzufüge:
Dies funktionierte für mich beim Bootstrap 3-Styling bei Verwendung der jquery-Validierungsbibliothek.
quelle
Ich habe dies für Radios verwendet:
Auf diese Weise wird der Fehler unter der letzten Funkoption angezeigt.
quelle
Ich weiß, dass diese Frage für Bootstrap 3 gilt, aber da einige Fragen zu Bootstrap 4 als Duplikate zu dieser Frage umgeleitet werden, ist hier das Snippet Bootstrap 4-kompatibel:
Die wenigen Unterschiede sind:
has-danger
anstelle vonhas-error
quelle
.has-*
Klassen nicht mehr . getbootstrap.com/docs/4.3/migration/#forms-1Für die Beta-Version von Bootstrap 4 gab es einige große Änderungen zwischen der Alpha-Version und der Beta-Version von Bootstrap (und auch Bootstrap 3). in Bezug auf die Formularvalidierung.
Um die Symbole richtig zu platzieren, müssen Sie zunächst ein Styling hinzufügen, das dem entspricht, was in Bootstrap 3 und nicht mehr in Bootstrap 4 Beta enthalten war. Hier ist, was ich verwende
Die Klassen haben sich ebenfalls geändert, da die Beta den 'Status' des Steuerelements anstelle von Klassen verwendet, die Ihr veröffentlichter Code nicht widerspiegelt, sodass Ihr obiger Code möglicherweise nicht funktioniert. Auf jeden Fall müssen Sie dem Formular entweder im Erfolg oder im Hervorheben / Aufheben der Hervorhebung von Rückrufen die Klasse "Wurde validiert" hinzufügen
Ich würde auch empfehlen, das neue Element und die neuen Klassen für den Hilfetext zur Formularsteuerung zu verwenden
quelle
Das macht die Felder aus
quelle
Fügen Sie diesem https://stackoverflow.com/a/18754780/966181 einen Radio-Inline-Fix hinzu
quelle
Die Antwort von DARK_DIESEL hat für mich großartig funktioniert. Hier ist der Code für alle, die das Äquivalent mit Glyphicons verwenden möchten:
quelle
Versuchen Sie es mit diesem Beispielcode. Verwenden des Jquery-Validierungs-Plugins und zusätzlicher Methoden. Dies ist der Arbeitscode für mein Projekt. Hoffe das hilft dir
quelle
Eine andere Möglichkeit besteht darin, einen Fehlercontainer vorzeitig außerhalb Ihrer Formulargruppe zu platzieren. Der Validator wird es dann bei Bedarf verwenden.
quelle