Question

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

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

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

但我无法找出添加错误或复选标记glyphicon的最佳方法。我假设它可能与errorWrapper / errorContainer有关，但是没有一个用于successWrapper / container

Answer 1

我最终想出了别的东西：

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();

Answer 2

我想你可以通过CSS获得你想要的东西，比如

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

添加glyphicon图标以形成字段

2 个答案: