Como validar formulários com Next.js

A validação do formulário é essencial para um aplicativo web robusto e seguro. Felizmente, a biblioteca Formik pode fazer grande parte do trabalho pesado para você.

Você já tentou enviar um formulário, mas a página da web apresentou uma mensagem de erro informando que um ou mais campos são inválidos? Se sim, então você experimentou a validação do formulário.

A validação geralmente é essencial para obter dados limpos e utilizáveis. De endereços de e-mail a datas, se precisar ser preciso, você precisa verificar com cuidado.

O que é validação de formulário?

A validação do formulário é o processo de garantir que os dados inseridos em um formulário por um usuário estejam corretos e completos. Você pode fazer isso no lado do cliente, usando recursos HTML integrados, como o atributo obrigatório. Você também pode validar no cliente usando JavaScript, e existem bibliotecas Next.js externas para ajudar a facilitar o processo.

Existem vários motivos pelos quais a validação do formulário é essencial. Em primeiro lugar, ajuda a garantir que os dados inseridos num formulário estão completos e corretos. Isso é importante porque ajuda a evitar erros quando seu aplicativo envia dados para um servidor ou banco de dados.

Em segundo lugar, a validação de formulário pode ajudar a melhorar a usabilidade de um formulário, fornecendo feedback quando um usuário insere dados inválidos. Isso pode ajudar a evitar frustração e confusão por parte do usuário.

Finalmente, a validação de formulário pode ajudar a melhorar a segurança de um formulário, garantindo que ele envie apenas dados válidos.

Como validar formulários em Next.js

Existem duas maneiras de validar formulários em Next.js: usando os métodos integrados ou usando bibliotecas externas.

Usando os métodos integrados

HTML fornece vários métodos para validar formulários, o mais comum deles é o atributo required. Isso garante que um campo não possa ficar em branco. Você pode usar esse método em seu aplicativo Next.js, simplesmente incluindo o atributo nas tags de entrada geradas. HTML também fornece um atributo pattern. Você pode usar isso junto com uma expressão regular para uma validação mais complexa.

Este exemplo inclui um formulário com dois campos: nome e email. O campo de nome é obrigatório e o campo de email deve corresponder a uma expressão regular.

import React from 'react'
 
class MyForm extends React.Component {
  render() {
    return (
     <form >
       <label>
         Name:
         <input type="text" name="name" required />
       </label>
       <label>
         Email:
         <input type="email" name="email"
          pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
       </label>
       <input type="submit" value="Submit" />
     </form>
   )
 }
}
 
export default MyForm

Este código importa a biblioteca React, cria uma classe chamada MyForm e renderiza um elemento de formulário. Dentro do elemento form, existem dois elementos label.

O primeiro elemento do rótulo contém um campo de entrada de texto obrigatório. O segundo elemento de rótulo contém um campo de entrada de email com uma expressão regular em seu atributo padrão.

Finalmente, você tem um botão enviar. Quando um usuário envia o formulário, o atributo obrigatório garante que ele preencheu o campo de nome. O atributo padrão do campo de e-mail garante que o e-mail esteja no formato especificado. Se alguma dessas condições falhar, o formulário não será enviado.

Existem algumas desvantagens em usar os métodos integrados. Primeiro, pode ser difícil acompanhar todas as diferentes regras de validação que você configurou. Segundo, se você tiver muitos campos, pode ser entediante adicionar o atributo obrigatório a cada um deles. Por último, os métodos integrados fornecem apenas validação básica. Se quiser fazer uma validação mais complexa, você precisará usar uma biblioteca externa.

Usando uma biblioteca externa

Além dos métodos integrados, também existem muitas bibliotecas externas que você pode usar para validar formulários. Algumas bibliotecas populares incluem Formik, react-hook-form e Yup.

Para usar uma biblioteca externa, primeiro você precisa instalá-la. Por exemplo, para instalar o Formik, execute o seguinte comando:

npm install formik

Depois de instalar a biblioteca, você pode importá-la para seu componente e usá-la para validar seu formulário:

import React from 'react'
import { Formik, Form, Field } from 'formik'
 
const MyForm = () => (
  <Formik
    initialValues={{ name: '', email: '' }}
    validate={values => {
      const errors = {}
      if (!values.name) {
        errors.name = 'Required'
      }
      if (!values.email) {
        errors.email = 'Required'
      } else if (
        !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
      ) {
        errors.email = 'Invalid email address'
      }
      return errors
    }}
    onSubmit={(values, { setSubmitting }) => {
      setTimeout(() => {
        alert(JSON.stringify(values, null, 2))
        setSubmitting(false)
      }, 400)
    }}
  >
    {({ isSubmitting }) => (
      <Form>
        <Field type="text" name="name" />
        <Field type="email" name="email" />
        <button type="submit" disabled={isSubmitting}>
          Submit
        </button>
      </Form>
    )}
  </Formik>
)
 
export default MyForm

Aqui, você primeiro importa os componentes Formik, Form e Field da biblioteca Formik. A seguir, crie um componente chamado MyForm. Este componente renderiza um formulário que possui dois campos: nome e email.

A propriedade InitialValues define os valores iniciais dos campos do formulário. Nesse caso, os campos nome e email são strings vazias.

A propriedade validar define as regras de validação para os campos do formulário. Neste caso, o campo nome é obrigatório e o campo email deve corresponder a uma expressão regular.

A proposta onSubmit define a função que o React chamará quando o usuário enviar o formulário. Neste caso, a função é um alerta que irá exibir os valores dos campos do formulário.

A propriedade isSubmit determina se o formulário está sendo enviado no momento. Nesse caso, você o define como falso.

Por fim, renderize o formulário usando o componente Form do Formik.

Benefícios do uso de bibliotecas externas em Next.js

Existem vários benefícios em usar uma biblioteca externa como Formik para validar formulários em Next.js. Um benefício é que é muito mais fácil exibir mensagens de erro ao usuário. Por exemplo, se um campo obrigatório não for preenchido, o Formik exibirá automaticamente uma mensagem de erro incluindo uma sugestão de correção.

Outro benefício é que o Formik pode lidar com regras de validação mais complexas. Por exemplo, você pode usar o Formik para validar se dois campos são iguais (como um campo de senha e de confirmação de senha).

Finalmente, o Formik facilita o envio dos dados do formulário para um servidor. Por exemplo, você pode usar o Formik para enviar os dados do formulário para uma API.

Aumente o envolvimento do usuário usando formulários

Você pode usar formulários para aumentar o envolvimento do usuário. Ao fornecer feedback quando um usuário insere dados inválidos, você pode ajudar a evitar frustração e confusão.

Usando bibliotecas externas, você pode adicionar recursos como preenchimento automático e campos condicionais. Isso pode ajudar a tornar seus formulários ainda mais fáceis de usar. Quando usados corretamente, os formulários podem ser uma ferramenta poderosa para ajudá-lo a aumentar o envolvimento do usuário e coletar os dados necessários.

Além da validação, Next.js possui muitos recursos que você pode usar para aumentar o envolvimento do usuário.