Para total compatibilidade com o Bootstrap 3, adicionei suporte ao grupo de entrada , rádio e caixa de seleção que estavam faltando nas outras soluções.
Atualização 20/10/2017 : sugestões inspecionadas das outras respostas e suporte adicional adicionado para marcação especial de rádio em linha , melhor posicionamento de erro para um grupo de rádios ou caixas de seleção e suporte adicional para uma classe .novalidation personalizada para impedir a validação de controles. Espero que isso ajude e obrigado pelas sugestões.
Após incluir o plug-in de validação, adicione a seguinte chamada:
$.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);
}
}
});
Isso funciona para todas as classes de formulário do Bootstrap 3. Se você usar um formulário horizontal, precisará usar a seguinte marcação. Isso garante que o texto do bloco de ajuda respeite os estados de validação ("has-error", ...) do grupo de formulários .
<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>
