vee validateとyupのエラーメッセージを日本語にする方法

はじめに

Nuxt3環境で、vee validateとyupを使ってバリデーション実装をしたのですが、デフォルトのバリデーションメッセージが英語だったので、これを英語にしたいと思い、色々調べて設定した時の記録です。

先に結論

yupを使う場合は、バリデーションメッセージがyupで設定されるので、vee validateのバリデーションメッセージを設定する必要はないですが、
一応、vee validateのバリデーションメッセージと、yupのバリデーションメッセージのどちらも日本語にする設定を記載します。

実際のコードは以下になります。

package.json

{
  "dependencies": {
    "@types/lodash": "^4.14.197", // バリデーションメッセージをカスタムする時に使う
    "@vee-validate/i18n": "^4.11.1", // vee validateのバリデーションを使う場合だけ必要
    "vee-validate": "^4.11.1",
    "yup": "^1.2.0",
    "yup-locale-ja": "^1.0.0"
  }
}

vee-validate.client.ts

import { localize, setLocale } from "@vee-validate/i18n"; // vee validateのバリデーションを使う場合だけ必要
import ja from "@vee-validate/i18n/dist/locale/ja.json"; // vee validateのョンを使う場合だけ必要
import { configure } from "vee-validate"; // vee validateのバリデーションを使う場合
import { setLocale as yupSetLocale } from "yup"; // @vee-validate/i18nのsetLocaleと被るので、別名指定をしています。
import { suggestive } from "yup-locale-ja";

export default defineNuxtPlugin(() => {
  // vee validateのバリデーションメッセージを日本語にする設定
  configure({
    generateMessage: localize({
      ja,
    }),
  });
  setLocale("ja");

  // yupのバリデーションメッセージを日本語にする設定
  yupSetLocale(suggestive);
});

上記で、日本語に設定することができます。

yupのバリデーションメッセージの文言をカスタムする場合

yupのバリデーションメッセージは、
yup-locale-jaからimportしたsuggestiveの一部を、LocaleObject型のオブジェクトで上書きしたオブジェクトをsetLocaleの引数に設定することで、カスタムすることができます。

vee-validate.client.ts

import _ from "lodash";
import { setLocale, type LocaleObject } from "yup";
import { suggestive } from "yup-locale-ja";

export default defineNuxtPlugin(() => {
  const customLocaleObject: LocaleObject = {
    mixed: {
      required: ({ label }) => (label ? label + "を" : "") + "入力してください",
    },
  };

  const localeObject = _.merge({}, suggestive, customLocaleObject);// lodashでマージ

  setLocale(localeObject);
});

yupのバリデーションメッセージをカスタムするロジック説明

suggestiveの中身について

suggestiveの中身は、以下のコードになっております。
https://github.com/pocka/yup-locale-ja/blob/master/src/suggestive.ts

suggestiveの中身を簡単に説明しますと、suggestiveは、日本語のバリデーションメッセージのパターンが定義されています。

この、日本語のバリデーションメッセージのパターンが定義されているsuggestiveを、setLocaleに設定することで、日本語のバリデーションメッセージが設定されます。

なので、suggestiveの中の、変更したいバリデーションメッセージのみを別途オブジェクトで定義して、suggestiveと合わせたオブジェクトを作って、それをsetLocaleに設定することで、バリデーションメッセージをカスタムすることができます。

consoleで、suggestiveの中身とlocaleObjectを確認

以下のように、console.logを出して、customLocaleObjectとsuggestiveをマージしたlocaleObjectと、マージする前のsuggestiveの中身を確認してみましょう。

vee-validate.client.ts

import _ from "lodash";
import { setLocale, type LocaleObject } from "yup";
import { suggestive } from "yup-locale-ja";

export default defineNuxtPlugin(() => {
  const customLocaleObject: LocaleObject = {
    mixed: {
      required: ({ label }) => (label ? label + "を" : "") + "入力してください",
    },
  };

  const localeObject = _.merge({}, suggestive, customLocaleObject);
  console.log("suggestive", suggestive);
  console.log("localeObject", localeObject);

  setLocale(localeObject);
});

mixedプロパティの中の、requiredのプロパティの中のメッセージを変えたので、そこで差分が出ているはずです。

requiredのプロパティの中のメッセージが、ちゃんと変わってますね！

こんな感じで、setLocaleにセットするオブジェクトの引数をカスタムすれば、バリデーションメッセージがカスタムできます。

最後に

Zenn初投稿というのと、Web開発エンジニアになってまだ歴が浅いので、何かあればコメントをいただけますと幸いでございます！