Per la piena compatibilità con Bootstrap 3 ho aggiunto il supporto per gruppo di input , radio e casella di controllo , che mancava nelle altre soluzioni.
Aggiornamento 20/10/2017 : ispezionati suggerimenti delle altre risposte e aggiunto supporto aggiuntivo per markup speciali di radio-inline , migliore posizionamento degli errori per un gruppo di radio o caselle di controllo e supporto aggiunto per una .novalidation personalizzata classe per impedire la convalida dei controlli. Spero che questo aiuti e grazie per i suggerimenti.
Dopo aver incluso il plug-in di convalida aggiungere la seguente chiamata:
$.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);
}
}
});
Funziona con tutte le classi di moduli Bootstrap 3. Se usi una forma orizzontale devi usare il seguente markup. Questo assicura che il testo del blocco della guida rispetti gli stati di convalida ("errore", ...) del gruppo di moduli .
<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>
