最近、素のHTMLやCSSをなるべく活用することに興味があります。 こういったベースの技術の方がフレームワークよりも息が長いので、一度学んだことを長期間役に立てることができるためです。 ※もちろんフレームワークも使うときは使います。例えばNuxt.jsは大好きです。 今回は、HTML5のフォームバリデーション機能を、Nuxt.jsで構築したSPAの中で使ってみたいと思います。 課題 HTML5のフォームバリデーションは、通常はformのsubmitを実行したタイミングで実施されます。 でも、SPAではformをsubmitしません。 どうしましょう... 解決策 form.reportValidity() を使います。 これは、submitせずにバリデーションだけをかけるためのメソッドです。 ※2020年7月時点のMDNによれば、IE以外の全ての主要ブラウザでサポートされているようです。安
![HTML5のフォームバリデーションをSPAの中で使う方法 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/4427927c631cd1c7e92baa775c7c4100961246d5/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9SFRNTDUlRTMlODElQUUlRTMlODMlOTUlRTMlODIlQTklRTMlODMlQkMlRTMlODMlQTAlRTMlODMlOTAlRTMlODMlQUElRTMlODMlODclRTMlODMlQkMlRTMlODIlQjclRTMlODMlQTclRTMlODMlQjMlRTMlODIlOTJTUEElRTMlODElQUUlRTQlQjglQUQlRTMlODElQTclRTQlQkQlQkYlRTMlODElODYlRTYlOTYlQjklRTYlQjMlOTUmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTc3YjIyY2JjOWI5MTZjYjk5NzA4NDc2MDBiNjQyNDg2%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzaG96enkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTI3MmU5ZWU1NGY1ZDljMGZmOWI4NDAzMmU0ZjliMzQ2%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dbeb3457fddbe55b37bd00637c5956a27)