Ошибки валидации форм

В библиотеке Ant Design для управления формами используется компонент Form, который предоставляет встроенные механизмы валидации. Ошибки валидации возникают, когда данные, введённые пользователем, не соответствуют заданным правилам (rules). Для их корректного отображения и управления важно понимать структуру ошибок и способы их обработки.

import { Form, Input, Button } from 'antd';

<Form
  name="basic"
  onFin ish={onFinish}
  onFinishFai led={onFinishFailed}
>
  <Form.Item
    label="Email"
    name="email"
    rules={[{ required: true, message: 'Введите email!' }, { type: 'email', message: 'Некорректный email!' }]}
  >
    <Input />
  </Form.Item>

  <Form.Item>
    <Button type="primary" htmlType="submit">
      Отправить
    </Button>
  </Form.Item>
</Form>

В примере выше при нарушении правил валидации автоматически отображается соответствующее сообщение. Важные моменты:

  • onFinishFailed — функция, вызываемая при неудачной попытке отправки формы.
  • Каждое правило в rules генерирует своё сообщение об ошибке.

Получение ошибок программно

Для более сложной логики необходимо получать ошибки напрямую. Form предоставляет метод getFieldsError, который возвращает массив объектов с информацией об ошибках каждого поля:

const errors = form.getFieldsError();
errors.forEach(({ name, errors }) => {
  if (errors.length > 0) {
    console.log(`${name[0]}: ${errors[0]}`);
  }
});

Ключевые моменты:

  • name — массив, содержащий имя поля.
  • errors — массив сообщений, связанных с конкретным полем.
  • Можно использовать для кастомного отображения ошибок вне стандартного UI.

Настройка отображения ошибок

Ant Design позволяет управлять положением и стилем сообщений об ошибках через свойства validateStatus и help:

<Form.Item
  label="Пароль"
  validateStatus={hasError ? "error" : "success"}
  help={hasError ? "Пароль слишком короткий" : ""}
>
  <Input.Password />
</Form.Item>
  • validateStatus может принимать значения: "success", "warning", "error", "validating".
  • help используется для отображения текстового сообщения об ошибке или подсказки.

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

Асинхронная валидация

Ant Design поддерживает асинхронные проверки через функцию validator внутри правил:

<Form.Item
  name="username"
  label="Имя пользователя"
  rules={[
    { required: true, message: 'Введите имя пользователя!' },
    {
      validator: async (_, value) => {
        const exists = await checkUsernameExists(value);
        if (exists) return Promise.reject(new Error('Имя занято'));
      }
    }
  ]}
>
  <Input />
</Form.Item>

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

  • Функция должна возвращать Promise.
  • Promise.reject с объектом Error вызывает отображение ошибки.
  • Можно комбинировать синхронные и асинхронные правила.

Управление ошибками глобально

Для динамических форм или сложной логики может потребоваться полностью программное управление ошибками. Для этого используют метод setFields:

form.setFields([
  {
    name: 'email',
    errors: ['Неверный формат email']
  }
]);

Особенности использования:

  • Позволяет задавать массив ошибок для одного или нескольких полей.
  • Сбрасывание ошибок происходит через errors: [].
  • Совместимо с динамически создаваемыми полями.

Отображение ошибок в пользовательском интерфейсе

Часто требуется выводить ошибки вне стандартного компонента Form.Item. Для этого можно использовать Form.ErrorList:

<Form.ErrorList errors={form.getFieldError('email')} />
  • Позволяет выводить массив ошибок с кастомным стилем.
  • Можно комбинировать с внешними компонентами для уведомлений или всплывающих сообщений.

Практические рекомендации

  • Всегда задавать уникальные name для полей, чтобы ошибки правильно ассоциировались с конкретным input.
  • Разделять синхронную и асинхронную валидацию для упрощения отладки.
  • Использовать onFinishFailed для логирования ошибок на уровне всей формы.
  • Кастомизация сообщений через help и validateStatus позволяет создавать UX с понятной обратной связью для пользователя.
  • Сброс ошибок при изменении поля предотвращает устаревшие сообщения и улучшает UX.

Ошибки валидации в Ant Design предоставляют мощные инструменты для гибкого управления формами, позволяя как автоматическую проверку, так и полное программное управление с кастомным отображением.

Оглавление