Петрушка. js + Select2: bootstrap класс "has-error" не добавлен в родительский div и контейнер ошибок появляется над полем - PullRequest
Новая
       53

Петрушка. js + Select2: bootstrap класс "has-error" не добавлен в родительский div и контейнер ошибок появляется над полем

0 голосов
/ 14 января 2020

У меня возникают проблемы с получением петрушки для добавления bootstrap class has-error в родительский form-group div во все поля замены jquery -select2, когда я проверяю форма.

Во-вторых, по умолчанию контейнер ошибок появляется над полем select2. Мне удалось обойти эту проблему, добавив контейнер ошибок уже в разметке HTML в случае элементов select2 и используя условную функцию для опции errorsContainer . Но мне интересно, есть ли лучший способ просто использовать JS?

Вот мой код: 

$("#select").select2();

 $.extend(window.Parsley.options, {
  errorClass: "has-error",
  successClass: "has-success",
  classHandler: function(el) {
    return el.$element.closest(".form-group");
  },
  errorsContainer: function(el) {
   if (el.element.className.includes("select2")) {
      var target = el.$element.siblings(".help-block");
   }
   return target;
  },
  errorsWrapper: '<span class="help-block"></span>',
  errorTemplate: "<div></div>"
 });

 $("#demo-form").parsley();
<link href="https://adminlte.io/themes/AdminLTE/bower_components/select2/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://adminlte.io/themes/AdminLTE/dist/css/AdminLTE.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.min.js"></script>

<form id="demo-form"  style="width:200px">
 <div class="form-group" >
  <label>Select 2</label>
  <select id="select" name="" class="form-control" required="" multiple="" >
  <option value="0">Alpha</option>
  <option value="1">Bravo</option>
  <option value="2">Charly</option>
 </select>
 <span class="help-block"></span>
 </div>
 <br>
 <div class="form-group">
  <label>Text</label>
  <input type="text" class="form-control" required="" placeholder="Enter ...">
 </div>
  <br>
 <button type="submit">Submit</button>
</form>
...