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

最近、素のHTMLやCSSをなるべく活用することに興味があります。
こういったベースの技術の方がフレームワークよりも息が長いので、一度学んだことを長期間役に立てることができるためです。

※もちろんフレームワークも使うときは使います。例えばNuxt.jsは大好きです。

今回は、HTML5のフォームバリデーション機能を、Nuxt.jsで構築したSPAの中で使ってみたいと思います。

課題

HTML5のフォームバリデーションは、通常はformのsubmitを実行したタイミングで実施されます。
でも、SPAではformをsubmitしません。
どうしましょう...

解決策

form.reportValidity() を使います。
これは、submitせずにバリデーションだけをかけるためのメソッドです。

※2020年7月時点のMDNによれば、IE以外の全ての主要ブラウザでサポートされているようです。安心して使えますね。
　https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity

コード例

VInputItem.vue

<template>
  <form>
    <label>
      数量
    </label>
    <input
      type="number"
      v-model="quantity"
      min="0"
      max="999"
      @chenge="onChengeInput"
    />
  </form>
</template>

<script>
export default {
  data() {
    return {
      unitprice: 0,
      quantity:  0,
    }
  },
  methods: {
    onChangeInput(event){  
      this.$el.reportValidity()
    },
  },
}
</script>

ポイント

この例では、直近のform要素を取得するために$elを使っています。
$elはVue.jsでルート要素を取得するためのプロパティです。
このサンプルコンポーネントでは、template直下のルート要素がformなので、それを一発で取得できています。

※コンポーネント内の要素の構造によっては、$refsを用いて参照する方法もあると思います。