VeeValidateのValidation Observerを使ってみる

VeeValidateのValidation Provideを使ったバリデーションは以前Vue.jsの記事やNuxt.jsの記事を投稿しましたが、今回はフォーム全体のバリデーションができるValidation ObserverをNuxt.jsの環境で使ってみます。

サンプルコード

まずValidation Observer使用前の状況ですが、以前投稿したNuxt.jsの記事にformタグと送信ボタンを追加して、送信時の処理(consoleの表示)をいれています。

<template>
  <form v-on:submit.prevent="submit">
    <ValidationProvider name="mail" rules="required|email" v-slot="{ errors }">
      <input type="email" v-model="mail">
      <span>{{ errors[0] }}</span>
    </ValidationProvider>
    <button type="submit">送信</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      mail: ''
    }
  },
  methods: {
    submit() {
      console.log(this.mail);
    }
  }
}
</script>

ここにValidation Observerを設定してみます。
/plugins/vee-validate.jsにValidationObserverの定義を追加します。

import Vue from 'vue'
import { ValidationProvider, ValidationObserver, extend, localize } from 'vee-validate'
import { required, email } from 'vee-validate/dist/rules';
import ja from 'vee-validate/dist/locale/ja.json';

localize('ja', ja);

extend('required', required);
extend('email', email);

Vue.component('ValidationProvider', ValidationProvider);
Vue.component('ValidationObserver', ValidationObserver);

例として、フォーム内の入力値が全て有効になるまで送信ボタンをdisabledになるように設定してみます。

<template>
  <validationObserver tag="form" v-slot="{ invalid }" v-on:submit.prevent="submit">
    <ValidationProvider name="mail" rules="required|email" v-slot="{ errors }">
      <input type="email" v-model="mail">
      <span>{{ errors[0] }}</span>
    </ValidationProvider>
    <button type="submit" :disabled="invalid">送信</button>
  </validationObserver>
</template>

<script>
export default {
  data() {
    return {
      mail: ''
    }
  },
  methods: {
    submit() {
      console.log(this.mail);
    }
  }
}
</script>

formをvalidationObserverに置き換えましたが、validationObserverはデフォルトだとspanタグになるため、tagプロパティでformタグを指定しています。