Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

mstdmstd's avatar

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

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 : https://imgur.com/a/maS2AuC but not below , as all rest inputs

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://imgur.com/a/3DzPMEg

Why so and how can it be fixed ?

Thanks!

0 likes
7 replies
SilenceBringer's avatar

@mstdmstd it's not your error. check the code from console

<span id="document_type-error" class="invalid-feedback">

looks like it's validation message added by proengsoft/laravel-jsvalidation library. Check the documents for explanations and possible solutions

mstdmstd's avatar

Yes, I read but I did not find solution

  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.

  1. At the printscreen https://imgur.com/a/3DzPMEg 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 wit class “invalid-feedback” below of next span element with class “select2 select2-container select2-container--default” ?
SilenceBringer's avatar

@mstdmstd read it here https://github.com/proengsoft/laravel-jsvalidation/wiki/Javascript-Rendering

			errorPlacement: function(error, element) {
                if (element.attr("type") == "radio") {
                    error.insertAfter(element.parents('div').find('.radio-list'));
                } else {
                    if(element.parent('.input-group').length) {
                        error.insertAfter(element.parent());
                    } else {
                        error.insertAfter(element);
                    }
                }
            },

I think you should use this one (just modify to works with select2)

1 like
mstdmstd's avatar

Thanks for link! I try to edit file resources/views/vendor/jsvalidation/bootstrap4.php like :

                errorPlacement: function (error, element) {

                    var isSelect2= false
                    if (element.attr('class').indexOf("select2") >= 0) { // that is select2 input
                        console.log('THAT IS select2::')
                        isSelect2= true
                    }
                    if (element.attr("type") == "radio" || isSelect2) {
                        console.log('-1 INSIDE isSelect2::')

                        if(isSelect2) {
                            var select2Container= element.find('.select2-container') // I FIND IT - I see this class in printscreen
                            console.log('select2Container::')
                            console.log(select2Container)
                            console.log('error::')
                            console.log(error)
                            debugger

                            error.insertAfter(select2Container); // I TRY TO SET ERROR AFTER select2-container element
                        } else {
                            error.insertAfter(element.parents('div').find('.radio-list'));
                        }
                    } else {
                        if(element.parent('.input-group').length) {
                            error.insertAfter(element.parent());
                        } else {
                            error.insertAfter(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(!isSelect2) { // not to set default error in case of .select2-container element
                            error.insertAfter(element);
                        }
                    }
                    console.log('ENDerrorPlacement::')

                }, // errorPlacement: function (error, element) {

What I see in browser's console : https://prnt.sc/1jbghdx Degugging I see valid flow for .select2-container , but this error not shown on screen (I do not see during debugging) and as result my page is reloaded and Laravel server validation work and I see server errors. Such reloading happens when I have JS error. I managed to catch this error : https://prnt.sc/1jblo3x But failed to find what can be source of this error or how to debug it ??

Any ideas ?

Snapey's avatar

click on create:688 (top right off your screenshot) it should show then failing code

Snapey's avatar

I think select 2 adds its own input field and hides yours

The error is probably below your (now) hidden input and above the select 2 one

Islam_Enlagar's avatar

you can use proengsoft/laravel-jsvalidation package and replace errorPlacement: function with

   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);
        }
    },

Please or to participate in this conversation.