Validando formulários com React Hook Forms

O React Hook Forms é uma biblioteca que auxiliará a organizar e padronizar as validações dos formulários por toda a aplicação.

React Hook Form cria validação de formulário simples, alinhado com os existentes dentro do próprio HTML, as validações suportadas são: required, min, max, maxlength, minlength, pattern, validate.

O React Hook Form adota o uso de entradas não controladas em vez de depender do estado. Essa abordagem torna os formulários mais eficientes e reduz o número de novas renderizações.

Antes de começar você precisa ter um projeto React criado. Caso não tenha, execute o comando do Código 1 para criar.

create-react-app validando-formularios

Instalando o React Hook Forms

Para instalar a biblioteca React Hook Forms dentro do seu projeto React, basta executar o comando do Código 2.

npm install react-hook-form

Usando o React Hook Form

Para utilizar o react hook form precisamos importar uma funcionalidade chamada useForm. Veja no Código 3 como isso é feito.

import { useForm } from "react-hook-form";

Depois que importamos o useForm da biblioteca react-hook-form podemos utilizar o processo de desestruturação - conceito da linguagem JavaScript, para extrair duas funcionalidades chamadas register e handleSubmit, como mostra o Código 4.

const { register, handleSubmit } = useForm();

O register pode ser usado para personalizar nossa validação em qualquer campo como por exemplo em casos comuns que precisamos definir que um campo nome tenha um mínimo de 50 caracteres.

Depois de extraído do useForm podemos inserir o register no campo de input como foi feito no Código 5.

<input name="ultimo_nome" ref = { register ({ pattern: /^[A-Za-z]+$/i }) } />

No exemplo acima passamos o register para o input através da propriedade ref. Dessa forma estamos dizendo que este campo está disponível para validação e assim permite que o seu valor seja rastreado para alterações.

Repare que foi passado para o register uma regex que vai fazer com que o campo de input siga o padrão passado a ele.

Além do register também extraímos o método handleSubmit. É ele que vai passar os dados do formulário quando a validação do formulário for bem-sucedida. Ele é inserido na propriedade onSubmit do formulário como visto no Código 6.

<form onSubmit = { handleSubmit(onSubmit) } >
  /* Dados do formulário */
</form>

Repare que o método handleSubmit recebe uma função como parâmetro. É essa função que será chamada caso a validação seja bem-sucedida.

Veja um exemplo de um componente (App) que utiliza o react hook form para validar um formulário simples no Código 7.

  import React from "react";
  import { useForm } from "react-hook-form";
   
  export default function App() {
    const { register, handleSubmit } = useForm();
    const onSubmit = (data) => console.log(data);
   
    return (
      <form onSubmit = { handleSubmit(onSubmit) } >
          <input name="primeiro_nome"  ref = { register({ required: true, maxLength: 20 }) } />
          <input name="ultimo_nome" ref = { register({ maxLength: 20 }) } />
          <input name="idade" type="number" ref = { register({ min: 18, max: 99 }) } />
          <input type="submit" />
        </form>
    );
  }

Vamos entender as validações criadas no exemplo acima.

Exibindo erros

Ao validar os campos queremos que o usuário saiba qual campo ele preencheu indevidamente. Para isso precisamos instalar a biblioteca @hookform/error-message executando o Código 8.

npm install @hookform/error-message

Feito isso precisamos modificar o formulário que criamos, conforme o Código 9.

  import React from "react";
  import { useForm } from "react-hook-form";
  import { ErrorMessage } from "@hookform/error-message";
   
  export default function App() {
    const { register, handleSubmit, errors } = useForm();
    const onSubmit = (data) => console.log(data);
   
    return (
      <div>
        <form onSubmit = { handleSubmit(onSubmit) } >
          <input name="primeiro_nome"  
            ref = {
              register({ 
                required: "O campo precisa ter no máximo 20 caracteres.", 
                maxLength: 20
              })
            }
          />
          
          <input name="ultimo_nome"
            ref = {
              register({ 
                required: "O campo precisa ter no máximo 20 caracteres.", 
                maxLength: 20
              })
          }
          />
   
          <input name="idade" type="number" 
            ref = { register({ 
              min: 18, max: 99,
              required: "A idade deve ser entre 18 e 99 ", 
            })}
          />
          <input type="submit" />
        </form>
      </div>
    )
  }

Repare que em cada input inserimos um texto dentro de required. É esse texto que ficará disponível na variável errors - que veremos a seguir, caso haja um erro na validação.

O que precisamos agora é exibir esses erros na tela. Isso é feito através do componente ErrorMessage.

Depois de cada input vamos inserir o componente ErrorMessage para que, caso haja um erro de validação, a mensagem seja exibida. Para isso altere conforme o Código 10.

  import React from "react";
  import { useForm } from "react-hook-form";
  import { ErrorMessage } from "@hookform/error-message";
   
  export default function App() {
    const { register, handleSubmit, errors } = useForm();
    const onSubmit = (data) => console.log(data);
   
    return (
      <div>
        <form onSubmit = { handleSubmit(onSubmit) } >
          <input name="primeiro_nome"  
            ref = {
              register({ 
                required: "O campo precisa ter no máximo 20 caracteres.", 
                maxLength: 20
              })
            }
          />
          <ErrorMessage errors = { errors } name="primeiro_nome" />
          
          <input name="ultimo_nome"
            ref = {
              register({ 
                required: "O campo precisa ter no máximo 20 caracteres.", 
                maxLength: 20
              })
          }
          />
          <ErrorMessage errors = { errors } name="ultimo_nome" />
   
          <input name="idade" type="number" 
            ref = { register({ 
              min: 18, max: 99,
              required: "A idade deve ser entre 18 e 99 ", 
            })}
          />
          <ErrorMessage errors = { errors } name="idade" />
   
          <input type="submit" />
        </form>
      </div>
    )
  }

Para cada componente ErrorMessage passamos dois parâmetros: errors que vai receber a mensagem de erro representada pela variável errors (extraída de useForm) e name que é o mesmo do input ao qual queremos exibir a mensagem caso a validação não seja bem sucedida.

Outra forma de exibir a mensagem de erro é passando tags e/ou componentes para dentro do componente ErrorMessage. Isso é feito através da propriedade render. Veja um exemplo no Código 11.

  <ErrorMessage
   errors = { errors }
   name = "primeiro_nome"
   render = { ({ message }) => <p>Descrição do erro: { message } </p> }
  />
  

Conclusão

Vemos neste artigo como é simples criar validações na programação React.JS utilizando a biblioteca react-hook-form. Através das validações seu código estará menos suscetível a erros.

Confira também

Primeiros passos com React

Curso

Single Page Application com React

Curso

React: Componentes

Curso