Pipeline de Validação com experimental_useFormState do React: Construindo Cadeias de Validação de Formulário Robustas

A validação de formulários é um pilar na construção de aplicações web robustas e fáceis de usar. O hook experimental_useFormState do React oferece uma abordagem poderosa e flexível para gerir o estado de formulários e implementar pipelines de validação complexos. Este post de blog explora como aproveitar o experimental_useFormState para criar sistemas de validação de formulários manuteníveis, escaláveis e internacionalmente adaptáveis.

Entendendo o experimental_useFormState

O experimental_useFormState é um hook experimental do React (no momento em que este artigo foi escrito; verifique sempre a documentação oficial do React para o estado mais recente) projetado para simplificar a gestão e validação de formulários. Ele lida com as atualizações de estado do formulário e permite que você defina funções redutoras para gerir transições de estado mais complexas. O seu principal benefício reside na sua capacidade de se integrar perfeitamente com operações assíncronas e validação do lado do servidor.

Conceitos Fundamentais

• Gestão de Estado: O experimental_useFormState gere todo o estado do formulário, reduzindo o código repetitivo relacionado à atualização de campos de formulário individuais.
• Funções Redutoras: Utiliza funções redutoras para lidar com atualizações de estado, permitindo lógica complexa e garantindo transições de estado previsíveis. Isto é semelhante ao useReducer, mas adaptado para o estado de formulários.
• Operações Assíncronas: Integra-se perfeitamente com operações assíncronas, facilitando o tratamento da validação e submissão do lado do servidor.
• Pipeline de Validação: Pode criar uma cadeia de funções de validação que são executadas sequencialmente, fornecendo uma abordagem estruturada e organizada para a validação de formulários.

Criando um Pipeline de Validação

Um pipeline de validação é uma sequência de funções que são executadas uma após a outra para validar os dados de um formulário. Cada função realiza uma verificação de validação específica, e o pipeline retorna um resultado agregado indicando se o formulário é válido e quaisquer mensagens de erro associadas. Esta abordagem promove a modularidade, a reutilização e a manutenibilidade.

Exemplo: Um Formulário de Cadastro Simples

Vamos ilustrar com um formulário de cadastro básico que requer um nome de usuário, e-mail e senha.

1. Definindo o Estado do Formulário

Primeiro, definimos o estado inicial do nosso formulário:

            const initialState = {
  username: '',
  email: '',
  password: '',
  errors: {},
  isValid: false,
};

            

              
                Copy
              
            
          

2. Implementando a Função Redutora

Em seguida, criamos uma função redutora para lidar com as atualizações de estado:

            function formReducer(state, action) {
  switch (action.type) {
    case 'UPDATE_FIELD':
      return {
        ...state,
        [action.field]: action.value,
      };
    case 'VALIDATE_FORM':
      return {
        ...state,
        errors: action.errors,
        isValid: action.isValid,
      };
    default:
      return state;
  }
}

            

              
                Copy
              
            
          

3. Definindo as Funções de Validação

Agora, definimos funções de validação individuais para cada campo:

            const validateUsername = (username) => {
  if (!username) {
    return 'O nome de usuário é obrigatório.';
  } else if (username.length < 3) {
    return 'O nome de usuário deve ter pelo menos 3 caracteres.';
  } else if (username.length > 20) {
    return 'O nome de usuário não pode ter mais de 20 caracteres.';
  }
  return null;
};

const validateEmail = (email) => {
  if (!email) {
    return 'O e-mail é obrigatório.';
  } else if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(email)) {
    return 'O e-mail não é válido.';
  }
  return null;
};

const validatePassword = (password) => {
  if (!password) {
    return 'A senha é obrigatória.';
  } else if (password.length < 8) {
    return 'A senha deve ter pelo menos 8 caracteres.';
  }
  return null;
};

            

              
                Copy
              
            
          

4. Criando o Pipeline de Validação

