Pour une compatibilité totale avec Bootstrap 3, j'ai ajouté la prise en charge du groupe d' entrée , de la radio et de la case à cocher , qui manquait dans les autres solutions.
Mise à jour 20/10/2017 : Suggestions inspectées des autres réponses et prise en charge supplémentaire du balisage spécial de la radio en ligne , meilleur placement des erreurs pour un groupe de radios ou de cases à cocher et prise en charge d'une classe .novalidation personnalisée pour empêcher la validation des contrôles. J'espère que cela aide et merci pour les suggestions.
Après avoir inclus le plugin de validation, ajoutez l'appel suivant:
$.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);
}
}
});
Cela fonctionne pour toutes les classes de formulaire Bootstrap 3. Si vous utilisez un formulaire horizontal, vous devez utiliser le balisage suivant. Cela garantit que le texte du bloc d'aide respecte les états de validation ("has-error", ...) du groupe de formulaires .
<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>