【解決】TinyMCEでPOSTしようとすると「An invalid form control with name='text' is not focusable.」と言われ何も反応しない

今日はフロントエンドネタです。

起きたこと

自作ブログサイト用のダッシュボードで投稿画面のエディタにTinyMCEを採用したのですが、
実際に導入して日本語化までしたはよいものの、
フォームに組み込んでいざSubmitしようとすると何も反応しない、ということが起きました。

「なんでだぁー！！」と思いながら投稿ボタンを連打してると、
Chromeのコンソール画面にどんどんエラーが出力されていくのに気づきました。
その内容をみると。

An invalid form control with name='text' is not focusable.

はて、なんのことでしょうか。

原因

色々調べたところ、display: none;のような画面上ではフォーカスすることができないフォーム部品に対して、
HTML5のvalidation処理をしようとするとこのエラーが起きるようです。

HTML上では当該textareaはdisplay属性は指定せずに普通に表示しているのですが、
tinymce.init処理が走ると対象のtextareaはdisplay属性がnoneに変更されてしまいます。
それに対してvalidationされてしまっていたようです。

解決策

回避策としては、当該フォーム部品に対するvalidation処理を無効化してしまえばよいようです。
なのでjQueryで以下の処理を入れました。

$(function() {
    // remove form validation
    $('form').find('textarea').removeAttr('required max min maxlength pattern');

});

これを入れることによって画面側でのバリデーションが行われなくなりますが
今回はサーバ側でもバリデーションを行っているので、未入力チェックなどは問題無さそうです。

これにて解決。