Montamos as funções de validação num pipeline:

            const validationPipeline = (state) => {
  const errors = {};
  errors.username = validateUsername(state.username);
  errors.email = validateEmail(state.email);
  errors.password = validatePassword(state.password);

  const isValid = Object.values(errors).every((error) => error === null);

  return { errors, isValid };
};

            

              
                Copy
              
            
          

5. Integrando com o experimental_useFormState

            import React from 'react';
import { experimental_useFormState as useFormState } from 'react';

function RegistrationForm() {
  const [state, dispatch] = useFormState(formReducer, initialState);

  const handleChange = (e) => {
    dispatch({
      type: 'UPDATE_FIELD',
      field: e.target.name,
      value: e.target.value,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const { errors, isValid } = validationPipeline(state);

    dispatch({
      type: 'VALIDATE_FORM',
      errors,
      isValid,
    });

    if (isValid) {
      // Submeter o formulário
      console.log('Formulário válido, a submeter...', state);
    } else {
      console.log('Formulário inválido, por favor corrija os erros.');
    }
  };

  return (
    

      

        Nome de usuário:
        
        {state.errors.username && 
{state.errors.username}
}
      
      

        Email:
        
        {state.errors.email && 
{state.errors.email}
}
      
      

        Senha:
        
        {state.errors.password && 
{state.errors.password}
}
      
      Cadastrar
    
  );
}

export default RegistrationForm;

            

              
                Copy
              
            
          

Técnicas de Validação Avançadas

Validação Condicional

Às vezes, é necessário validar um campo com base no valor de outro. Por exemplo, pode ser necessário exigir um número de telefone apenas se o usuário selecionar um país específico.

            const validatePhoneNumber = (phoneNumber, country) => {
  if (country === 'USA' && !phoneNumber) {
    return 'O número de telefone é obrigatório para os EUA.';
  }
  return null;
};

            

              
                Copy
              
            
          

Validação Assíncrona

A validação assíncrona é crucial quando precisa verificar a validade de um campo em relação a um banco de dados ou API do lado do servidor. Por exemplo, pode querer verificar se um nome de usuário já está em uso.

            const validateUsernameAvailability = async (username) => {
  try {
    const response = await fetch(`/api/check-username?username=${username}`);
    const data = await response.json();
    if (data.isTaken) {
      return 'O nome de usuário já está em uso.';
    }
    return null;
  } catch (error) {
    console.error('Erro ao verificar a disponibilidade do nome de usuário:', error);
    return 'Erro ao verificar a disponibilidade do nome de usuário.';
  }
};

            

              
                Copy
              
            
          

Será necessário integrar esta validação assíncrona no seu redutor e lidar com a natureza assíncrona apropriadamente usando Promises ou async/await.

Regras de Validação Personalizadas

Pode criar regras de validação personalizadas para lidar com lógica de negócios específica ou requisitos de formatação. Por exemplo, pode precisar validar um código postal com base no país selecionado.

            const validatePostalCode = (postalCode, country) => {
  if (country === 'USA' && !/^[0-9]{5}(?:-[0-9]{4})?$/.test(postalCode)) {
    return 'Código postal inválido para os EUA.';
  } else if (country === 'Canada' && !/^[A-Z]\d[A-Z] \d[A-Z]\d$/.test(postalCode)) {
    return 'Código postal inválido para o Canadá.';
  }
  return null;
};

            

              
                Copy
              
            
          

Considerações sobre Internacionalização (i18n)

Ao construir formulários para um público global, a internacionalização é essencial. Considere o seguinte:

• Formatos de Data: Use uma biblioteca como date-fns ou moment.js para lidar com diferentes formatos de data com base na localidade do usuário.
• Formatos de Número: Use Intl.NumberFormat para formatar números de acordo com a localidade do usuário.
• Formatos de Moeda: Use Intl.NumberFormat para formatar moedas corretamente, incluindo o símbolo da moeda e o separador decimal apropriados.
• Formatos de Endereço: Considere usar uma biblioteca como libaddressinput para lidar com diferentes formatos de endereço com base no país do usuário.
• Mensagens de Erro Traduzidas: Armazene as mensagens de erro num arquivo de tradução e use uma biblioteca como i18next para exibi-las no idioma do usuário.

Exemplo: Mensagens de Erro Traduzidas

Veja como pode usar o i18next para traduzir mensagens de erro:

            // en.json
{
  "username_required": "Username is required.",
  "email_required": "Email is required.",
  "invalid_email": "Email is not valid."
}

// pt.json
{
  "username_required": "O nome de utilizador é obrigatório.",
  "email_required": "O endereço de e-mail é obrigatório.",
  "invalid_email": "O endereço de e-mail não é válido."
}

// Component
import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation();

  const validateEmail = (email) => {
    if (!email) {
      return t('email_required');
    } else if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(email)) {
      return t('invalid_email');
    }
    return null;
  };
}

            

              
                Copy
              
            
          

