Валидация форм

Chakra UI предоставляет мощный набор компонентов для построения форм, включая FormControl, FormLabel, Input, FormErrorMessage и FormHelperText. Эти компоненты позволяют легко интегрировать валидацию и обеспечивать единообразный пользовательский интерфейс.

Компоненты формы

  • FormControl — контейнер для управления состоянием поля: валидно, невалидно, обязательно для заполнения.
  • FormLabel — метка поля, которая связывается с конкретным Input через свойство htmlFor.
  • Input / Textarea / Select — поля ввода с поддержкой стандартных HTML-свойств и Chakra UI стилей.
  • FormErrorMessage — вывод ошибки валидации.
  • FormHelperText — дополнительная подсказка для пользователя.

Пример базовой структуры формы с валидацией:

import { FormControl, FormLabel, Input, FormErrorMessage, Button } from "@chakra-ui/react";
import { useState } from "react";

function ExampleForm() {
  const [value, setValue] = useState("");
  const [isError, setIsError] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    setIsError(value === "");
  };

  return (
    <form onSub mit={handleSubmit}>
      <FormControl isInvalid={isError}>
        <FormLabel htmlFor="name">Имя</FormLabel>
        <Input
          id="name"
          value={value}
          onCha nge={(e) => setValue(e.target.value)}
        />
        {isError && <FormErrorMessage>Имя обязательно</FormErrorMessage>}
      </FormControl>
      <Button mt={4} type="submit">
        Отправить
      </Button>
    </form>
  );
}

Свойство isInvalid

Ключевой механизм валидации в Chakra UI — свойство isInvalid у FormControl. Оно принимает булевое значение, которое определяет, отображается ли ошибка.

  • isInvalid={true} — поле подсвечивается красным, показывается FormErrorMessage.
  • isInvalid={false} — поле считается валидным, ошибки не отображаются.

Можно комбинировать с проверкой на длину, формат email или кастомные правила:

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
setIsError(!emailRegex.test(value));

Интеграция с React Hook Form

Для более сложных форм лучше использовать библиотеку react-hook-form. Chakra UI легко интегрируется с ней, позволяя управлять состоянием и ошибками централизованно.

Пример с react-hook-form:

import { useForm } from "react-hook-form";
import { FormControl, FormLabel, Input, FormErrorMessage, Button } from "@chakra-ui/react";

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

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

  return (
    <form onSub mit={handleSubmit(onSubmit)}>
      <FormControl isInvalid={errors.name}>
        <FormLabel htmlFor="name">Имя</FormLabel>
        <Input
          id="name"
          {...register("name", { required: "Имя обязательно" })}
        />
        <FormErrorMessage>
          {errors.name && errors.name.message}
        </FormErrorMessage>
      </FormControl>

      <Button mt={4} type="submit">
        Отправить
      </Button>
    </form>
  );
}
  • register связывает поле с контроллером формы.
  • errors содержит все ошибки валидации.
  • FormControl автоматически отображает ошибку через isInvalid.

Валидация по событиям

В Chakra UI можно реализовать проверку как на onChange, так и на onBlur:

  • onChange — мгновенная проверка при каждом вводе символа.
  • onBlur — проверка после того, как пользователь покидает поле, что снижает количество визуальных ошибок во время ввода.

Пример:

<Input
  id="email"
  value={email}
  onCha nge={(e) => setEmail(e.target.value)}
  onB lur={() => setIsError(!emailRegex.test(email))}
/>

Комбинирование правил

Можно комбинировать несколько условий, используя логические операторы:

const isError = value.length < 3 || !emailRegex.test(value);
<FormControl isInvalid={isError}>

Такой подход позволяет создавать комплексные проверки без использования сторонних библиотек, хотя интеграция с react-hook-form или formik упрощает управление большим количеством полей.

Настройка внешнего вида ошибок

Chakra UI позволяет кастомизировать стиль ошибок:

<FormErrorMessage color="red.500" fontSize="sm">
  Поле обязательно
</FormErrorMessage>

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

Валидация с динамическими формами

Если количество полей зависит от состояния, Chakra UI корректно управляет FormControl для каждого элемента:

fields.map((field, index) => (
  <FormControl key={index} isInvalid={errors[field.name]}>
    <FormLabel htmlFor={field.name}>{field.label}</FormLabel>
    <Input id={field.name} {...register(field.name, field.rules)} />
    <FormErrorMessage>
      {errors[field.name]?.message}
    </FormErrorMessage>
  </FormControl>
))

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

Валидация форм в Chakra UI строится на сочетании FormControl и свойств полей, что позволяет создавать как простые, так и сложные формы с удобной интеграцией внешних библиотек, централизованным управлением ошибками и гибкой кастомизацией внешнего вида.

Оглавление