Artigos React 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
Código 1. Criando um projeto React.JS

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
Código 2. Instalando a biblioteca 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";
Código 3. Importando useFrom da biblioteca 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();
Código 4. Extraindo register e handleSubmit do 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 }) } />
Código 5. Inserindo o register no campo de input

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>
Código 6. Passando o método handleSubmit para o formulário

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>
    );
  }
Código 7. Componente utilizando o react hook form

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

Linha 10: o campo primeiro_nome precisa ter o tamanho máximo de 20 caracteres e é de preenchimento obrigatório.

Linha 11: o campo ultimo_nome terá um tamanho definido porém o preenchimento não é obrigatório. Repare que aqui não utilizamos required: true como foi feito no campo primeiro_nome.

Linha 12: no campo idade vamos apenas definir um valor mínimo e máximo que ele pode receber.

Linha 13: inserimos o botão do formulário que ao ser clicado vai acionar o evento onSubmit e com isso vai chamar o método handleSubmit.

Lembrando que em nossos inputs o ref é uma referência do JSX e o register é o método onde aplicaremos nossa validação.

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
Código 8. Instalando a biblioteca @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>
    )
  }
Código 9. Inserindo as validações nos campos de input

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>
    )
  }
Código 10. Exibindo as mensagens de erro

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> }
  />
Código 11. Personalizando a exibição do erro

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

Primeiros passos com React

Curso
Single Page Application com React

Single Page Application com React

Curso
React: Componentes

React: Componentes

Curso