Desenvolvendo Formulários com Validação em React usando React Hook Form (2023)

Na construção de formulários com validação eficaz, nos deparamos frequentemente com desafios complexos. Neste artigo, vamos explorar uma abordagem simples e direta para adicionar validação a um formulário utilizando React e React Hook Form.

Instalação da Biblioteca Semantic UI

Para começar, utilizaremos a biblioteca Semantic UI para criar o nosso formulário. Execute um dos seguintes comandos para instalá-la:

yarn add semantic-ui-react semantic-ui-css

ou

npm install semantic-ui-react semantic-ui-css

Após a instalação, importe a biblioteca no arquivo index.js da sua aplicação:

import 'semantic-ui-css/semantic.min.css';

Agora, criaremos um formulário com quatro campos: Nome, Sobrenome, E-mail e Senha.

import React from 'react';
import { Form, Button } from 'semantic-ui-react';

export default function FormValidation() {
  return (
    <div>
      <Form>
        <Form.Field>
          <label>Nome</label>
          <input placeholder='Nome' type="text" />
        </Form.Field>
        <Form.Field>
          <label>Sobrenome</label>
          <input placeholder='Sobrenome' type="text" />
        </Form.Field>
        <Form.Field>
          <label>E-mail</label>
          <input placeholder='E-mail' type="email" />
        </Form.Field>
        <Form.Field>
          <label>Senha</label>
          <input placeholder='Senha' type="password" />
        </Form.Field>
        <Button type='submit'>Enviar</Button>
      </Form>
    </div>
  );
}

Instalação do React Hook Form

Agora, vamos adicionar a validação ao nosso formulário utilizando o React Hook Form. Primeiro, instale a biblioteca com o seguinte comando:

npm install react-hook-form

Em seguida, importe as funcionalidades necessárias no componente:

import React from 'react';
import { Form, Button } from 'semantic-ui-react';
import { useForm } from "react-hook-form";

export default function FormValidation() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  return (
    <div>
      <Form onSubmit={handleSubmit(onSubmit)}>
        {/* Campos do formulário */}
      </Form>
    </div>
  );
}

Adicionando Validações aos Campos

Vamos agora adicionar validações aos campos do formulário. Para o campo de Nome, utilizaremos as propriedades required e maxLength.

<Form.Field>
  <label>Nome</label>
  <input placeholder='Nome' type="text" {...register("firstName", { required: true, maxLength: 10 })} />
</Form.Field>
{errors.firstName && <p>Por favor, verifique o Nome</p>}

Repita esse processo para os campos de Sobrenome, E-mail e Senha, ajustando as validações conforme necessário.

Para o campo de E-mail, utilizaremos uma expressão regular para validar o formato do e-mail:

<Form.Field>
  <label>E-mail</label>
  <input placeholder='E-mail' type="email" {...register("email", { required: true, pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ })} />
</Form.Field>
{errors.email && <p>Por favor, verifique o E-mail</p>}

Para o campo de Senha, definiremos que ela deve conter uma letra maiúscula, uma letra minúscula e ter entre 6 e 15 caracteres:

<Form.Field>
  <label>Senha</label>
  <input placeholder='Senha' type="password" {...register("password", { required: true, pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,15}$/ })} />
</Form.Field>
{errors.password && <p>Por favor, verifique a Senha</p>}

Com essas adições, nosso formulário agora possui validações abrangentes em todos os campos.

Conclusão

Neste artigo, exploramos a implementação de validações em formulários React utilizando a biblioteca React Hook Form. Ao seguir esses passos, você estará equipado para criar formulários robustos e garantir uma experiência de usuário aprimorada.

Lembre-se de que a qualidade do conteúdo é fundamental para o sucesso na classificação do Google. Continue aprimorando suas habilidades de desenvolvimento e explore mais recursos para construir aplicações web poderosas.

Feliz aprendizado!