HTML5のフォームバリデーションをSPAの中で使う方法 - Qiita

最近、素のHTMLやCSSをなるべく活用することに興味があります。 こういったベースの技術の方がフレームワークよりも息が長いので、一度学んだことを長期間役に立てることができるためです。 ※もちろんフレームワークも使うときは使います。例えばNuxt.jsは大好きです。 今回は、HTML5のフォームバリデーション機能を、Nuxt.jsで構築したSPAの中で使ってみたいと思います。 課題 HTML5のフォームバリデーションは、通常はformのsubmitを実行したタイミングで実施されます。 でも、SPAではformをsubmitしません。 どうしましょう... 解決策 form.reportValidity() を使います。 これは、submitせずにバリデーションだけをかけるためのメソッドです。 ※2020年7月時点のMDNによれば、IE以外の全ての主要ブラウザでサポートされているようです。安