将欧芹与 Select2 搭配使用

Question

我是两个图书馆的新人。我开始在某些选择中使用 select2 并且工作正常，然后我想验证表单并使用 Parsley。 验证工作正常，但我在 CSS 类和错误消息方面遇到了一些问题。

Select2 为原来的 SELECT 创建新标签，然后隐藏它。我编辑 gentelella bootstrap 模板的 custom.css 文件，添加 span.parsley-error 并在 select2 的 js 文件中，我向创建的新跨度标签之一添加了一个 id，因此使用“data-parsley-class-handler”和“原始选择中的 data-parsley-errors-container' 我可以在正确的位置显示消息错误并将 CSS 更改为 select2 创建的新 SPAN 标签。

问题是当我从选择项中选择一个选项时，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>

来自gentelella bootstrap模板的

custom.css文件：

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

我希望有人可以帮助我在选择一个选项时从 select2 中删除 CSS 类和错误消息。

提前致谢。

Answer 1

验证css

.select2-hidden-accessible.parsley-error ~ ul ~ .select2-container--default .select2-selection--single {
     border-color: #f34943 !important;
}

.select2-hidden-accessible.parsley-success ~ ul ~ .select2-container--default .select2-selection--single {
     border-color: #31ce77 !important;
}

Answer 2

在 Parsley 版本 2 中，您可以在选择更改事件后强制验证：

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

这也适用于 Select2.

Answer 3

我创建了 PR 来解决这个问题。

与此同时，最简单的可能是手动触发

input

事件：

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

Answer 4

This worked for me.

<select class="form-select select2" name="country" id="country" required="required" data-parsley-required="true">
    <option value selected disabled >Select Country </option>
    <option value="1">Pakistan </option>
    <option value="2">Bangladesh </option>
    <option value="3">Saudi Arabia </option>
</select>

<div class="invalid-feedback">
    Please select country
</div>