Form with tinyMCE textarea having html5 required attribute cannot submit

Question

This is not a question, but an answer which I want to share with you. I've just spent over four hours tearing my hair out on something which turns out to be a bug in either TinyMCE or Firefox.

With TinyMCE loaded, if you specify the HTML5 required attribute on a textarea the form will just not submit in Firefox. No errors, nothing in Firebug, just a stubborn refusal to submit.

I don't know if this is a FF or a TinyMCE bug and don't really care. I just don't want other coders to go through the aggravation I've gone through these last hours.

To ask a question: Is this bug documented anywhere? Does anyone know?

If this is an inappropriate post for Stack Overflow, tell me and I'll delete it.

Answer 1

The problem is far from being a Firefox issue. Indeed Chrome and Opera ("old" opera before the "brain" was transplanted with Chrome's) and probably every other modern browser would give you the same headache.

With both Opera and Chrome, there's a flag insisting the field is a required one, (despite the fact that you have content in it). Chrome is nice enough to give you this error message in the console:

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

Not too surprising when you consider that TinyMCE actually creates an editable div container, hiding your original textarea. It is this hidden textarea (bearing a required attribute) that the browser is expecting you to provide a value for.

Over at Github, here: https://github.com/tinymce/tinymce/issues/2584, there is a suggested solution which goes like this:

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

I haven't tested this snippet personally, but studying it might be able to get you going, as long as you're able to drop it into the right place.