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:
$.validator.setDefaults({
errorElement: "span",
errorClass: "help-block",
highlight: function (element, errorClass, validClass) {
// Only validation controls
if (!$(element).hasClass('novalidation')) {
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
}
},
unhighlight: function (element, errorClass, validClass) {
// Only validation controls
if (!$(element).hasClass('novalidation')) {
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
}
},
errorPlacement: function (error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
}
else if (element.prop('type') === 'radio' && element.parent('.radio-inline').length) {
error.insertAfter(element.parent().parent());
}
else if (element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
error.appendTo(element.parent().parent());
}
else {
error.insertAfter(element);
}
}
});
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 .
<div class="form-group">
<div class="col-lg-12">
<div class="checkbox">
<label id="LabelConfirm" for="CheckBoxConfirm">
<input type="checkbox" name="CheckBoxConfirm" id="CheckBoxConfirm" required="required" />
I have read all the information
</label>
</div>
</div>
</div>
