Механізм валідації React useFormState: Глибоке занурення у валідацію багатоетапних форм

У світі сучасної веб-розробки створення інтуїтивно зрозумілих та надійних користувацьких досвідів має першочергове значення. Ніде це не є настільки критичним, як у формах — головному шлюзі для взаємодії з користувачем. Хоча прості контактні форми є доволі прямолінійними, складність різко зростає з багатоетапними формами — уявіть собі майстри реєстрації користувачів, процеси оформлення замовлення в електронній комерції або деталізовані панелі налаштувань. Ці багатокрокові процеси створюють значні виклики в управлінні станом, валідації та підтримці безшовного користувацького потоку. Історично розробники жонглювали складними станами на стороні клієнта, контекст-провайдерами та сторонніми бібліотеками, щоб приборкати цю складність.

Зустрічайте хук `useFormState` від React. Представлений як частина еволюції React у напрямку компонентів, інтегрованих із сервером, цей потужний хук пропонує оптимізоване, елегантне рішення для управління станом форми та валідації, особливо в контексті багатоетапних форм. Інтегруючись безпосередньо з серверними діями (Server Actions), `useFormState` створює надійний механізм валідації, який спрощує код, підвищує продуктивність і підтримує прогресивне поліпшення. Ця стаття надає вичерпний посібник для розробників усього світу про те, як архітектурно спроєктувати складний механізм багатоетапної валідації за допомогою `useFormState`, перетворюючи складне завдання на керований та масштабований процес.

Неминучі виклики багатоетапних форм

Перш ніж зануритися у рішення, важливо зрозуміти поширені проблеми, з якими стикаються розробники при роботі з багатоетапними формами. Ці виклики не є тривіальними і можуть впливати на все, від часу розробки до кінцевого користувацького досвіду.

