mstdmstd
9 months ago

Proengsoft/laravel-jsvalidation failed working with using harvesthq/chosen library?

Posted 9 months ago by mstdmstd

Hello In my laravel 5.7/ blade / jQuery v3.3.1 / Bootstrap v4.1.2 app I use https://github.com/proengsoft/laravel-jsvalidation library, with definition in my blade form

    <script src="{{ asset('vendor/jsvalidation/js/jsvalidation.js')}}"></script>
    {!! JsValidator::formRequest('App\Http\Requests\StorageSpaceRequest', '#form_storage_space_edit'); !!}

where StorageSpaceRequest is file in app/Http/Requests subdirectory, It works ok , until I decided to replace select inputs with https://harvesthq.github.io/chosen/ library and my validation rules(usually required) do not work any more.

I init chosen with code

    $(".chosen_select_box").chosen({
        disable_search_threshold: 10,
        no_results_text: "Nothing found!",
    });

Before replacement this good working select input looked like:

<div class="col-xs-12 col-sm-8">
        <select class="form-control editable_field" id="customer_type" name="customer_type" data-placeholder="Choose customer type" aria-describedby="customer_type-error" aria-invalid="true"><option value="" selected=""></option><option value="SS">SS</option><option value="RS">RS</option></select><span id="customer_type-error" class="help-block error-help-block">The customer type field is required.</span>
    </div>
    
After replacement with chosen selector(which do not work) has syntax:
<select class="form-control editable_field chosen_select_box" id="account_type" name="account_type" data-placeholder="Choose account type" style="display: none;"><option value="" selected=""></option><option value="I">Individual</option><option value="B">Business</option></select>   

I suppose that the reason of this error is that when value in chosen selection is selectted, its value is not saved in

 id="account_type" name="account_type"...

I tried a decision to set near with chosen input hidden input and in chosen input to modify id and set onchange event in my select wrapper, like :

{!! $viewFuncs->select('chosen_storage_type_id', $storageTypesArray, isset($storageSpace->storage_type_id) ? $storageSpace->storage_type_id : '', "form-control
 editable_field chosen_select_box", ['onchange'=>"javascript:chosenSelectionOnChange('storage_type_id'); ",'data-placeholder'=>"Choose storage type"] ) !!}
<input type="hidden" id="storage_type_id" name="storage_type_id" value="{{ isset($storageSpace->storage_type_id) ? $storageSpace->storage_type_id : '' }}">

so in chosenSelectionOnChange new value is set to hidden input, but looks like laravel-jsvalidation can not work with hidden inputs... Can be some other decision ?

can it be fixed somehow? I got chosen selection as it has search functionality and seems good working...

Thanks!

Please sign in or create an account to participate in this conversation.