In Laravel 5.7 app make validation with tinyMCE editor

Hello,
In my Laravel 5.7 application I use laravel-jsvalidation plugin( https://github.com/proengsoft/laravel-jsvalidation/wiki/Basic-Usage )
and it worked ok,
I needed to including textarea input as tinyMCE editor and to use i with validation and I implemented it with 2 textarea inputs :

<div class="form-row mb-3 {{ in_array('description', $errorFieldsArray) ? 'validation_error' : '' }}">
<label class="col-xs-12 col-sm-4 col-form-label">Description</label>
<div class="col-xs-12 col-sm-8">
<span style="display: inline;">
{{ Form::textarea('description', isset($vote->description) ? $vote->description : '', [ "class"=>"form-control editable_field textarea_input ", "rows"=>"0", "cols"=> 120, "id"=>"description", "autocomplete"=>"off", "style"=>"width:0; height:0" ] ) }}
</span>
{{ Form::textarea('description_container', isset($vote->description) ? $vote->description : '', [ "class"=>"form-control editable_field textarea_input ", "rows"=>"5", "cols"=> 120, "id"=>"description_container", "autocomplete"=>"off" ] ) }}
</div>
</div>

HTML:

where 1st textarea is for form submitting, as entered content is copied into it from 2nd textarea, which is used as

tinyMCE editor.
In tinyMCE definition I added rows:

setup: function (editor) {
editor.on('change', function () {
var current_context= tinymce.get(by_selector_container).getContent()
$('#' + by_selector).html( current_context );
});
},

Code (JavaScript):

where by_selector_container and by_selector are names of these textarea inputs. It works, but the only problem that on page I can see 1st textarea input,
despite I try to hide it setting wight.width in 0 in style of my code above, but anyway
I still see small textarea input, which I want to hide : https://imgur.com/a/43FRFJU

I tried to usee css styles in declaration of the 1st textarea input to set

"style"=>"display:none"

HTML:

Than textarea input was hidden, but validation does not work at all.

How to hide it this small textarea input with validation working?

Thanks!

 

{display: none;} makes the element non-existent. Try using the visibility property, e.g. {visibility: visible | hidden | collapse | inherit;}

gary

 

Gary is right, display: none is the problem. You need to hide it by setting the visibility to hidden, or using another trick like setting the height to zero, make it absolute positioned off the visual page, etc.

Pawon