Для повної сумісності з Bootstrap 3 я додав підтримку групи вводу , радіо та прапорець , якої бракувало в інших рішеннях.
Оновлення 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. Якщо ви використовуєте горизонтальну форму, ви повинні використовувати наступну розмітку. Це гарантує, що текст довідкового блоку дотримується станів перевірки ("has-error", ...) групи форм .
<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>