The Diary of Aska

Chromeでrequired付きinputがhiddenだと落ちる

http://stackoverflow.com/questions/7168645/invalid-form-control-only-in-google-chrome

<form>
    <div style="display:none">
        <input type="text" required="required">
    </div>
    <button>send</button>
</form>

こういった状態のフォームを送信しようとするとエラーで処理が止まります。

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

無視してくれればいいものを...ぐぬぬ。

特定の条件によってフォームの要素を切り替えている場合に起きます。

表示、非表示に合わせてrequired属性を取ったり外したりしないのが切ないです。

すごい雑な対応だとこういう感じです、submitに何かeventが付いててsubmitがキャンセルされた後に表示・非表示が切り替わってもrequired属性が復活しないのでクソコード乙です。

$('button').click(function(){
    $('input[required="required"]').each(function(){
        var ele = $(this);
        if (ele.is(':hidden')) {
            ele.removeAttr('required');
        }
    });
});

そのうちChromeが賢くなってエラーにならなくなる気がしますがイラッときたので日記に書きました。