VeeValidateを使用して、表示されているバリデーションメッセージを任意に削除したいことはないでしょうか。
今回は、バリデーションメッセージを任意に削除する方法を紹介していきます。
検証環境
検証に使用した環境／ライブラリを次に記載します。
- Vue.js
- バージョン：2.6.12
- VeeValidate
- バージョン：3.4.0
バリデーションメッセージ削除方法
バリデーションメッセージを任意に削除するには、次の方法があります。
- フォームリセットを使用して削除する。
- スクリプトから
$refsを使用してプログラムから削除する。
フォームリセットを使用して削除する
フォームリセットを使用する場合は、ValidationObserverとresetを使用することで、バリデーションメッセージを削除することができます。
プログラム例
ValidationObserverのv-slotにresetを設定します。
フォームのリセットボタンが押下されたときに、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を使用してプログラムから削除する
スクリプトを使用する場合は、ValidationObserverのresetを使用することで、バリデーションメッセージを削除することができます。ただし、スクリプトから呼び出すためには、ValidationObserverにrefを設定する必要があります。
プログラム例
ValidationObserverにrefを設定します。指定する名称は任意の値で問題ありません。例では、observerを指定しています。
フォームのリセットボタンが押下されたときに、onResetメソッドを実行します。メソッドではthis.$refs.observer.resetの処理を実施して、バリデーションメッセージを削除します。
$refsのobserverがValidationObserverのrefに指定した名称になります。
<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のバリデーションメッセージを任意に削除する方法を紹介しました。
