将欧芹与 Select2 一起使用

Posted 2023-04-13

【中文标题】将欧芹与 Select2 一起使用

【英文标题】：Use Parsley with Select2

【发布时间】：2016-10-31 09:17:51

【问题描述】：

我是两个图书馆的新手。我开始在一些选择中使用 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 标签。

问题是当我从选择项中选择一个选项时，没有从 SPAN 中删除 parsley-error css 类，也没有从错误消息中删除。

我做了什么？：

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 引导模板中的 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>'
    );

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

提前致谢。

【参考方案1】：

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

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

这也适用于 Select2。

【参考方案2】：

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

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

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

【参考方案3】：

验证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;