VeeValidateでバリデーションのタイミングを変更する

2022.01.10

Vue.jsのライブラリのVeeValidateを使用した際、バリデーションのタイミングを調整したいということがあったので、設定方法をメモ。
今回はNuxt.jsの環境で使用しています。

設定方法

設定としては以下の4種類があります。

aggressive	ユーザーの入力中に発火。
passive	フォーム送信時に発火。
lazy	フォーカスを外した時に発火。
eager	初回入力時は発火せず、フォーカスを外した時と2回目以降の入力時に発火。

グローバルに設定したい場合、setInteractionMode関数を使用します。
Nuxt.jsの場合、/plugins/vee-validate.jsで下記を追加します。

import { setInteractionMode } from 'vee-validate';
setInteractionMode('eager');

個別に設定したい場合、ValidationProviderのmodeプロパティに設定します。

<ValidationProvider mode="eager" rules="required" v-slot="{ errors }">
  <!-- Some input -->
</ValidationProvider>

参考サイト

土