Form with tinyMCE textarea with html5 required attribute cannot be submitted

Question

This is not a question, but an answer that I want to share with you. I just spent more than four hours tearing my hair out on something that turned out to be a bug in either TinyMCE or Firefox.

When loading TinyMCE, if you specify the HTML5 required attribute on textarea , the form simply will not be submitted to Firefox. No errors, nothing in Firebug, just a stubborn refusal to submit.

I don't know if this is a FF or TinyMCE bug, and anyway. I just do not want other coders to go through the aggravation that I experienced in these last hours.

Ask a question: Is this error documented anywhere? Somebody knows?

If this is an inappropriate message for, tell me and I will delete it.

Answer 1

The problem is far from the problem of Firefox. Indeed, Chrome and Opera (the “old” opera in front of the “brain” was transplanted using Chrome), and probably any other modern browser will give you the same headache.

Opera and Chrome have a flag that requires the field to be required (despite the fact that it has content). Chrome is good enough to give you this error message in the console:

 An invalid form control with name='<name of textarea>' is not focusable. 

Not surprisingly, if you think TinyMCE actually creates an editable container div , hiding your original textarea . It is this hidden textarea (with the required attribute) that the browser expects you to provide a value.

On Github, here: https://github.com/tinymce/tinymce/issues/2584 , there is a suggested solution that looks like this:

 // fix tinymce bug if($this.is('[required]')){ options.oninit = function(editor){ $this.closest('form').bind('submit, invalid', function(){ editor.save(); }); } } 

I have not tested this fragment personally, but studying it could put you in order if you can drop it in the right place.

Answer 2

I understand that this was asked 2 years ago, but I ran into the same problem, therefore, to answer your question:

I found the official bug report here: http://www.tinymce.com/develop/bugtracker_view.php?id=5671

Answer 3

My solution for this (which is related to setting up WordPress TinyMCE):

 jQuery( function ( $ ) { $( '.smyles-add-required-attr' ).attr( 'required', 'required' ); tinymce.on( 'AddEditor', function ( e ) { console.log( 'Added editor with id: ' + e.editor.id, e.editor ); var $editor = tinymce.get( e.editor.id ); $editor.on( "change", function (e){ $editor.save(); }); }); } ); 

The jQuery above adds the required flag (this can be done in many other ways) and ensures that the text area is updated after the change

To deal with the problem of a non-"focusable" element, just set the opacity and height so you can remove display: none;

This CSS assumes that you added the smyles-add-required-attr class to the editor when outputting using editor_class (for WordPress wp_editor )

 textarea[style*="display: none"].smyles-add-required-attr:invalid { height: 0px !important; opacity: 0 !important; position: absolute !important; display: flex !important; margin-top: -75px; } 

This adds a red border around the editor, suggesting that it is inside the fieldset in your form

 .my-form fieldset:invalid .wp-editor-wrap { border: 1px solid red; } 

One potential problem is that when the page loads, a red border is displayed around the fieldset , you can use fieldset:invalid:focus-within but be careful, it has limited browser support https://caniuse.com/#feat=css-focus -within