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

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>

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2022年5月
1234567
891011121314
15161718192021
22232425262728
293031