Bootstrap 3validation

我想我几乎有Bootstrapvalidation工作，但它似乎有缺陷或我错过了一些东西。 使用输入组时，如何使图标显示在文本字段中。 另一个问题是，当它出错并且用户修复它时，x图标仍然存在，而不是复选框。

的jsfiddle

$('form').validate({ rules: { field1: { minlength: 3, maxlength: 15, required: true }, field2: { minlength: 3, maxlength: 15, required: true } }, highlight: function(element) { $(element).closest('.form-group').removeClass('has-success').addClass('has-error') $(element).next('span').removeClass('glyphicon-ok').addClass('glyphicon-remove'); }, unhighlight: function(element) { $(element).closest('.form-group').removeClass('has-error').addClass('has-success') $(element).next('span').removeClass('glyphicon-remove').addClass('glyphicon-ok'); }, //errorElement: 'span', errorClass: 'help-block', errorPlacement: function(error, element) { if(element.parent('.input-group').length) { error.insertAfter(element.parent()); } else { error.insertAfter(element); } } }); 

Answer 1

问题是，下一个兄弟可能是错误消息标签而不是反馈

 $('form').validate({ rules: { field1: { minlength: 3, maxlength: 15, required: true }, field2: { minlength: 3, maxlength: 15, required: true } }, highlight: function (element) { $(element).closest('.form-group').removeClass('has-success').addClass('has-error') $(element).parent().find('.form-control-feedback').removeClass('glyphicon-ok').addClass('glyphicon-remove'); }, unhighlight: function (element) { $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); $(element).parent().find('.form-control-feedback').removeClass('glyphicon-remove').addClass('glyphicon-ok'); }, //errorElement: 'span', errorClass: 'help-block', errorPlacement: function (error, element) { if (element.parent('.input-group').length) { error.insertAfter(element.parent()); } else { error.insertAfter(element); } } }); 

演示： 小提琴