VueCraft NPM

Переведённые ошибки валидации: i18n Kit + Form Schema ​

Встроенные валидаторы Form Schema (required, minLength, email и другие) по умолчанию возвращают сообщения на английском. У большинства из них есть необязательный параметр msg для переопределения текста — этого достаточно, чтобы подключить i18n Kit и получать сообщение на текущей локали пользователя, не переписывая валидацию с нуля.

Файлы локалей ​

locales/ru.json:

json
{
  "validation": {
    "required": "Обязательное поле",
    "minLength": "Минимум {n} символов",
    "email": "Введите корректный email"
  }
}

locales/en.json:

json
{
  "validation": {
    "required": "This field is required",
    "minLength": "At least {n} characters",
    "email": "Enter a valid email"
  }
}

Схема ​

ts
import { useT } from 'vue-i18n-kit'
import { required, minLength, email } from '@macrulez/vue-form-schema'
import type { FieldDefinition } from '@macrulez/vue-form-schema'

const { t } = useT()

const schema: FieldDefinition[] = [
  {
    type: 'text',
    name: 'name',
    label: 'Name',
    validators: [required(t('validation.required'))],
  },
  {
    type: 'text',
    name: 'bio',
    label: 'Bio',
    validators: [minLength(10, t('validation.minLength', { n: 10 }))],
  },
  {
    type: 'email',
    name: 'email',
    label: 'Email',
    validators: [email(t('validation.email'))],
  },
]

Важная деталь: сообщения фиксируются в момент создания схемы ​

t(...) здесь вызывается один раз, при построении массива schema — если locale переключится уже после того, как форма отрисована, текст уже показанных ошибок не обновится сам, пока валидатор не сработает заново. Для формы, которая должна мгновенно перерисовывать уже видимые ошибки при смене языка, оборачивайте schema в computed() и пересобирайте её при изменении активной локали — useLocale() из i18n Kit отдаёт её реактивно.

Что дальше ​

  • Для сообщений с ICU-плюрализацией ("1 файл" / "2 файла" / "5 файлов") — tm() вместо t(), тот же принцип. См. i18n Kit — обзор.
  • Для кастомных (не встроенных) валидаторов — та же идея работает и там: ValidatorFn просто возвращает t('validation.myRule') вместо статической строки.