Como Validar Formulários em React com Zod e React Hook Form

A validação de formulários é um aspecto crucial no desenvolvimento de aplicações web, especialmente quando lidamos com entradas dos usuários. Neste artigo, vamos explorar como utilizar Zod e React Hook Form juntos para garantir a integridade dos dados nos seus formulários React.

O que é Zod?

Zod é uma biblioteca de validação de esquemas que permite validar e tipar dados de entrada em aplicações TypeScript. Com uma API intuitiva, Zod possibilita a definição de esquemas de objeto em tempo de execução, assegurando que os dados atendam aos critérios definidos. Entre as principais funcionalidades do Zod, podemos destacar:

Definição de Schemas: Criação de esquemas de objetos para validação em tempo real.
Validação de Dados: Verificação dos dados de entrada conforme os esquemas estabelecidos.
Validações Complexas: Possibilidade de criar esquemas de objetos complexos com tipos personalizados.
API Amigável: Uma interface simples e fácil de usar.

Com Zod, você pode garantir que seus dados de entrada estejam adequados às expectativas da aplicação.

Integração do Zod com React Hook Form

Um dos grandes diferenciais do Zod é sua compatibilidade com React Hook Form. Essa combinação facilita a implementação de validações em formulários React de maneira rápida e confiável.

Exemplo de Definição de Tipos de Dados

Vamos definir um esquema básico para um formulário de criação de usuário:

import { z } from "zod";

const createUserFormSchema = z.object({
  username: z.string(),
  password: z.string(),
  confirm_password: z.string(),
});

Nesse exemplo, estamos criando um esquema para um formulário que coleta um nome de usuário, uma senha e a confirmação da senha.

Personalizando Validações

Podemos melhorar a validação adicionando mensagens de erro personalizadas e regras específicas:

const createUserFormSchema = z.object({
  username: z
    .string()
    .nonempty("O nome de usuário é obrigatório")
    .regex(/^[A-Za-z]+$/, "Apenas letras são permitidas"),
  password: z.string().nonempty("A senha é obrigatória"),
  confirm_password: z.string().nonempty("É necessário confirmar a senha"),
}).refine(({ password, confirm_password }) => password === confirm_password, {
  message: "As senhas não coincidêm",
  path: ["confirm_password"],
});

Uso do `safeParse`

O método safeParse é útil para validar dados de forma amigável, evitando erros não tratados:

const data = {
  username: 'rafaelgadotti',
  password: 'pass1234',
  confirm_password: 'pass1234',
};

const result = createUserFormSchema.safeParse(data);
if (result.success) {
  // Dados válidos
} else {
  console.error(result.error);
}

Criando o Formulário com React Hook Form

Com a validação configurada, agora vamos para a parte de criação do formulário utilizando React Hook Form e Zod:

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";

const CreateUserForm = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(createUserFormSchema),
  });

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="username">Nome de Usuário</label>
        <input {...register("username")} />
        {errors.username && <span>{errors.username.message}</span>}
      </div>
      <div>
        <label htmlFor="password">Senha</label>
        <input {...register("password")} />
        {errors.password && <span>{errors.password.message}</span>}
      </div>
      <div>
        <label htmlFor="confirm_password">Confirme a Senha</label>
        <input {...register("confirm_password")} />
        {errors.confirm_password && <span>{errors.confirm_password.message}</span>}
      </div>
      <button type="submit">Enviar</button>
    </form>
  );
};

Resumo Final

A combinação de Zod e React Hook Form não só simplifica a validação de formulários em aplicações React, como também promove uma experiência de desenvolvimento mais produtiva e menos suscetível a erros. Ao criar um schema com Zod e conectar ao React Hook Form através do zodResolver, você garante que as entradas dos usuários estejam conforme as regras que definiu.

Experimente implementar essa estratégia em seus projetos e veja a melhoria na integridade dos dados e na experiência do usuário. Se você gostou deste conteúdo, não hesite em compartilhar e deixar um comentário!

Como Validar Formulários em React com Zod e React Hook Form