thumbnail

なにこれ

Vuetify + VeeValidateで入力チェックする際に、VueI18nを使ってエラーメッセージを多言語対応・共通化する場合に、カスタムバリデーションのエラーメッセージをロケールごとに設定する方法について紹介します。

実装方法

以前の記事「Vuetify + VeeValidate + VueI18nでエラーメッセージ共通化」 をベースにして、VeeValidateの定義方法を以下のようにします。 例ではMACアドレスのチェックを定義しています。

import Vue from 'vue';
import VeeValidate from 'vee-validate';
import ja from 'vee-validate/dist/locale/ja';
import en from 'vee-validate/dist/locale/en';
import { i18n } from './i18n';

// マックアドレスチェック
const MAC_ADDRESS = /^([0-9A-Fa-f]{2}[:-]){5}[0-9A-Fa-f]{2}$/;
VeeValidate.Validator.extend('macaddress', {
  validate: value => MAC_ADDRESS.text(value),
});

ja.messages.macaddress = field => `${field}の形式が正しくありません。`;
en.messages.macaddress = field => `format of ${field} is not collect.`;

Vue.use(VeeValidate, {
  i18n,
  i18nRootKey: 'validations',
  dictionary: {
    ja,
    en,
  },
});

重要なのはこの部分です。

import ja from 'vee-validate/dist/locale/ja';
import en from 'vee-validate/dist/locale/en';

ja.messages.macaddress = field => `${field}の形式が正しくありません。`;
en.messages.macaddress = field => `format of ${field} is not collect.`;

VeeValidateのカスタムバリデーションのメッセージは通常getMessageで定義します。

VeeValidate.Validator.extend('macaddress', {
  getMessage: field => `${field}の形式が正しくありません。`,
  validate: value => MAC_ADDRESS.text(value),
});

ただVuetifyとi18nと合わせて使う場合は、getMessageではなく、dictionaryに登録するロケールごとのメッセージ集に追加してあげることでメッセージが有効になります。
以上です🍅