【VeeValidate】バリデーションメッセージを削除する方法の紹介

スポンサーリンク

VeeValidateを使用して、表示されているバリデーションメッセージを任意に削除したいことはないでしょうか。

今回は、バリデーションメッセージを任意に削除する方法を紹介していきます。

スポンサーリンク

検証環境

検証に使用した環境/ライブラリを次に記載します。

  • Vue.js
    • バージョン:2.6.12
  • VeeValidate
    • バージョン:3.4.0

バリデーションメッセージ削除方法

バリデーションメッセージを任意に削除するには、次の方法があります。

  1. フォームリセットを使用して削除する。
  2. スクリプトから$refsを使用してプログラムから削除する。

フォームリセットを使用して削除する

フォームリセットを使用する場合は、ValidationObserverresetを使用することで、バリデーションメッセージを削除することができます。

プログラム例

ValidationObserverv-slotresetを設定します。

フォームのリセットボタンが押下されたときに、resetの処理を実施してバリデーションメッセージを削除します。

<template>
  <div id="app">
    <validation-observer v-slot="{ reset }">
      <form @reset.prevent="reset">
        <validation-provider name="name" rules="required" v-slot="{ errors }">
          <input type="text" v-model="name" placeholder="name" />
          <span>{{ errors[0] }}</span>
        </validation-provider>
        <div>
          <button type="reset">リセット</button>
        </div>
      </form>
    </validation-observer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
    };
  },
};
</script>

参考公式サイト:https://logaretm.github.io/vee-validate/guide/forms.html#resetting-forms

スクリプトから$refsを使用してプログラムから削除する

スクリプトを使用する場合は、ValidationObserverresetを使用することで、バリデーションメッセージを削除することができます。ただし、スクリプトから呼び出すためには、ValidationObserverrefを設定する必要があります。

プログラム例

ValidationObserverrefを設定します。指定する名称は任意の値で問題ありません。例では、observerを指定しています。

フォームのリセットボタンが押下されたときに、onResetメソッドを実行します。メソッドではthis.$refs.observer.resetの処理を実施して、バリデーションメッセージを削除します。

$refsobserverValidationObserverrefに指定した名称になります。

<template>
  <div id="app">
    <validation-observer ref="observer">
      <form @reset.prevent="onReset()">
        <validation-provider name="name" rules="required" v-slot="{ errors }">
          <input type="text" v-model="name" placeholder="name" />
          <span>{{ errors[0] }}</span>
        </validation-provider>
        <div>
          <button type="reset">リセット</button>
        </div>
      </form>
    </validation-observer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
    };
  },
  methods: {
    onReset() {
      this.$refs.observer.reset();
    },
  },
};
</script>

参考公式サイト:https://logaretm.github.io/vee-validate/guide/forms.html#programmatic-access-with-refs

まとめ

VeeValidateのバリデーションメッセージを任意に削除する方法を紹介しました。