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

Валидационная библиотека Yup предоставляет декларативный способ описания правил проверки данных. Одним из базовых и наиболее часто используемых механизмов является установка обязательности поля через метод required().

Этот метод задаёт правило, при котором значение поля не может быть undefined, null или пустым (в зависимости от типа данных и дополнительных настроек). Его использование формирует фундамент строгой валидации форм и входных данных.

Базовая концепция required()

Метод required() применяется к любому типу схемы: строкам, числам, массивам, объектам и другим типам, поддерживаемым Yup.

Основная идея:

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

Простейший пример:

import * as Yup from 'yup';

const schema = Yup.object({
  name: Yup.string().required('Имя обязательно для заполнения')
});

В этом случае поле name обязано содержать строку. Если оно отсутствует или равно пустому значению (в зависимости от контекста формы), валидация завершится ошибкой.

Поведение required() для разных типов данных

Строки

Для строк required() проверяет наличие непустого значения:

Yup.string().required()

Особенность заключается в том, что пустая строка "" по умолчанию считается допустимой, если не используется дополнительная настройка:

Yup.string().trim().required('Поле не может быть пустым')

Метод trim() часто используется совместно с required() для исключения строк, состоящих из пробелов.

Числа

Для числовых значений:

Yup.number().required()

Здесь required() проверяет, что значение не undefined и не null. Значение 0 считается валидным, так как является корректным числом.

Частая ошибка — попытка трактовать 0 как “пустое значение”, однако Yup рассматривает его как допустимое.

Булевы значения

Yup.boolean().required()

Булево поле считается обязательным, но важно понимать: false является валидным значением и не воспринимается как отсутствие данных.

Массивы

Yup.array().required()

Проверяется наличие самого массива. Однако пустой массив [] считается допустимым значением, так как он существует.

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

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

Объекты

Yup.object().required()

Проверяется наличие объекта как значения. При этом пустой объект {} остаётся валидным, если не добавлены дополнительные ограничения:

Yup.object()
  .shape({
    email: Yup.string().required()
  })
  .required()

Кастомизация сообщений об ошибках

Метод required() принимает строку с сообщением об ошибке:

Yup.string().required('Это поле обязательно')

Также возможно использование функций для динамических сообщений:

Yup.string().required(({ path }) => `Поле ${path} обязательно`)

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

Взаимодействие required() с другими методами

trim()

Yup.string().trim().required()

Удаляет пробелы по краям строки перед проверкой. Это предотвращает ситуацию, когда поле визуально заполнено, но фактически содержит только пробелы.

nullable()

Yup.string().nullable().required()

Метод nullable() позволяет значению быть null, но при добавлении required() это поведение переопределяется. В зависимости от порядка вызовов и версии Yup, результат может различаться, поэтому логика должна быть строго определена.

default()

Yup.string().default('guest').required()

Если значение отсутствует, применяется значение по умолчанию. После применения default() поле фактически перестаёт быть “пустым”, но required() всё равно участвует в общей схеме проверки.

Типичные ошибки при использовании required()

Ошибка интерпретации пустых значений

  • 0 для чисел не считается пустым
  • false для булевых значений не считается пустым
  • [] для массивов не считается пустым
  • {} для объектов не считается пустым

Двойное требование пустоты строки

Yup.string().required().min(1)

Использование required() и min(1) для строк часто дублирует логику. Однако в некоторых сценариях min(1) обеспечивает более строгую проверку длины, тогда как required() отвечает за наличие значения.

Отсутствие trim при текстовых полях

Yup.string().required()

Такой вариант допускает строку " ", которая формально не является undefined. Более строгая версия:

Yup.string().trim().required()

Поведение в формах и пользовательских данных

В контексте форм, особенно при работе с библиотеками управления состоянием (например, Formik или React Hook Form), required() играет роль первичного фильтра.

Он определяет:

  • заполнено ли поле;
  • передано ли значение в модель данных;
  • допустимо ли отправлять форму.

Композиция схем с required()

Пример комплексной схемы:

const userSchema = Yup.object({
  username: Yup.string()
    .trim()
    .min(3)
    .max(20)
    .required('Укажите имя пользователя'),

  age: Yup.number()
    .min(18)
    .required('Возраст обязателен'),

  tags: Yup.array()
    .of(Yup.string())
    .min(1)
    .required('Добавьте хотя бы один тег')
});

Здесь required() выступает как базовый уровень проверки, на который накладываются дополнительные ограничения.

Логическая роль required()

Метод required() не отвечает за формат данных, диапазоны или сложные правила. Его задача ограничена:

  • проверка наличия значения;
  • предотвращение отправки пустых данных;
  • формирование базового уровня валидности схемы.

В сложных схемах он работает как фундамент, на который накладываются остальные правила валидации.

Оглавление