An invalid form control with name='hoge' is not focusable.ってエラーが出た時の解決する方法的なお話

formを作ってて、submitしたいときにたまにこういうエラーが出て止まってしまったりする。
これってどういうことかっていうと、name="hoge"のformパーツを見にいこうとしたけど、その要素を探すことができないよっていうエラーみたいなもの。

ってことでこれの解決的なお話をば。

なんでこういうことが起こるかというと、その要素自体もしくはその要素の上の要素がdisplay:none;とかになってると起きるらしい。
ちなみに起きるには条件が必要で、その要素を見にいく必要があるからとのこと。
つまりどういうことかというとバリデーションとかそういうものをかけてるからとのこと。
ちなみにtype="text"であるならばそもそもバリデーションはかからないんだけど、HTML5から使えるtypeのいくつかは自動でバリデーションがかかるようになっている。
例えばurlとか。

なのでurlをtextに変更する、もしくはrequiredを外すために、novalidateをつけるという感じであればこれは封じることができる。

buttonをクリックして色々と処理をするよりも、submitとしてformがsubmitされる段階で色々とやりたいとかを考えるとこういうことがでてきてしまうので要注意的な。