Простая и мощная валидация форм для SolidJS с Zod

Привет, Хабр!

Хочу рассказать вам про свою библиотеку solidjs-hook-form,которую я сделал для упрощения работы с множеством форм в SolidJS.

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

Почему именно своя? Потому что готовых решений, заточенных под реактивность SolidJS, нормальных не было. Хотелось чего-то легкого, быстрого и без лишней магии, что использует встроенные инструменты солида для максимальной эффективности, ведь это и есть его отличительная черта. solidjs-hook-form — вот такой золотой серединки проект получился.

Чем она хороша?

Ну, во-первых, быстрая. Прямо как швейцарские часы. Использует solid-js/store под капотом, так что никаких лишних перерисовок. Только то, что действительно нужно.

Во-вторых, простая в использовании. Всё крутится вокруг одного хука useForm. Кинул туда схему валидации — и вуаля, у тебя есть всё, чтобы управлять формой.

А схемы валидации делаем с помощью Zod. Это вообще бомба. Пишешь правила — и всё. Очень удобно, особенно когда нужно проверить, например, чтобы пароли совпадали. Zod рулит.

Как это выглядит?

Смотрите. Допустим, нам нужна форма регистрации. Вот такая вот красота:

// Сначала описываем схему с помощью Zod
import { z } from 'zod';

const registerSchema = z.object({
  email: z.string().email({ message: "Некорректный email адрес" }),
  password: z.string().min(8, { message: "Пароль должен содержать минимум 8 символов" }),
  confirmPassword: z.string()
}).superRefine(({ password, confirmPassword }, ctx) => {
  // Проверка на совпадение паролей
  if (password !== confirmPassword) {
    ctx.addIssue({
      code: "custom",
      message: "Пароли не совпадают",
      path: ["confirmPassword"]
    });
  }
});

// Потом используем в компоненте
import { useForm } from 'solidjs-hook-form';

export default function RegisterForm() {
  const { form, formErrors, handleChange, validate } = useForm(registerSchema);

  const handleSubmit = (e) => {
    e.preventDefault();
    // Валидируем форму
    if (validate()) {
      // Если всё ок — отправляем данные
      console.log("Данные формы:", form);
      // ...логика отправки на сервер
    } else {
      console.log("Форма содержит ошибки.");
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label for="email">Email</label>
        <input 
        type="email" 
        {/*name обязательно такой же, как в zod схеме*/}
        name="email" 
        id="email"
        value={form.email} 
        onInput={handleChange}
        >
        {/* Показываем ошибку, если есть */}
        {formErrors.email && <p style={{ color: 'red' }}>{formErrors.email}</p>}
      </div>

      <div>
        <label for="password">Пароль</label>
        <input
          id="password"
          name="password"
          type="password"
          value={form.password}
          onInput={handleChange}
        />
        {formErrors.password && <p style={{ color: 'red' }}>{formErrors.password}</p>}
      </div>

      <div>
        <label for="confirmPassword">Подтвердите пароль</label>
        <input
          id="confirmPassword"
          name="confirmPassword"
          type="password"
          value={form.confirmPassword}
          onInput={handleChange}
        />
        {formErrors.confirmPassword && <p style={{ color: 'red' }}>{formErrors.confirmPassword}</p>}
      </div>

      <button type="submit">Зарегистрироваться</button>
    </form>
  );
}

Видите, как всё просто? useForm возвращает объект с нужными штуками:

• form — это реактивное хранилище для данных формы.

• formErrors — для ошибок.

• handleChange — обработчик, который всё обновляет сам.

• validate() — запускает проверку и возвращает true или false.

Почему не просто Zod?

Ну, Zod — это круто, но он не управляет состоянием формы в DOM. solidjs-hook-form как раз берёт эту рутину на себя. Пишешь схему, используешь хук — и всё работает. Никаких createStore, createSignal или ручных обновлений.

Как установить?

Устанавливается, как обычный npm пакет:

npm i solidjs-hook-form

В пакете сразу идут и типы, так что с Typescript все работает хорошо. Тип формы выводится из zod схемы, самому не надо ничего прописывать, что также упрощает разработку и сокращает код

Где посмотреть ещё примеры?

На странице библиотеки в npm есть больше примеров использования.

В общем

solidjs-hook-form — это не просто клон React Hook Form. Это решение, которое учитывает особенности SolidJS. Помогает сосредоточиться на логике, а не на борьбе с формами. Если работаете с SolidJS — обязательно гляньте. Может, именно это то, что вам нужно!

Ссылки

• GitHub

• NPM

• Zod