スマホでHTML5のバリデーション時に該当箇所にスクロールしない問題への対処方法

HTML5のフォームバリデーション、便利ですよね。

だけど、スマホだとエラー箇所にスクロールしてくれないんですよ。

色々探し回ってみたけど、jQueryでのバリデーションばっかりだったんですが、ピュアなJavaScriptでも結構簡単に解決できたのでここに残しておきます。

document.addEventListener("DOMContentLoaded", () => {
    const form = document.querySelector("form");
    form.addEventListener("submit", (event) => {
        const elements = form.elements;
        for (const element of elements) {
            if (!element.validity.valid) {
                element.scrollIntoView();
                element.reportValidity();
                return false;
            }
        }
    
        form.submit();
    });
});

HTML5のバリデーションはJavaScriptからは呼べないと勝手に思いこんでたんですが、ちゃんとできるんですね。

便利だなぁ。