Использовать петрушку с Select2

Question

Я новичок в обеих библиотеках. Я начал использовать select2 в некоторых вариантах и ​​отлично работает, тогда я хочу проверить форму, и я использую Parsley. Проверка работает нормально, но у меня были некоторые проблемы с классом CSS и сообщением об ошибке.

Select2 создайте новые теги для оригинального SELECT, затем скройте его. Я редактирую файл custom.css из шаблона бутстрапа gentelella, добавляя span.parsley-error и в js-файл select2, я добавил идентификатор к одному из созданных новых тегов span, поэтому, используя 'data-parsley-class-handler' и ' data-parsley-errors-container 'в исходном элементе. Я могу показать ошибку сообщения в правильной позиции и сменить CSS на новый тег SPAN, созданный select2.

Проблема заключается в том, что я выбираю один вариант из элементов select, parsley-error css класс не удаляется из SPAN, ни сообщение об ошибке.

Что я сделал ?:

HTML:

<div class="form-group col-md-2 col-sd-4 col-xs-6"> 
    <label for="casilla_cliente_id" class="control-label">RUT <span class="required">*</span></label> 
    <select class="select2_single form-control select2-hidden-accessible" tabindex="-1" name="casilla[cliente_id]" data-parsley-errors-container="#er_cliente_id" data-parsley-class-handler="#select2-casilla_cliente_id" required="required" id="casilla_cliente_id" aria-hidden="true"> 
     <option value="" selected="selected"></option> 
     <option value="14933">1.318.XXX-X | Name 1</option> 
     <option value="16469">1.363.XXX-X | Name 2</option> 
     <option value="17268">99.594.XXX-X | Name 3</option> 
     <option value="16129">99.599.XXX-X | Name 4</option> 
    </select> 
    <span class="select2 select2-container select2-container--default select2-container--focus" dir="ltr" style="width: 153px;"> 
     <span class="selection"> 
      <span id="select2-casilla_cliente_id" class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1" aria-labelledby="select2-casilla_cliente_id-container"> 
       <span class="select2-selection__rendered" id="select2-casilla_cliente_id-container"> 
        <span class="select2-selection__placeholder">RUT</span> 
       </span> 
       <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span> 
      </span> 
     </span> 
     <span class="dropdown-wrapper" aria-hidden="true"></span> 
    </span> 
    <span id="er_cliente_id"></span> 
</div> 

custom.css файл из gentelella начальной загрузки шаблона:

span.parsley-error, input.parsley-error, textarea.parsley-error, select.parsley-error { 
    background: #FAEDEC !important; 
    border: 1px solid #E85445 !important; 
} 

select2.full.js:

BaseSelection.prototype.render = function() { 
    var $selection = $(
     '<span id="select2-' + this.$element.attr('id') + '" class="select2-selection" role="combobox" ' + 
     ' aria-haspopup="true" aria-expanded="false">' + 
     '</span>' 
    ); 

Я надеюсь, что кто-то может помочь мне удалить класс CSS и сообщение об ошибке из select2, когда я выбираю один параметр в select.

Заранее спасибо.

Answer 1

В Петрушка версии 2 вы можете заставить проверку после выбора события изменения:

$("#select_id").change(function() { 
      $(this).parsley().validate(); 
}); 

Это также работает для выбор2.

Answer 2

Я создал a PR, чтобы решить эту проблему.

В то же время самый простой, вероятно, чтобы вызвать input событие вручную:

$("#select_id").change(function() { 
    $("#select_id").trigger('input') 
})