Валидация на клиенте

Валидация на клиенте играет ключевую роль в создании надежных и удобных форм. В библиотеке MUI (Material-UI) она реализуется через комбинацию компонентов для ввода данных и управления состоянием формы, таких как TextField, Checkbox, RadioGroup, Select, а также библиотек для управления формами, например, Formik или React Hook Form.

Использование TextField для базовой валидации

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

import TextField from '@mui/material/TextField';
import { useState } from 'react';

function Example() {
  const [value, setValue] = useState('');
  const [error, setError] = useState(false);

  const handleChange = (event) => {
    const val = event.target.value;
    setValue(val);
    setError(val.length < 3); // Простая проверка: минимум 3 символа
  };

  return (
    
  );
}

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

  • Атрибут error принимает булевое значение, которое визуально выделяет поле.
  • helperText предоставляет пользователю подсказку или сообщение об ошибке.
  • Проверка может выполняться как при каждом изменении (onChange), так и при отправке формы (onSubmit).

Валидация с React Hook Form

Для более сложных форм MUI отлично интегрируется с React Hook Form. Этот подход позволяет управлять состоянием формы централизованно и минимизировать повторение кода.

import { useForm, Controller } from 'react-hook-form';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';

function Form() {
  const { handleSubmit, control, formState: { errors } } = useForm();

  const onSub mit = data => console.log(data);

  return (
    

       
          
        }
      />
      
    
  );
}

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

  • Controller связывает MUI-компоненты с React Hook Form.
  • Поле rules задает правила валидации: обязательность, регулярные выражения и пользовательские функции.
  • formState.errors хранит информацию о всех ошибках формы.

Кастомная валидация

MUI позволяет создавать свои правила валидации через callback-функции:

const validatePassword = (value) => {
  if (!value) return "Пароль обязателен";
  if (value.length < 6) return "Пароль должен содержать минимум 6 символов";
  if (!/[A-Z]/.test(value)) return "Пароль должен содержать хотя бы одну заглавную букву";
  return true;
};

Использование с TextField через React Hook Form:

 
    
  }
/>

Особенности кастомной валидации:

  • Можно проверять сложные условия, включая совпадение с другими полями.
  • Возвращаемое значение должно быть либо true (успешно), либо строка с текстом ошибки.
  • Поддерживается асинхронная проверка, например, через API для проверки уникальности логина.

Валидация с использованием Formik

Formik — еще один популярный способ управления формами с MUI:

import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';

const validationSchema = Yup.object({
  username: Yup.string()
    .min(3, 'Минимум 3 символа')
    .required('Обязательное поле'),
  email: Yup.string()
    .email('Неверный формат email')
    .required('Обязательное поле')
});

function FormikForm() {
  return (
     console.log(values)}
    >
      {({ errors, touched, handleChange, values }) => (
        

          
          
          
        
      )}
    

  );
}

Преимущества Formik:

  • Интеграция с библиотекой Yup для декларативного задания схем валидации.
  • Автоматическое управление состоянием ошибок и “тouched” полей.
  • Поддержка комплексных форм с зависимыми полями и асинхронными проверками.

Работа с Checkbox, Select и RadioGroup

Валидация не ограничивается текстовыми полями. Компоненты Checkbox, Select и RadioGroup также поддерживают проверку через React Hook Form или Formik.


    
      }
        label="Согласен с условиями"
      />
      {fieldState.error?.message}
    
  }
/>

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

  • FormControl объединяет поле и сообщение об ошибке.
  • Для Select и RadioGroup используется аналогичная структура с FormHelperText.

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

Иногда требуется проверка через сервер, например, уникальность email:

const checkEmailAvailability = async (email) => {
  const response = await fetch(`/api/check-email?email=${email}`);
  const data = await response.json();
  return data.available ? true : 'Email уже занят';
};


    
  }
/>

Особенности асинхронной валидации:

  • Возвращает Promise, который должен разрешаться либо true, либо строкой с ошибкой.
  • Можно комбинировать с синхронными правилами через массив функций.

Стратегии улучшения UX

  • Валидацию лучше запускать после первого взаимодействия с полем (onBlur) или при отправке формы, чтобы не раздражать пользователя постоянными подсказками.
  • Подсказки об ошибках должны быть короткими и точными.
  • Использование цвета и иконок для выделения ошибок повышает восприятие визуальной обратной связи.
Оглавление