具有 html5 必需属性的 tinyMCE 文本区域的表单无法提交答案

【问题标题】：Form with tinyMCE textarea having html5 required attribute cannot submit具有 html5 必需属性的 tinyMCE 文本区域的表单无法提交
【发布时间】：2013-05-08 21:26:49
【问题描述】：

这不是一个问题，而是一个我想与你分享的答案。我刚刚花了 4 个多小时的时间来解决一些问题，结果证明这是 TinyMCE 或 Firefox 中的一个错误。

加载 TinyMCE 后，如果您在 textarea 上指定 HTML5 required 属性，表单将不会在 Firefox 中提交。没有错误，Firebug 中什么也没有，只是顽固地拒绝提交。

我不知道这是 FF 还是 TinyMCE 错误，我并不在意。我只是不希望其他编码人员经历我过去几个小时所经历的恶化。

提出问题：此错误是否记录在任何地方？有人知道吗？

如果这是不适合 Stack Overflow 的帖子，请告诉我，我会删除它。

【问题讨论】：

哦，这是老款待，但在 2021 年仍然存在问题。此线程中有解决方案：stackoverflow.com/questions/60834085/…

标签： html tinymce required

【解决方案1】：

问题远非 Firefox 问题。事实上，Chrome 和 Opera（“大脑”被移植到 Chrome 之前的“旧”歌剧）以及其他所有现代浏览器可能都会让您感到头疼。

对于 Opera 和 Chrome，都有一个标志坚持该字段是必填字段（尽管您在其中有内容）。 Chrome 可以很好地在控制台中向您显示此错误消息：

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

考虑到 TinyMCE 实际上创建了一个可编辑的div 容器，隐藏了您原来的textarea，这并不奇怪。浏览器希望您为其提供值的正是这个隐藏的textarea（带有required 属性）。

在 Github，这里：https://github.com/tinymce/tinymce/issues/2584，有一个建议的解决方案是这样的：

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

我没有亲自测试过这个 sn-p，但是只要你能把它放到正确的地方，研究它可能会让你继续前进。

【讨论】：

【解决方案2】：

我知道这是 2 年前提出的，但我遇到了同样的问题，所以回答你的问题：

我在这里找到了官方的错误报告：http://www.tinymce.com/develop/bugtracker_view.php?id=5671

【讨论】：

【解决方案3】：

我的解决方案（与 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();
        });

    });


} );

上面的 jQuery 添加了 required 标志（也可以通过许多其他方式完成），并确保文本区域在更改后更新

要处理元素不可“聚焦”的问题，只需设置不透明度和高度，以便删除display: none;

此 CSS 假设您在使用 editor_class 输出时已将类 smyles-add-required-attr 添加到编辑器（对于 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;
}

这会在编辑器周围添加一个红色边框，假设它在您的表单中的 fieldset 内

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

一个潜在的问题是在页面加载时红色边框显示在fieldset 周围，您可以使用fieldset:invalid:focus-within，但要注意它对浏览器的支持有限https://caniuse.com/#feat=css-focus-within

【讨论】：