Формы и валидация

MDX, как расширение JSX, позволяет не только описывать статический контент, но и интегрировать интерактивные элементы, включая формы. Формы в MDX создаются аналогично стандартным HTML-формам, но с полной поддержкой компонентов React. Это открывает возможности для динамической валидации, управления состоянием и кастомизации элементов.


  
   setName(e.target.value)} />

Здесь handleSubmit — это функция, обрабатывающая событие отправки формы, а value и onChange обеспечивают двустороннюю привязку данных с состоянием React.

Управление состоянием форм

MDX позволяет использовать React-хуки для управления состоянием формы:

import { useState } from 'react';

const [name, setName] = useState('');
const [email, setEmail] = useState('');

const handleSubmit = (e) => {
  e.preventDefault();
  console.log({ name, email });
};

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

Валидация полей

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

const validateEmail = (email) => {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
};

const handleSubmit = (e) => {
  e.preventDefault();
  if (!validateEmail(email)) {
    alert('Некорректный email');
    return;
  }
  console.log({ name, email });
};

Важно: регулярные выражения помогают быстро проверять синтаксис, но сложные правила лучше обрабатывать на сервере или с использованием библиотек типа Yup или Zod.

Интеграция библиотек для форм

MDX поддерживает подключение внешних библиотек для управления формами и их валидации, что позволяет создавать более масштабируемые решения:

import { useForm } from 'react-hook-form';

const { register, handleSubmit, formState: { errors } } = useForm();


 console.log(data))}>
  
  {errors.name && {errors.name.message}}

  
  {errors.email && {errors.email.message}}

Ключевые моменты библиотеки react-hook-form:

  • Минимизация повторного рендеринга компонентов
  • Простая интеграция с кастомными компонентами
  • Автоматическая работа с ошибками валидации

Динамические формы

MDX позволяет создавать формы с динамически изменяющимися полями:

const [fields, setFields] = useState([{ name: '', email: '' }]);

const addField = () => setFields([...fields, { name: '', email: '' }]);

fields.map((field, index) => (
  

     updateField(index, 'name', e.target.value)} />
     updateField(index, 'email', e.target.value)} />
  

));

const updateField = (index, key, value) => {
  const newFields = [...fields];
  newFields[index][key] = value;
  setFields(newFields);
};

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

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

Иногда необходимо проверять данные на сервере до отправки формы. В MDX это реализуется через асинхронные функции:

const checkUsername = async (username) => {
  const response = await fetch(`/api/check-username?username=${username}`);
  const data = await response.json();
  return data.available;
};

const handleSubmit = async (e) => {
  e.preventDefault();
  const available = await checkUsername(name);
  if (!available) {
    alert('Имя пользователя уже занято');
    return;
  }
  console.log({ name, email });
};

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

Кастомные элементы и стилизация

MDX полностью поддерживает использование React-компонентов для кастомных элементов форм:

const CustomInput = ({ label, value, onChange }) => (
  

    
    
  

);

 setName(e.target.value)} />

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

  • Единый стиль для всех полей
  • Возможность внедрять сложную логику валидации внутри компонента
  • Улучшение читаемости и повторного использования кода

Обработка ошибок и UX

Правильная обработка ошибок в MDX-формах включает:

  • Немедленный показ ошибок при вводе
  • Подсказки и сообщения рядом с полями
  • Блокировку кнопки отправки до исправления ошибок

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

Оглавление