DEV Community

Cover image for Validação de Formulários com React-Hook-Form e Zod
Vitor Rios
Vitor Rios

Posted on • Edited on

4 1 1 1

Validação de Formulários com React-Hook-Form e Zod

Introdução

Gerenciar formulários em aplicações React pode ser desafiador, especialmente quando se trata de validação e gerenciamento de estados. A combinação de React-Hook-Form, TypeScript e Zod oferece uma solução elegante e eficiente para esses desafios. Este artigo explora os benefícios dessa integração, demonstrando como ela simplifica o gerenciamento de formulários, comparando com a abordagem tradicional usando useState.

Gerenciamento Tradicional de Formulários com useState

Primeiro, vejamos um exemplo de gerenciamento de formulário com useState:

import React, { useState } from 'react';

const TraditionalForm = () => {
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');
    const [errors, setErrors] = useState({ name: '', email: '' });

    const validate = () => {
        let isValid = true;
        const errors = { name: '', email: '' };

        if (!name) {
            errors.name = 'O nome é obrigatório.';
            isValid = false;
        } else if (name.length < 3) {
            errors.name = 'O nome deve ter mais de 3 caracteres.';
            isValid = false;
        }

        if (!email) {
            errors.email = 'O email é obrigatório.';
            isValid = false;
        } else if (!/\S+@\S+\.\S+/.test(email)) {
            errors.email = 'Email inválido.';
            isValid = false;
        }

        setErrors(errors);
        return isValid;
    };

    const handleSubmit = (event) => {
        event.preventDefault();
        if (validate()) {
            // Lógica de submissão do formulário
            console.log('Formulário submetido:', { name, email });
        }
    };

    return (
        <form onSubmit={handleSubmit}>
            <div>
                <input
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    placeholder="Nome"
                />
                {errors.name && <p style={{ color: 'red' }}>{errors.name}</p>}
            </div>

            <div>
                <input
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="Email"
                />
                {errors.email && <p style={{ color: 'red' }}>{errors.email}</p>}
            </div>

            {/* Outros campos e botão de submit */}
            <button type="submit">Enviar</button>
        </form>
    );
};

export default TraditionalForm;
Enter fullscreen mode Exit fullscreen mode

Esta abordagem requer a manutenção de estados separados para cada campo e lógica manual de validação, o que pode tornar o componente extenso e difícil de manter, especialmente em formulários complexos.

Antes de mergulharmos nos exemplos, é necessário configurar nosso ambiente com as bibliotecas necessárias. Aqui estão os passos para configurar React-Hook-Form e o Zod em seu projeto React.

Instalando as Dependências

Execute o seguinte comando para instalar React-Hook-Form e Zod:

npm install react-hook-form zod @hookform/resolvers
Enter fullscreen mode Exit fullscreen mode

Agora, vamos introduzir React-Hook-Form e Zod, utilizando TypeScript para uma integração tipo-segura.

Configurando o Formulário com React-Hook-Form e Zod

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

const schema = z.object({
    name: z.string().min(3, 'Nome é obrigatório'),
    email: z.string().email('Email inválido')
});

type FormData = z.infer<typeof schema>;

const ModernForm = () => {
    const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
        resolver: zodResolver(schema)
    });

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

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <input {...register('name')} />
            {errors.name && <p>{errors.name.message}</p>}

            <input {...register('email')} />
            {errors.email && <p>{errors.email.message}</p>}

            {/* Outros campos e botão de submit */}
        </form>
    );
};
Enter fullscreen mode Exit fullscreen mode

Benefícios da Abordagem Moderna

  • Menos Boilerplate: React-Hook-Form reduz significativamente o código necessário para gerenciar estados e eventos de formulário.
  • Validação Integrada: Zod oferece uma forma declarativa e poderosa de definir esquemas de validação, simplificando a lógica de validação.
  • Mensagens de Erro Gerenciadas: As mensagens de erro são gerenciadas de forma centralizada e automatizada.
  • Tipagem Forte com TypeScript: A integração com TypeScript assegura que os dados do formulário estejam sempre alinhados com o esquema definido, melhorando a segurança e a previsibilidade do código.

Comparação e Conclusão

Comparando as duas abordagens, é evidente que React-Hook-Form, combinado com Zod e TypeScript, oferece uma solução mais limpa, organizada e eficiente para o gerenciamento de formulários em React. O código torna-se mais legível e fácil de manter, enquanto a validação e o gerenciamento de erros são simplificados e mais robustos. Esta stack é particularmente útil em formulários grandes e complexos, onde a abordagem tradicional pode se tornar rapidamente insustentável. Em suma, a adoção de React-Hook-Form, TypeScript e Zod em projetos React não só melhora a qualidade do código, mas também acelera o processo de desenvolvimento, permitindo que os desenvolvedores se concentrem mais na lógica de negócios e menos na mecânica do gerenciamento de formulários.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay