Untuk kompatibilitas penuh dengan Bootstrap 3 saya menambahkan dukungan untuk kelompok input , radio dan kotak centang , yang tidak ada dalam solusi lain.
Pembaruan 10/20/2017 : Saran yang diinspeksi dari jawaban lain dan menambahkan dukungan tambahan untuk markup khusus radio-inline , penempatan kesalahan yang lebih baik untuk sekelompok radio atau kotak centang dan menambahkan dukungan untuk kelas .novalidation kustom untuk mencegah validasi kontrol. Semoga ini bisa membantu dan terima kasih atas sarannya.
Setelah menyertakan plugin validasi tambahkan panggilan berikut:
$.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);
}
}
});
Ini berfungsi untuk semua kelas bentuk Bootstrap 3. Jika Anda menggunakan formulir horizontal, Anda harus menggunakan markup berikut. Ini memastikan bahwa teks blokir bantuan menghargai status validasi ("kesalahan", ...) dari grup-bentuk .
<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>