Why validation message is shown below of select input with select2 class?

Question

In Laravel 8 / "jquery": "^3.4 / bootstrap 4.6 app I use proengsoft/laravel-jsvalidation library for validation on client side and it works ok, but I have a problems when validation rule is applied to select input with select2 plugin applied, like:

<div class="col-md-6">
    <div class="form-group">
        <label for="document_type">
            Document type <span class="text-danger">*</span>
        </label>
        <select class="form-control select2" id="document_type" name="document_type">
            <option value="">Select...</option>
            @if($documentTypeLabelValueList)
                @foreach($documentTypeLabelValueList as $key=>$value)
                    <option
                        value="{{ $key }}"
                        {{ old('document_type', ( $educationData->document_type ?? -1 ) )==$key ? 'selected':'' }}
                    >
                        {{ $value }}
                    </option>
                @endforeach
            @endif
        </select>
        @error('document_type')
        <p class="validation_error">{{ $message }}</p>
        @enderror
    </div>
</div>

Validation error message is shown ABOVE of select input, but not below, as all rest inputs: https://i.sstatic.net/OTA6M.jpg

Select input are initialized with:

$('.select2').select2();

If from Select input remove “select2” class then validation message is below. What I see in browser's console: https://i.sstatic.net/5FVDD.jpg

Why so and how can it be fixed?

MODIFIED BLOCK :

1. Looks like piece of code:

   @error('document_type')
       <p class="validation_error">{{ $message }}</p>
   @enderror
   

   is from prior version, when validation was made with form submittion. If to remove it all works the same.

2. At the printscreen https://i.sstatic.net/5FVDD.jpg I see that:

   • a) original select input is hidden,
   • b) validation error span is located AFTER hidden original select input
   • c) new select2 select input is located AFTER validation error span and that is why it looks like so
   • d) But how can it be fixed. We have class of validation error span invalid-feedback Are there some css/javascript tricks to move any span element with class invalid-feedback below of next span element with class select2 select2-container select2-container--default?

Answer 1

I've solved it by editing the following file:

resources\views\vendor\jsvalidation\bootstrap.php

I've changed this:

            errorPlacement: function(error, element) {
            if (element.parent('.input-group').length ||
                element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
                error.insertAfter(element.parent());
                // else just place the validation message immediately after the input
            } else {
                error.insertAfter(element);
            }
        },

Into this:

            errorPlacement: function(error, element) {
            if (element.parent('.input-group').length ||
                element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
                error.insertAfter(element.parent());
                // else just place the validation message immediately after the input
            } else if (element.parent().children('.select2').length){
                error.insertAfter(element.parent().children('.select2'));
            } else {
                error.insertAfter(element);
            }
        },

Then you should also remove the following code, because it's no longer needed:

    @error('document_type')
    <p class="validation_error">{{ $message }}</p>
    @enderror