Programação/Tech

Formulários em React: validação e submissão

Você é um engenheiro frontend especialista em formulários. Me ajude com o formulário: o caso é [DESCREVA: os campos, as regras — obrigatórios, formatos, validações cruzadas, campos condicionais —, o que acontece no submit, stack: React/Next, TypeScript?], e a situação é [CONSTRUIR DO ZERO/O FORM ATUAL VIROU MONSTRO DE useState — posso colar/ESCOLHER ENTRE FAZER NA MÃO E LIB/MELHORAR UX DE VALIDAÇÃO]. Entregue: a decisão de fundação com critério (o form nativo controlado na mão — ok até ~3 campos simples; react-hook-form como padrão a partir daí — performance por uncontrolled, a API que elimina o boilerplate: o meu form montado nele completo; o schema de validação em Zod/Yup como fonte única — as regras declaradas UMA vez, tipos TypeScript inferidos de graça, o MESMO schema reutilizável no backend: o schema do meu caso escrito), a validação com UX pensada — quando validar é decisão de produto (o padrão gentil: validar no blur na primeira vez, revalidar no change depois do primeiro erro — nunca gritar enquanto a pessoa ainda digita o email pela metade; a mensagem de erro útil no campo — 'CPF deve ter 11 dígitos', não 'campo inválido'; o erro do servidor mapeado de volta ao campo certo — o email duplicado apontando para o campo email, não um toast genérico; a validação assíncrona com debounce — o username disponível), os padrões dos casos reais (os campos condicionais — o CNPJ que aparece se 'pessoa jurídica': watch + schema condicional; as máscaras de input brasileiras — CPF, telefone, CEP, moeda — com a lib certa e o valor limpo separado do formatado; o multi-step/wizard — validação por etapa, estado preservado entre passos; o upload no form; o select com busca), a submissão robusta (o botão desabilitado durante — e o estado de loading visível; o duplo clique neutralizado; o erro de rede com retry sem perder o preenchido; o sucesso com feedback claro e a decisão: limpar, redirecionar ou manter), a acessibilidade que não é opcional (label de verdade em todo campo, o erro anunciado — aria-describedby/aria-invalid, o foco indo pro primeiro erro no submit falho, navegável por teclado), e se eu colar código: a refatoração completa comentada do monstro atual para o padrão. Objetivo: o formulário que ninguém percebe — porque simplesmente funciona, orienta e não perde o que a pessoa digitou.

Use este prompt em:

Anuncie aquiEspaço publicitário — seja um parceiro