Добавление значков glyphicon к полям формы

Question

Я желающие добавить иконки к полям формы, как бутстрап имеет: http://getbootstrap.com/css/?#forms-control-validation

Я был в состоянии получить класс для правильного отображения на форме-группе путем корректировки параметров:

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

, но я не могу найти лучший способ добавить символ или галочку. Я предполагаю, что это может иметь что-то делать с errorWrapper/errorContainer но не один для successWrapper/контейнер

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: '√'; }