Стандартные сообщения об ошибках

При интеграции схем валидации с формами через Yup и резолвер @hookform/resolvers/yup формируется единый формат ошибок, который затем интерпретируется React Hook Form. Основу составляет объект ошибки, возвращаемый механизмом валидации схемы.

Базовый формат ошибки Yup

Внутренняя ошибка валидации в Yup представлена классом ValidationError. После обработки через YupResolver она приводится к структуре, понятной менеджеру формы.

Ключевые поля:

  • name — тип ошибки, обычно "ValidationError"
  • message — текст сообщения
  • path — путь до поля, в котором произошла ошибка
  • type — тип правила валидации
  • inner — массив вложенных ошибок (при abortEarly: false)

Пример базовой структуры:

{
  name: "ValidationError",
  message: "Некорректное значение",
  path: "email",
  type: "email",
  inner: []
}

Множественные ошибки и поле inner

При отключённом abortEarly, Yup продолжает проверку всех правил и собирает полный список нарушений.

inner: [
  {
    path: "password",
    message: "Слишком короткий пароль",
    type: "min"
  },
  {
    path: "password",
    message: "Пароль должен содержать цифру",
    type: "matches"
  }
]

Особенность обработки:

  • каждая ошибка соответствует отдельному правилу схемы
  • несколько ошибок могут относиться к одному path
  • резолвер агрегирует их в структуру formState.errors

Преобразование Yup ошибки в формат React Hook Form

React Hook Form ожидает объект вида:

{
  fieldName: {
    type: string,
    message: string
  }
}

YupResolver выполняет трансформацию:

  1. извлекает ValidationError
  2. проходит по inner или использует одиночную ошибку
  3. группирует ошибки по path
  4. формирует объект ошибок формы

Стандартные сообщения Yup

Yup имеет встроенные дефолтные сообщения, которые появляются при отсутствии кастомизации.

Строковые правила

  • required → “this field is required”
  • min → “this field must be at least X characters”
  • max → “this field must be at most X characters”
  • email → “this field must be a valid email”

Числовые правила

  • min → “this field must be greater than or equal to X”
  • max → “this field must be less than or equal to X”
  • integer → “this field must be an integer”

Булевы и логические

  • oneOf → “this field must be one of the following values”
  • notOneOf → “this field must not be one of the following values”

Поведение YupResolver с дефолтными сообщениями

При использовании @hookform/resolvers/yup сообщения проходят без модификации, если не задано переопределение через схему.

const schema = yup.object({
  email: yup.string().email().required()
});

При отсутствии кастомных сообщений:

email: "this field is a valid email"

Кастомизация стандартных сообщений

Yup позволяет переопределять сообщения на уровне каждого правила.

const schema = yup.object({
  email: yup
    .string()
    .email("Некорректный формат email")
    .required("Email обязателен")
});

Результат ошибки:

{
  path: "email",
  message: "Некорректный формат email",
  type: "email"
}

Глобальная локализация сообщений

Yup поддерживает замену стандартных сообщений через setLocale.

import * as yup from "yup";

yup.setLocale({
  mixed: {
    required: "Поле обязательно"
  },
  string: {
    min: "Минимальная длина ${min} символов",
    email: "Неверный email формат"
  }
});

После применения:

  • все схемы используют единый язык сообщений
  • резолвер получает уже локализованные тексты

Поведение path и его влияние на ошибки

Поле path определяет точку привязки ошибки в форме.

Примеры:

Yup path React Hook Form поле
email email
user.name user.name
items[0].title items.0.title

YupResolver нормализует индексированные пути для корректной интеграции.

Ошибки с вложенными объектами

При работе с вложенными структурами формируется иерархия path.

const schema = yup.object({
  user: yup.object({
    profile: yup.object({
      age: yup.number().min(18)
    })
  })
});

Ошибка:

{
  path: "user.profile.age",
  message: "this field must be greater than or equal to 18",
  type: "min"
}

Поведение abortEarly и стандартные сообщения

Параметр abortEarly влияет на структуру ошибок:

abortEarly: true

  • возвращается первая ошибка
  • inner пустой

abortEarly: false

  • возвращаются все ошибки
  • активируется массив inner
  • сообщения группируются по полям
yupResolver(schema, { abortEarly: false });

Конфликты стандартных сообщений и кастомных правил

При комбинации нескольких валидаторов порядок влияет на итоговое сообщение:

yup.string()
  .required("Обязательно")
  .min(5, "Слишком короткое")
  .max(10, "Слишком длинное")

Если значение пустое:

  • срабатывает required
  • остальные правила игнорируются

Это связано с приоритетом Yup: базовые проверки выполняются раньше ограничений длины.

Ошибки преобразования типов

Yup автоматически приводит типы, но при несоответствии генерирует стандартные сообщения:

  • "this field must be anumbertype, but the final value was: NaN"

В резолвере такие ошибки не изменяются и передаются как есть.

Влияние transform на сообщения

Функция transform может изменить входные данные до валидации:

yup.string().transform(value => value.trim())

Особенности:

  • ошибка может возникнуть уже на трансформированном значении
  • path сохраняется исходный
  • сообщение относится к результату после трансформации

Ошибки кастомных тестов (test)

При использовании пользовательских проверок:

yup.string().test(
  "check-uppercase",
  "Должно содержать заглавную букву",
  value => /[A-Z]/.test(value)
);

Стандартное сообщение заменяется вторым аргументом test.

Формирование итогового сообщения в YupResolver

Алгоритм формирования сообщения:

  1. получение ValidationError
  2. проверка наличия inner
  3. выбор первого релевантного сообщения или агрегация
  4. сопоставление с path
  5. передача в структуру ошибок формы

Результат всегда сохраняет исходный текст ошибки, без дополнительной интерпретации.

Поведение при отсутствующем message

Если сообщение не задано:

  • Yup подставляет дефолтное
  • либо генерирует технический текст
  • YupResolver не выполняет постобработку текста

Пример:

yup.string().email()

→ стандартное сообщение библиотеки

Особенности передачи ошибок в UI слой

React Hook Form ожидает стабильный формат:

errors.email.message
errors.email.type

YupResolver гарантирует:

  • сохранение текста сообщения
  • привязку к конкретному полю
  • отсутствие вложенных ValidationError в финальном объекте

Ошибки массива (array) и стандартные сообщения

Для массивов используются отдельные правила:

  • min
  • max
  • required

Пример:

yup.array().min(1, "Добавьте хотя бы один элемент")

Ошибка:

{
  path: "items",
  message: "Добавьте хотя бы один элемент",
  type: "min"
}

Обработка неизвестных типов ошибок

Если Yup возвращает нестандартную ошибку:

  • она сохраняется без модификации
  • YupResolver не нормализует сообщение
  • поле type может отсутствовать

Итоговая модель стандартных сообщений в YupResolver

Финальная структура, передаваемая в форму:

{
  fieldName: {
    type: "required" | "min" | "custom",
    message: "локализованное или дефолтное сообщение",
    ref: undefined
  }
}

Эта модель остаётся стабильной независимо от сложности схемы, вложенности объектов и количества правил валидации.

Оглавление