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.

Answer 2

I realize this was asked 2 years ago, but I'm running into the same problem, so 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 WordPress TinyMCE setup):

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 (it can be done numerous other ways as well), and makes sure the text area is updated after being changed

To deal with issue of element not "focusable" just set opacity and height so you can remove display: none;

This CSS assumes you have added the class smyles-add-required-attr to editor when output using the 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 editor, assuming it's inside of fieldset in your form

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

One potential issue is that on page load the red border shows around fieldset, you can use fieldset:invalid:focus-within but beware it has limited browser support https://caniuse.com/#feat=css-focus-within