Use Parsley with Select2

Question

I'm new in both libraries. I began using select2 in some selects and works fine, then I want to validate the form and I use Parsley. Validation is working fine, but I had some problems with CSS class and error message.

Select2 create new tags for the original SELECT, then hide it. I edit the custom.css file of gentelella bootstrap template adding span.parsley-error and in js file of select2, I added an id to one of the new span tags created, so using 'data-parsley-class-handler' and 'data-parsley-errors-container' in the original select I can show the message error in the right position and change CSS to the new SPAN tag created by select2.

The problem is when I select one option from the select items, parsley-error css class is not removed from SPAN, neither the error message.

What I did?:

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>

custom.css file from gentelella bootstrap template:

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

I hope somebody can help me in remove the CSS class and error message from select2 when I select one option in select.

Thanks in advance.

score 3 · Answer 1 · answered Oct 22 '19 at 19:16

3

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

answered Oct 22 '19 at 19:16

Pamela Maia

41
3

Please explain a bit more, how did you get the parsley-success or error class to apply to the hidden element. – Tim Bogdanov Jul 01 '22 at 19:02
1

The secret is in the combinator (~) - https://www.w3.org/TR/selectors/#general-sibling-combinators – Pamela Maia Jul 03 '22 at 01:21
1

The subsequent-sibling combinator is made of the "tilde" (~) code point that separates two compound selectors. The elements represented by the two compound selectors share the same parent in the document tree and the element represented by the first compound selector precedes (not necessarily immediately) the element represented by the second one. – Pamela Maia Jul 03 '22 at 01:22
this should be the selected answer – Tim Bogdanov Jul 05 '22 at 17:12

score 2 · Answer 2 · answered Jul 21 '16 at 09:18

2

In Parsley version 2 you can force validation after select change event:

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

This also works for Select2.

answered Jul 21 '16 at 09:18

Amin

579
7
23

score 1 · Answer 3 · answered Oct 24 '16 at 03:07

1

I created a PR to address this.

In the meantime the easiest is probably to trigger an input event manually:

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

answered Oct 24 '16 at 03:07

Marc-André Lafortune

78,216
16
166
166

Sabir Ali · Answer 4 · 2023-03-23T22:22:11.337

<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>

Use Parsley with Select2

4 Answers4