将字形图标添加到表单字段

Question

我想将图标添加到表单字段，例如 bootstrap 有：http://getbootstrap.com/css/?#forms-control-validation

通过调整选项，我能够让 class 在表单组上正确显示：

successClass: 'has-success',
        errorClass: 'has-error',
        classHandler: function (_el) {
            return _el.$element.closest('.form-group');
        }

但我想不出添加错误或复选标记字形的最佳方法。我认为它可能与 errorWrapper / errorContainer 有关，但没有 successWrapper/container

Answer 1

我想你可以用CSS得到你想要的东西，比如

.parsley-success::before { content: '√'; }

Answer 2

我最后想到了别的东西：

var bootstrapParsleyOptions = {
    successClass: 'has-success has-feedback',
    errorClass: 'has-error has-feedback',
    classHandler: function (_el) {
        return _el.$element.closest('.form-group');
    }
};

$.extend(true, ParsleyUI, {
    enableBootstrap: function () {
        $(".form-control-feedback").removeClass('glyphicon-ok').removeClass('glyphicon-remove');

        window.Parsley.on('form:init', function () {
            $(this.$element).find(".form-control-feedback").removeClass('glyphicon-ok').removeClass('glyphicon-remove');
        });

        window.Parsley.on('field:validated', function () {
            var element = this.$element;
            if (this.validationResult == true) {
                $(element).siblings(".form-control-feedback").removeClass('glyphicon-remove').addClass('glyphicon-ok');
                $(element).siblings(".sr-only").text("(success)");
            } else {
                $(element).siblings(".form-control-feedback").removeClass('glyphicon-ok').addClass('glyphicon-remove');
                $(element).siblings(".sr-only").text("(error)");
            }
        });
    },
    clearBootstrap: function () {
        $(".form-control-feedback").removeClass('glyphicon-ok').removeClass('glyphicon-remove');
    }
});

启用它：

$("#form").parsley(bootstrapParsleyOptions);
ParsleyUI.enableBootstrap();

重置它：

$("#form").parsley(bootstrapParsleyOptions).reset();
ParsleyUI.enableBootstrap();

将字形图标添加到表单字段

Adding glyphicon icons to form fields

parsley.js