0

私は両方の図書館で初めてです。一部の選択で select2 を使用し始め、正常に動作した後、フォームを検証したいので、パセリを使用します。検証は正常に機能していますが、CSS クラスとエラー メッセージに問題がありました。

Select2 元の SELECT の新しいタグを作成し、それを非表示にします。gentelella ブートストラップ テンプレートの custom.css ファイルを編集して span.parsley-error を追加し、select2 の js ファイルで、作成された新しい span タグの 1 つに id を追加したので、「data-parsley-class-handler」と「元の select の data-parsley-errors-container' を正しい位置に表示し、CSS を select2 によって作成された新しい SPAN タグに変更できます。

問題は、選択項目から 1 つのオプションを選択すると、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 ブートストラップ テンプレートの 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で1つのオプションを選択したときに、select2からCSSクラスとエラーメッセージを削除するのを手伝ってくれることを願っています。

前もって感謝します。

4

3 に答える 3

1

これに対処するために PRを作成しました。

それまでの間、おそらく最も簡単なのは、inputイベントを手動でトリガーすることです。

$("#select_id").change(function() {
  $("#select_id").trigger('input')
})
于 2016-10-24T03:07:57.620 に答える