Валидация форм в Next.js

Что такое валидация форм?

Валидация форм — это процесс проверки того, что данные, введённые пользователем, корректны и полны. Коротко: валидация подтверждает соответствие входа ожиданиям (тип, формат, диапазон, обязательность).

Короткое определение терминов:

• Клиентская валидация: проверка в браузере (HTML-поля, JavaScript).
• Серверная валидация: проверка на сервере при получении данных.
• Схема/валидатор: набор правил (регулярные выражения, структуры данных, библиотеки типа Yup).

Почему это важно?

• Надёжность данных: предотвращает ошибки при сохранении в базу и при интеграциях.
• UX: даёт пользователю понятную обратную связь и снижает фрустрацию.
• Безопасность: уменьшает вероятность некорректных или вредоносных данных.

Как проверять формы в Next.js

В Next.js доступно три уровня валидации:

1. Встроенная в HTML (атрибуты, pattern).
2. Клиентские библиотеки (Formik, react-hook-form, Yup и т. п.).
3. Серверная валидация API-роутов или на бэкенде.

Оптимальная стратегия: сочетать клиентскую валидацию для UX и серверную для безопасности и согласованности.

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

HTML предоставляет простые, но полезные механизмы: required, type, pattern и встроенную проверку типов (email, number).

Пример из статьи — форма с полями name и email:

import React from 'react'  
  
class MyForm extends React.Component {  
  render() {  
    return (  
      
  
         
         Name:  
           
         
         
         Email:  
           
         
         
       
   )  
 }  
}  
  
export default MyForm

Плюсы встроенных методов:

• Простота — не требует дополнительных пакетов.
• Быстрая базовая проверка (обязательные поля, типы).

Ограничения:

• Ограниченный контроль над отображением ошибок и их локализацией.
• Сложно поддерживать сложные правила и зависимости между полями.

Использование внешних библиотек

Для сложных форм лучше применять библиотеки: Formik, react-hook-form, Yup.

Установка (пример с Formik):

npm install formik

Пример Formik из статьи (оставлен исходный код):

import React from 'react'  
import { Formik, Form, Field } from 'formik'  
  
const MyForm = () => (  
   {  
      const errors = {}  
      if (!values.name) {  
        errors.name = 'Required'  
      }  
      if (!values.email) {  
        errors.email = 'Required'  
      } else if (  
        !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)  
      ) {  
        errors.email = 'Invalid email address'  
      }  
      return errors  
    }}  
    onSubmit={(values, { setSubmitting }) => {  
      setTimeout(() => {  
        alert(JSON.stringify(values, null, 2))  
        setSubmitting(false)  
      }, 400)  
    }}  
  >  
    {({ isSubmitting }) => (  
      
  
          
          
          
          Submit  
          
        
    )}  
    
)  
  
export default MyForm

Преимущества использования библиотек:

• Централизованная обработка ошибок и их отображение.
• Поддержка асинхронной валидации (например, проверка уникальности логина).
• Сопровождение сложных зависимостей между полями (условные поля).
• Совместимость с Yup для декларативных схем валидации.

Быстрый пример: react-hook-form + Yup

Установка:

npm install react-hook-form yup @hookform/resolvers

Пример использования:

import React from 'react'
import { useForm } from 'react-hook-form'
import { yupResolver } from '@hookform/resolvers/yup'
import * as yup from 'yup'

const schema = yup.object().shape({
  name: yup.string().required('Введите имя'),
  email: yup.string().email('Неверный email').required('Введите email'),
})

export default function MyForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: yupResolver(schema)
  })
  const onSubmit = data => console.log(data)
  return (
    

      
      {errors.name && 
{errors.name.message}
}
      
      {errors.email && 
{errors.email.message}
}
      Отправить
    
  )
}

Этот подход даёт декларативность схемы и компактность кода.

Серверная валидация и API-роуты

Никогда не полагайтесь только на клиентскую валидацию. На сервере проверяйте:

• Формат и длину полей
• Авторизацию и права доступа
• Логическую целостность (например, дата начала раньше даты окончания)

В Next.js API-роутах (pages/api или app router /api) используйте те же схемы валидации (Yup, Zod) для консистентности.

Пример: проверка в API-роуте на стороне сервера (псевдокод):

• Разберите тело запроса (JSON).
• Примените схему валидации.
• Верните 400 с подробной ошибкой при несоответствии.

