Question

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

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

问题是当我从select项中选择一个选项时，没有从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 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>'
    );

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

提前致谢。

Answer 1

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

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

这也适用于Select2。

Answer 2

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

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

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

Answer 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;
}

将Parsley与Select2一起使用

3 个答案: