0Pricing
Next.js 15 Fullstack Web Apps · Aula

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

Implemente uma validação eficiente de formulários usando a popular biblioteca React Hook Form.

Validação de Formulários com React Hook Form é uma aula grátis de Next.js 15 Fullstack Web Apps no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Next.js 15 Fullstack Web Apps, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Next.js 15 Fullstack Web Apps inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

Why React Hook Form?

Managing forms in React can get complex, especially with validation. React Hook Form (RHF) is a popular library designed to simplify this process.

  • Performance: Minimizes unnecessary re-renders.
  • Developer Experience: Simple API, easy to integrate.
  • Validation: Powerful and flexible rules.

It helps you build robust forms with less code and better performance.

Getting Started: useForm

First, install React Hook Form using npm or yarn. Then, import and use the useForm hook in your component. This hook initializes your form and provides essential methods.

import React from 'react';
import { useForm } from 'react-hook-form';

function SimpleForm() {
  // useForm initializes the form and gives us tools
  const { register, handleSubmit } = useForm();

  // This function runs when the form is submitted
  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* Inputs will go here */}
      <button type="submit">Submit</button>
    </form>
  );
}

Registering Input Fields

To make an input field part of your RHF form, you need to "register" it. The register function takes the input's name and returns props that you spread onto the input element.

import React from 'react';
import { useForm } from 'react-hook-form';

function RegisterInputForm() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="name">Name:</label>
      <input id="name" {...register("name")} />
      <br/>
      <label htmlFor="email">Email:</label>
      <input id="email" type="email" {...register("email")} />
      <br/>
      <button type="submit">Submit</button>
    </form>
  );
}

Basic Validation: Required

RHF lets you easily add validation rules during registration. The required: true option makes an input field mandatory. If left empty, the form won't submit.

import React from 'react';
import { useForm } from 'react-hook-form';

function RequiredValidationForm() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="itemName">Item Name:</label>
      <input id="itemName" {...register("itemName", { required: true })} />
      <br/>
      <button type="submit">Submit</button>
    </form>
  );
}

Displaying Error Messages

When validation fails, RHF populates the formState.errors object. You can use this object to display helpful error messages next to your input fields, guiding the user.

import React from 'react';
import { useForm } from 'react-hook-form';

function DisplayErrorsForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="name">Name:</label>
      <input id="name" {...register("name", { required: "Name is required!" })} />
      {errors.name && <p style={{color: 'red'}}>{errors.name.message}</p>}
      <br/>
      <label htmlFor="age">Age:</label>
      <input id="age" type="number" {...register("age", { min: 18 })} />
      {errors.age && <p style={{color: 'red'}}>Must be at least 18.</p>}
      <br/>
      <button type="submit">Submit</button>
    </form>
  );
}

Length & Pattern Rules

RHF also offers minLength and maxLength for character limits. The pattern option allows you to validate input against a regular expression, perfect for specific formats like email or phone numbers.

import React from 'react';
import { useForm } from 'react-hook-form';

function LengthPatternForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="username">Username:</label>
      <input id="username" {...register("username", { minLength: 3, maxLength: 10 })} />
      {errors.username && <p style={{color: 'red'}}>3-10 chars.</p>}
      <br/>
      <label htmlFor="email">Email:</label>
      <input id="email" type="email"
        {...register("email", {
          pattern: /^\S+@\S+$/i
        })}
      />
      {errors.email && <p style={{color: 'red'}}>Invalid email.</p>}
      <br/>
      <button type="submit">Submit</button>
    </form>
  );
}

Custom Validation Logic

When built-in rules aren't enough, you can create custom validation logic using the validate option in register. This function should return true for valid input or a string error message otherwise.

import React from 'react';
import { useForm } from 'react-hook-form';

function CustomValidationForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="password">Password:</label>
      <input id="password" type="password"
        {...register("password", {
          validate: (value) =>
            value.length >= 8 || "Min 8 chars!"
        })}
      />
      {errors.password && <p style={{color: 'red'}}>{errors.password.message}</p>}
      <br/>
      <button type="submit">Submit</button>
    </form>
  );
}

Handling Form Submission

The handleSubmit function from useForm wraps your own submission logic. It ensures your onSubmit function is only called if all form validations pass. It automatically passes the validated form data to your function.

import React from 'react';
import { useForm } from 'react-hook-form';

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

  // This function is called only if validation passes
  const onSubmit = (data) => {
    console.log("Form data:", data);
    alert("Form submitted successfully!");
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="task">Task Description:</label>
      <input id="task" {...register("task", { required: true })} />
      {errors.task && <p style={{color: 'red'}}>Task is required.</p>}
      <br/>
      <button type="submit">Add Task</button>
    </form>
  );
}

Resetting Form Fields

After a successful submission, or if you want to clear the form at any point, the reset method from useForm is very useful. It can clear all fields or set them to specific default values.

import React from 'react';
import { useForm } from 'react-hook-form';

function ResetForm() {
  const { register, handleSubmit, reset } = useForm();

  const onSubmit = (data) => {
    console.log(data);
    alert("Data sent!");
    reset(); // Clears all form fields
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="feedback">Your Feedback:</label>
      <input id="feedback" {...register("feedback")} />
      <br/>
      <button type="submit">Send Feedback</button>
      <button type="button" onClick={() => reset()}>Clear Form</button>
    </form>
  );
}

Test Your RHF Knowledge

Which of the following are valid ways to define validation rules when registering an input with React Hook Form?

Recap: RHF for Validation

You've learned how React Hook Form simplifies form validation in Next.js applications!

  • It provides the useForm hook to manage your form.
  • Inputs are connected using the register method.
  • Validation rules (like required, minLength, pattern, validate) are passed directly to register.
  • Errors are accessed via formState.errors.
  • The handleSubmit function ensures your data is valid before submission.
  • The reset method helps clear forms easily.

Next, explore how to combine these with Server Actions for fullstack form management!

Perguntas Frequentes

A aula “Validação de Formulários com React Hook Form” é grátis?

Sim — o texto completo de “Validação de Formulários com React Hook Form” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Next.js 15 Fullstack Web Apps, atualize para CoddyKit PRO. O curso de Next.js 15 Fullstack Web Apps inclui 4 aulas no total.

O que vou aprender em “Validação de Formulários com React Hook Form”?

Implemente uma validação eficiente de formulários usando a popular biblioteca React Hook Form. Você pratica Next.js 15 Fullstack Web Apps com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Next.js 15 Fullstack Web Apps?

Nenhuma experiência prévia é necessária. Next.js 15 Fullstack Web Apps no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Validação de Formulários com React Hook Form”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Next.js 15 Fullstack Web Apps?

Sim. Cada aula de Next.js 15 Fullstack Web Apps inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Componentes Controlados e Estado
  2. Validação de Formulários com React Hook Form
  3. Formulários Fullstack com Ações de Servidor
  4. Envio de arquivos e tratamento de formulários multipart
← Voltar para Next.js 15 Fullstack Web Apps