Validação de entrada de dados em formulários

No tópico anterior, aprendemos sobre como criar e manipular formulários no React.

Hoje, vamos aprender sobre como validar a entrada de dados em formulários.

Por que validar a entrada de dados?

Validar a entrada de dados em formulários é importante para:

• Garantir a qualidade dos dados: A validação ajuda a garantir que os dados coletados sejam precisos e completos.
• Evitar erros: A validação ajuda a evitar erros no processamento dos dados.
• Melhorar a experiência do usuário: A validação ajuda a fornecer uma experiência melhor para o usuário, evitando que ele digite dados incorretos.

Como validar a entrada de dados?

Existem diversas técnicas para validar a entrada de dados em formulários, como:

• Validação de tipo de dado: Podemos verificar se o valor digitado é do tipo de dado esperado, como número, email, data etc.
• Validação de tamanho: Podemos verificar se o valor digitado está dentro de um tamanho mínimo e máximo.
• Validação de conteúdo: Podemos verificar se o valor digitado é um valor válido, como um endereço de email válido ou um código postal válido.

Exemplo de validação de entrada de dados

Vamos ver um exemplo de como validar a entrada de dados em um formulário:

const App = () => {
  const [nome, setNome] = React.useState("");
  const [email, setEmail] = React.useState("");

  const handleSubmit = (event) => {
    event.preventDefault();

    const errors = [];

    if (!nome) {
      errors.push("O nome é obrigatório");
    }

    if (!email) {
      errors.push("O email é obrigatório");
    } else if (!/\S+@\S+\.\S+/.test(email)) {
      errors.push("O email é inválido");
    }

    if (errors.length > 0) {
      alert(errors.join("\n"));
    } else {
      alert(`Olá, ${nome}! Seu email é ${email}.`);
    }
  };

  return (
    <div>
      <h1>Formulário</h1>
      <form onSubmit={handleSubmit}>
        <label htmlFor="nome">Nome:</label>
        <input
          type="text"
          id="nome"
          name="nome"
          value={nome}
          onChange={(event) => setNome(event.target.value)}
        />
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          id="email"
          name="email"
          value={email}
          onChange={(event) => setEmail(event.target.value)}
        />
        <button type="submit">Enviar</button>
      </form>
    </div>
  );
};

Neste exemplo, o componente App valida o nome e o email digitados pelo usuário.

A validação é feita usando a função handleSubmit.

A função handleSubmit verifica se o nome e o email estão vazios.

A função handleSubmit também verifica se o email é um valor válido usando uma expressão regular.

Se houver erros de validação, a função handleSubmit exibe um alerta com os erros.

Se não houver erros de validação, a função handleSubmit exibe um alerta com o nome e o email digitados pelo usuário.

Observações importantes

Ao validar a entrada de dados, é importante:

• Usar mensagens de erro claras e objetivas: As mensagens de erro devem ser claras e objetivas para que o usuário entenda o que precisa ser corrigido.
• Evitar mensagens de erro genéricas: As mensagens de erro devem ser específicas para cada tipo de erro.
• Oferecer ajuda ao usuário: Podemos oferecer ajuda ao usuário, como dicas de como corrigir o erro.

Conclusões

A validação de entrada de dados é uma parte importante da criação de formulários confiáveis e eficientes.

No próximo módulo, vamos aprender sobre navegação com React Router.

Vamos aprender como implementar navegação entre páginas e como usar o React Router para controle de rotas.

Até lá, continuem estudando!