• Складність управління станом: Як зберегти дані, коли користувач переміщується між кроками? Чи повинен стан зберігатися в батьківському компоненті, глобальному контексті або локальному сховищі? Кожен підхід має свої компроміси, що часто призводить до прокидання пропсів (prop-drilling) або складної логіки синхронізації стану.
• Фрагментація логіки валідації: Де має відбуватися валідація? Валідація всього в кінці забезпечує поганий користувацький досвід. Валідація на кожному кроці краща, але це часто вимагає написання фрагментованої логіки валідації як на клієнті (для миттєвого зворотного зв'язку), так і на сервері (для безпеки та цілісності даних).
• Перешкоди для користувацького досвіду: Користувач очікує, що зможе переходити вперед і назад між кроками без втрати даних. Він також очікує чітких, контекстуальних повідомлень про помилки та негайного зворотного зв'язку. Реалізація такого плавного досвіду може вимагати значної кількості шаблонного коду.
• Синхронізація стану між сервером і клієнтом: Кінцевим джерелом істини зазвичай є сервер. Підтримання ідеальної синхронізації стану на стороні клієнта з правилами валідації та бізнес-логікою на стороні сервера є постійною боротьбою, що часто призводить до дублювання коду та потенційних невідповідностей.

Ці виклики підкреслюють потребу в більш інтегрованому, цілісному підході — такому, що долає розрив між клієнтом і сервером. Саме тут `useFormState` проявляє себе найкраще.

Зустрічайте `useFormState`: Сучасний підхід до обробки форм

Хук `useFormState` призначений для управління станом форми, який оновлюється на основі результату дії форми. Це наріжний камінь бачення React щодо прогресивно поліпшених застосунків, які безшовно працюють як з увімкненим JavaScript на клієнті, так і без нього.

Що таке `useFormState`?

За своєю суттю, `useFormState` — це хук React, який приймає два аргументи: функцію серверної дії та початковий стан. Він повертає масив, що містить два значення: поточний стан форми та нову функцію дії, яку потрібно передати вашому елементу `

`.

const [state, formAction] = useFormState(myServerAction, initialState);

Щоразу, коли форма надсилається, React викликає `myServerAction` з попереднім станом та даними форми. Те, що повертає `myServerAction`, стає новим `state`. Цей простий, але потужний патерн дозволяє серверу диктувати стан форми, включаючи помилки валідації, повідомлення про успіх або будь-яку іншу відповідну інформацію.

Сила інтеграції з серверними діями (Server Actions)

Серверні дії (Server Actions) — це функції, які можна визначити на сервері, але викликати з клієнта, розмиваючи межі між клієнтським та серверним кодом безпечним та ефективним способом. У поєднанні з `useFormState` вони створюють замкнений цикл:

1. Користувач заповнює форму та надсилає її.
2. Викликається `formAction`, надана `useFormState`, яка, своєю чергою, викликає серверну дію.
3. Серверна дія отримує дані форми, виконує валідацію та бізнес-логіку.
4. Серверна дія повертає новий об'єкт стану (наприклад, `{ errors: { email: 'Неправильний формат email' } }`).
5. Хук `useFormState` оновлює свій `state` повернутим об'єктом, викликаючи повторний рендеринг.
6. Інтерфейс оновлюється для відображення помилок валідації або повідомлення про успіх безпосередньо з відповіді сервера.

Цей підхід централізує логіку валідації на сервері, забезпечуючи цілісність даних та зменшуючи складність коду на стороні клієнта. Він також чудово працює з прогресивним поліпшенням; якщо JavaScript не завантажиться, надсилання форми все одно працюватиме як стандартний POST-запит HTML-форми.

Створення механізму багатоетапної валідації: Практичний посібник

Створімо практичний приклад, щоб продемонструвати потужність `useFormState` як механізму багатоетапної валідації. Наша мета — створити триетапну форму реєстрації користувача, яка буде надійною, зручною для користувача та легкою в обслуговуванні.

Сценарій: Триетапна форма реєстрації користувача

• Крок 1: Особиста інформація - Збирає ім'я та адресу електронної пошти користувача.
• Крок 2: Деталі компанії - Збирає назву компанії та посаду користувача.
• Крок 3: Фінальне підтвердження - Показує всю зібрану інформацію для перевірки перед фінальним надсиланням.

Налаштування проєкту та початковий стан

Спочатку визначимо початковий стан для нашої форми та структуру для нашої серверної дії. Ми будемо керувати всім станом форми в одному об'єкті, включаючи інформацію про те, який крок наразі активний.

У файлі, наприклад, `actions.js` (позначеному `'use server'`):

// actions.js
'use server';

import { z } from 'zod'; // Популярна бібліотека для валідації

const schema = z.object({
name: z.string().min(2, 'Ім\'я повинно містити щонайменше 2 символи.'),
email: z.string().email('Неправильна адреса електронної пошти.'),
companyName: z.string().min(3, 'Назва компанії є обов\'язковою.'),
role: z.string().min(2, 'Посада є обов\'язковою.'),
});

export async function onbordingAction(prevState, formData) {
const step = Number(formData.get('_step'));
const name = formData.get('name');
const email = formData.get('email');
const companyName = formData.get('companyName');
const role = formData.get('role');

const currentState = {
name, email, companyName, role,
};

// Логіка для кожного кроку буде тут...
return {
...prevState,
...currentState,
message: 'Стандартне повідомлення стану'
};
}

А наш головний компонент буде керувати поточним кроком:

// OnboardingForm.jsx
'use client';

import { useFormState } from 'react-dom';
import { onbordingAction } from './actions';

const initialState = {
message: null,
errors: {},
step: 1,
};

export default function OnboardingForm() {
const [state, formAction] = useFormState(onbordingAction, initialState);

return (

{state.step === 1 && }
{state.step === 2 && }
{state.step === 3 && }

);
}

Крок 1: Збір та валідація особистої інформації

На цьому етапі ми хочемо перевірити лише поля `name` та `email`. Ми використаємо приховане поле `_step`, щоб повідомити нашій серверній дії, яку логіку валідації слід запустити.

// Компонент Step1.jsx
export function Step1({ state }) {
return (

);
}

Тепер оновимо нашу серверну дію для обробки валідації на Кроці 1.

// actions.js (оновлено)
// ... (імпорти та визначення схеми)

export async function onbordingAction(prevState, formData) {
// ... (отримання даних форми)
const step = Number(formData.get('_step'));

if (step === 1) {
const validatedFields = schema.pick({ name: true, email: true }).safeParse({ name, email });

if (!validatedFields.success) {
return {
...currentState,
step: 1,
errors: validatedFields.error.flatten().fieldErrors,
};
}

// Успіх, переходимо до наступного кроку
return {
...currentState,
step: 2,
errors: {},
};
}
// ... (логіка для інших кроків)
}

Коли користувач натискає «Далі», форма надсилається. Серверна дія перевіряє, що це Крок 1, валідує лише поля `name` та `email` за допомогою методу `pick` бібліотеки Zod і повертає новий стан. Якщо валідація не проходить, вона повертає помилки і залишається на Кроці 1. Якщо вона успішна, вона очищує помилки та оновлює `step` до 2, що змушує наш головний компонент `OnboardingForm` рендерити компонент `Step2`.

Крок 2: Прогресивна валідація даних компанії

Краса цього підходу полягає в тому, що стан з Кроку 1 автоматично переноситься. Нам просто потрібно відрендерити його в прихованих полях, щоб він був включений у наступне надсилання форми.

// Компонент Step2.jsx
export function Step2({ state }) {
return (

);
}

І оновлюємо серверну дію для обробки Кроку 2.

// actions.js (оновлено)
// ...
if (step === 2) {
const validatedFields = schema.pick({ companyName: true, role: true }).safeParse({ companyName, role });

if (!validatedFields.success) {
return {
...currentState,
step: 2,
errors: validatedFields.error.flatten().fieldErrors,
};
}

// Успіх, переходимо до фінального огляду
return {
...currentState,
step: 3,
errors: {},
};
}
// ...

Логіка ідентична до Кроку 1, але вона націлена на поля для Кроку 2. Хук `useFormState` безшовно керує переходом, зберігаючи всі дані та забезпечуючи чистий, прогресивний потік валідації.

Крок 3: Фінальний огляд та надсилання

На останньому кроці ми показуємо всі зібрані дані для перевірки користувачем. Фінальне надсилання запустить комплексну валідацію всіх полів, перш ніж ми збережемо дані в базу даних.

// Компонент Step3.jsx
export function Step3({ state }) {
return (

);
}

Логіка фінальної серверної дії виконує повну валідацію та завершальну бізнес-логіку.

// actions.js (фінальна версія)
// ...
if (step === 3) {
// Фінальна, повна валідація
const validatedFields = schema.safeParse({ name, email, companyName, role });

if (!validatedFields.success) {
// Не повинно статися, якщо покрокова валідація правильна, але це хороший запобіжник
return {
...currentState,
step: 1, // Повертаємо користувача на перший крок з помилками
errors: validatedFields.error.flatten().fieldErrors,
message: 'Помилка: Знайдено недійсні дані. Будь ласка, перевірте.'
};
}

try {
// console.log('Надсилаємо в базу даних:', validatedFields.data);
// await saveToDatabase(validatedFields.data);
return { message: 'Успіх! Ваша реєстрація завершена.', step: 4 }; // Фінальний крок успіху
} catch (dbError) {
return { ...currentState, step: 3, message: 'Помилка: Не вдалося зберегти дані.' };
}
}
// ...

Таким чином, ми маємо завершену, надійну, багатоетапну форму з прогресивною, авторитетною на сервері валідацією, все це чисто організовано за допомогою хука `useFormState`.

Просунуті стратегії для користувацького досвіду світового класу

Створити функціональну форму — це одне; зробити її приємною у використанні — зовсім інше. Ось кілька просунутих технік для покращення ваших багатоетапних форм.

Керування навігацією: Рух вперед і назад

Наша поточна логіка дозволяє рухатися лише вперед. Щоб дозволити користувачам повертатися назад, ми не можемо використовувати просту кнопку `type="submit"`. Замість цього ми б керували кроком у стані клієнтського компонента і використовували б дію форми лише для руху вперед. Однак, простіший підхід, що дотримується серверно-орієнтованої моделі, — це мати кнопку «Назад», яка також надсилає форму, але з іншим наміром.

// У компоненті кроку...
Назад
Далі

// У серверній дії...
const intent = formData.get('intent');
if (intent === 'back') {
return { ...currentState, step: step - 1, errors: {} };
}

Надання миттєвого зворотного зв'язку за допомогою `useFormStatus`

Хук `useFormStatus` надає стан очікування надсилання форми в межах того самого елемента `

`. Це ідеально підходить для деактивації кнопок і показу індикаторів завантаження, що є критично важливим для хорошого UX, особливо при повільному інтернет-з'єднанні.

// SubmitButton.jsx
'use client';

import { useFormStatus } from 'react-dom';

export function SubmitButton({ text }) {
const { pending } = useFormStatus();

return (

{pending ? 'Надсилання...' : text}

);
}

Потім ви можете використовувати `` у компонентах ваших кроків замість стандартного ``.

Структурування серверної дії для масштабованості

Коли ваша форма розростається, ланцюжок `if/else if` у серверній дії може стати громіздким. Для кращої організації рекомендується використовувати оператор `switch` або більш модульний патерн.

// actions.js з оператором switch
switch (step) {
case 1:
// Обробка валідації Кроку 1
break;
case 2:
// Обробка валідації Кроку 2
break;
// ... і т.д.
}

Доступність (a11y) не підлягає обговоренню

Для глобальної аудиторії доступність є обов'язковою. Переконайтеся, що ваші форми є доступними, шляхом:

• Використання `aria-invalid="true"` на полях введення з помилками.
• Зв'язування повідомлень про помилки з полями введення за допомогою `aria-describedby`.
• Належного керування фокусом після надсилання, особливо коли з'являються помилки.
• Забезпечення можливості навігації по всіх елементах керування форми за допомогою клавіатури.

Глобальна перспектива: Інтернаціоналізація та `useFormState`

Однією з вагомих переваг серверної валідації є легкість інтернаціоналізації (i18n). Повідомлення про валідацію більше не потрібно жорстко кодувати на клієнті. Серверна дія може визначати бажану мову користувача (з заголовків, таких як `Accept-Language`, параметра URL або налаштувань профілю користувача) і повертати помилки його рідною мовою.

Наприклад, використовуючи бібліотеку на кшталт `i18next` на сервері:

// Серверна дія з i18n
import { i18n } from 'your-i18n-config';
// ...
const t = await i18n.getFixedT(userLocale); // наприклад, 'es' для іспанської

const schema = z.object({
email: z.string().email(t('errors.invalid_email')),
});

Такий підхід гарантує, що користувачі по всьому світу отримують чіткий та зрозумілий зворотний зв'язок, що значно покращує інклюзивність та зручність використання вашого застосунку.

`useFormState` проти клієнтських бібліотек: Порівняльний огляд

Як цей патерн порівнюється з відомими бібліотеками, такими як Formik або React Hook Form? Справа не в тому, що краще, а в тому, що підходить для конкретного завдання.

• Клієнтські бібліотеки (Formik, React Hook Form): Вони чудово підходять для складних, високоінтерактивних форм, де миттєвий зворотний зв'язок на стороні клієнта є головним пріоритетом. Вони надають комплексні інструменти для управління станом форми, валідації та надсилання повністю в межах браузера. Їхньою головною проблемою може бути дублювання логіки валідації між клієнтом і сервером.
• `useFormState` з серверними діями: Цей підхід найкраще проявляє себе там, де сервер є кінцевим джерелом істини. Він спрощує загальну архітектуру, централізуючи логіку, гарантує цілісність даних і безшовно працює з прогресивним поліпшенням. Компромісом є мережевий запит для валідації, хоча з сучасною інфраструктурою це часто незначно.

Для багатоетапних форм, що включають значну бізнес-логіку або дані, які необхідно валідувати за базою даних (наприклад, перевірка, чи зайняте ім'я користувача), патерн `useFormState` пропонує більш пряму та менш схильну до помилок архітектуру.

Висновок: Майбутнє форм у React

Хук `useFormState` — це більше, ніж просто новий API; він уособлює філософський зсув у тому, як ми створюємо форми в React. Приймаючи серверно-орієнтовану модель, ми можемо створювати багатоетапні форми, які є більш надійними, безпечними, доступними та легшими в обслуговуванні. Цей патерн усуває цілі категорії помилок, пов'язаних із синхронізацією стану, і надає чітку, масштабовану структуру для обробки складних користувацьких потоків.

Створюючи механізм валідації за допомогою `useFormState`, ви не просто керуєте станом; ви проєктуєте стійкий, зручний для користувача процес збору даних, що ґрунтується на принципах сучасної веб-розробки. Для розробників, які створюють застосунки для різноманітної, глобальної аудиторії, цей потужний хук забезпечує основу для створення справді першокласних користувацьких досвідів.