TinyMCE - An invalid form control with name='content' is not focusable

Question

I use TinyMCE 4 and this is my code for it:

<script type="text/javascript" src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script>
       tinymce.init({
         selector: 'textarea[name=content]',
         plugins: 'image code',
         toolbar: 'undo redo | link image | code',
         image_title: true, 
         automatic_uploads: true,
         file_picker_types: 'image', 
         file_picker_callback: function(cb, value, meta) {
           var input = document.createElement('input');
           input.setAttribute('type', 'file');
           input.setAttribute('accept', 'image/*');
           input.onchange = function() {
             var file = this.files[0];
             var reader = new FileReader();
             reader.onload = function () {
             var id = 'blobid' + (new Date()).getTime();
             var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
             var base64 = reader.result.split(',')[1];
             var blobInfo = blobCache.create(id, file, base64);
             blobCache.add(blobInfo);
             cb(blobInfo.blobUri(), { title: file.name });
           };
           reader.readAsDataURL(file);
         };
         input.click();
       }
     });  
</script>

and I have one problem. When I click on the "submit" button, the form isn' t send but in web browser console I have error: "An invalid form control with name='content' is not focusable."

Please can you help me, how can I solve this problem simply? For all advice thanks in advance.

= $review['content'] ?> in the same file, as is tinymce editor. — michal s, Feb 17 '18 at 20:21

score 15 · Answer 1 · answered Feb 23 '18 at 22:44

15

The issue comes from tinymce hiding the textarea. Remove the required attribute and it should be fixed!

answered Feb 23 '18 at 22:44

Ivo

159
2

Can you add more details, why removing **required** will solve the problem? – Shiko Feb 23 '18 at 22:52
Of course, check the best answer here: https://stackoverflow.com/questions/22148080/an-invalid-form-control-with-name-is-not-focusable – Ivo Feb 24 '18 at 07:33
2

Removing "required" attribute is not a solution. We add "required" when this field is required and not because of whim. The solution for TinyMCE is here: https://stackoverflow.com/questions/60834085/how-to-make-textarea-filed-mandatory-when-ive-applied-tinymce/66032994#66032994 – Patryk Godowski Feb 04 '21 at 08:56
Thanks mate this was really helpful for me my code works well. – Hassan Khan Mar 31 '23 at 21:25

score 0 · Answer 2 · answered Mar 29 '22 at 22:27

I've been around this issue for a couple of hours and posting via Ajax the TinyMCE data from the textarea field always arrived null at the controller.

Solved by changing just one bit of the ajax request from dataType: "json", to dataType: "jsonp",. Note that by adding the p in dataType was the solution.

Hope it helps anybody experiencing the same issue.

TinyMCE - An invalid form control with name='content' is not focusable

2 Answers2