Рекомендации по UX и доступности

• Показывайте ошибки рядом с полем — короткие и понятные тексты.
• Не используйте только цвет для обозначения ошибки — добавляйте иконки/текст.
• Поддерживайте клавиатурную навигацию и соответствие aria-атрибутам.
• Для длинных форм разбивайте на шаги и сохраняйте промежуточные данные.
• При асинхронной проверке (например, уникальность email) давайте индикацию загрузки.

Важно: короткие подсказки о требованиях (placeholder/label/hint) снижают число ошибок.

Когда встроенных средств недостаточно

Контрпримеры:

• Валидация сложных правил (пересечение условий между 3+ полями).
• Асинхронные проверки, зависящие от внешних API.
• Международные форматы дат/телефонов, требующие гео-контекста.

В этих случаях применяйте библиотеки и серверную проверку.

Дерево решений для выбора стратегии валидации

flowchart TD
  A[Нужна валидация формы?] -->|Простая: 1-3 поля| B[HTML-валидация + небольшая JS]
  A -->|Средней сложности| C[Formik / react-hook-form + Yup]
  A -->|Сложная или критичная| D[Клиентская библиотека + Серверная валидация]
  C --> E[Добавить асинхронные проверки]
  D --> F[Унифицировать схемы: Yup/Zod на клиенте и сервере]

Чек-листы по ролям

Разработчик:

• Выбрать библиотеку и схему валидации.
• Реализовать единые схемы для клиента/сервера.
• Покрыть валидацию тестами.

QA:

• Создать тест-кейсы для позитивных и негативных сценариев.
• Проверить локализацию сообщений об ошибке.
• Проверить доступность (screen readers, keyboard).

Дизайнер/UX:

• Предоставить тексты подсказок и ошибок.
• Определить поведение при ошибках (фокус, скролл).

Пошаговое руководство (SOP)

1. Оцените форму: поля, зависимости, бизнес-правила.
2. Определите модель данных и требования (макс/мин длина, формат).
3. Выберите стратегию: встроенная HTML, библиотека или гибрид.
4. Опишите схему валидации (Yup/Zod) и используйте её и на клиенте, и на сервере.
5. Реализуйте UI ошибок и тесты.
6. Покрывайте автотестами негативные сценарии и регрессионные тесты.

Тестовые случаи и критерии приёмки

Критерии приёмки:

• Все обязательные поля блокируют отправку при пустом значении.
• Формат email проверяется и выдаёт понятное сообщение.
• Асинхронные проверки работают и показывают индикатор загрузки.
• Сообщения об ошибке доступны для скринридеров.

Примеры тестовых случаев:

• Оставить обязательное поле пустым -> получить сообщение и фокус на поле.
• Ввести некорректный email -> получить сообщение “Неверный email”.
• Ввести корректные данные -> форма отправляется и данные поступают на сервер.
• Параллельная отправка блокируется (disabled кнопки при отправке).

Частые ошибки и способы их избежать

• Полагаться только на клиентскую проверку — всегда добавляйте серверную.
• Писать разрозненные проверки на клиенте и сервере — централизуйте схемы.
• Плохие сообщения об ошибках — формулируйте кратко и давайте подсказку, как исправить.

Совместимость и миграция

• При переходе с простых атрибутов HTML на react-hook-form/ YUP планируйте миграцию: сохраняйте старое поведение через тесты.
• Используйте одну и ту же схему (Yup/Zod), импортируемую и в клиент, и в API-роуты.

Конфиденциальность и безопасность

• Не сохраняйте чувствительные данные в логах (пароли, токены).
• При отправке ошибок клиенту не раскрывайте внутренней структуры системы.

Глоссарий

• Валидация: проверка корректности введённых данных.
• Схема: набор правил для полей (Yup/Zod).
• Клиентская/серверная валидация: проверки на стороне браузера или сервера.

Краткое резюме

• Используйте встроенные HTML-атрибуты для простых случаев.
• Для сложных форм применяйте библиотеки (react-hook-form/Formik) и декларативные схемы (Yup/Zod).
• Всегда дублируйте критическую валидацию на сервере.
• Продумывайте UX сообщений об ошибках и доступность.

Важно: комбинируйте подходы — это даёт лучшее соотношение качества данных и удобства пользователей.