Для полной совместимости с Bootstrap 3 я добавил поддержку input-group, radio и checkbox, которые отсутствовали в других решениях.
Обновление 20.10.2017: изучены предложения других ответов и добавлена дополнительная поддержка специальной разметки встроенного радио, улучшено размещение ошибок для группы радио или флажков и добавлена поддержка настраиваемого класса .novalidation для предотвращения проверки элементов управления. Надеюсь, это поможет, и спасибо за предложения.
После включения плагина проверки добавьте следующий вызов:
$.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);
}
}
});
Это работает для всех классов форм Bootstrap 3. Если вы используете горизонтальную форму, вы должны использовать следующую разметку. Это гарантирует, что текст help-block соответствует состояниям проверки ("has-error", ...) form-group.
<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>
person
Andreas Krohn
schedule
25.09.2013