Considerações sobre Acessibilidade

Garantir a acessibilidade do formulário é crucial para criar aplicações web inclusivas. Siga estas diretrizes:

• Use HTML Semântico: Use elementos HTML apropriados como <label>, <input> e <button>.
• Forneça Rótulos Claros: Associe rótulos a campos de formulário usando o atributo for no elemento <label> e o atributo id no elemento <input>.
• Use Atributos ARIA: Use atributos ARIA para fornecer informações adicionais a tecnologias assistivas, como leitores de tela.
• Forneça Mensagens de Erro: Exiba mensagens de erro claras e concisas que sejam fáceis de entender. Use atributos ARIA como aria-describedby para associar mensagens de erro a campos de formulário.
• Garanta a Navegação por Teclado: Certifique-se de que os usuários possam navegar no formulário usando o teclado. Use o atributo tabindex para controlar a ordem do foco.
• Use Contraste Suficiente: Garanta contraste suficiente entre o texto e as cores de fundo para tornar o formulário legível para usuários com deficiências visuais.

Melhores Práticas

• Mantenha as Funções de Validação Modulares: Crie funções de validação pequenas e reutilizáveis que realizem verificações específicas.
• Use uma Estratégia Consistente de Tratamento de Erros: Implemente uma estratégia consistente de tratamento de erros em toda a sua aplicação.
• Forneça Mensagens de Erro Amigáveis ao Usuário: Exiba mensagens de erro claras e concisas que ajudem os usuários a entender o que deu errado e como corrigir.
• Teste Seus Formulários Exaustivamente: Teste seus formulários com diferentes tipos de dados e em diferentes navegadores para garantir que funcionem corretamente.
• Use uma Biblioteca de Formulários: Considere usar uma biblioteca de formulários como Formik ou React Hook Form para simplificar a gestão e validação de formulários. Essas bibliotecas fornecem uma vasta gama de funcionalidades, como gestão de estado de formulário, validação e tratamento de submissão.
• Centralize as Definições de Mensagens de Erro: Mantenha um repositório central de todas as mensagens de erro de formulário para facilitar a consistência e a manutenibilidade. Isso também simplifica o processo de internacionalização.

Conclusão

O hook experimental_useFormState do React, quando combinado com um pipeline de validação bem definido, oferece uma abordagem poderosa e flexível para construir formulários robustos e manuteníveis. Seguindo as melhores práticas descritas neste post, pode criar formulários que são fáceis de usar, acessíveis e internacionalmente adaptáveis. Lembre-se de consultar sempre a documentação oficial do React para as últimas atualizações sobre funcionalidades experimentais.

Construir uma validação de formulário eficaz é um processo de aprendizagem contínuo. Experimente diferentes técnicas e adapte-as às suas necessidades específicas. A chave é priorizar a experiência do usuário e criar formulários que sejam fáceis de usar e confiáveis.