とある入力フォームを作った時の話ですが、送信ボタンを押しても一向に送信されず、原因をあれこれ探っていくと、Chromeのエラーコンソールに何やら出力されていました。
An invalid form control with name='foobar' is not focusable.
そして、この問題になったフォームオブジェクトは<div style='display:none'>の中、つまりユーザーからは知覚も操作も不能な場所に置かれていて、そしてHTML5のバリデーション属性がかかっていました。
対策法
もちろん最初からこんなフォームを作ることはないとは思いますが、JavaScriptで制御しているとこのように「見えないコントロールがinvalidとなる」ということは発生してしまいます。対策法を検討してみる過程で、いろいろなものがありました。
novalidate、formnovalidate
まず、novalidateという属性があるのですが、これは<form>全体にしかかけることができません。そして、formnovalidateというのもありましたが、これは送信ボタンにかけて、formのバリデーション制御を上書きするためのものでした。
disabled
フォームをdisabledとしてしまえば、バリデーションを行うこともなくなります。状況によってはそれもありですが、外部システムとの整合性もあるので、簡単には採用できるものではないかもしれません。
バリデーション属性を削除する
ちょうど今回の事例では、一度非表示とした入力フォームを再利用することがなかったので、バリデーション系の属性を引きぬいて対応することにしました。jQueryを使えば比較的簡単にできます。
$('form').find('input textarea select').removeAttr('required max min maxlength pattern');
なお、jQueryのremoveAttr()では、スペース区切りで属性を与えると、一気に削除できます。