Para una compatibilidad total con Bootstrap 3, agregué soporte para grupo de entrada , radio y casilla de verificación , que faltaba en las otras soluciones.
Actualización 20/10/2017 : Inspeccioné las sugerencias de las otras respuestas y agregó soporte adicional para marcado especial de radio en línea , mejor ubicación de errores para un grupo de radios o casillas de verificación y soporte agregado para una clase personalizada de validación para evitar la validación de los controles. Espero que esto ayude y gracias por las sugerencias.
Después de incluir el complemento de validación, agregue la siguiente llamada:
$.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);
}
}
});
Esto funciona para todas las clases de formulario Bootstrap 3. Si usa una forma horizontal, debe usar el siguiente marcado. Esto garantiza que el texto del bloque de ayuda respeta los estados de validación ("has-error", ...) del grupo de formularios .
<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>
