Bootstrap 3 验证

Question

我想我几乎可以使用 Bootstrap 验证，但它似乎有问题或者我遗漏了一些东西。使用输入组时，如何使图标显示在文本字段中。另一个问题是当它出错并且用户修复它时，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);
        }
    }
});

演示：Fiddle