const onSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (trigger()) {
// Envie os dados com segurança
console.log("Form válido!");
}
};
return (
);
}
`
---
🧠 Conceitos
* ValidationProvider: provê o contexto de validação e máscaras.
* useValidation(): acessa a API do formulário atual.
* register(id, onChange, options): conecta qualquer ou {errors?.uf?.error && {errors.uf.message}}
`
---
♿ Acessibilidade
* Exiba mensagens de erro com role="alert" quando aplicável.
* Associe label/htmlFor e id de cada campo registrado.
* Use aria-invalid={errors?.[id]?.error || false} nos inputs para sinalizar estado.
---
🧪 Padrões de uso (UI libs)
$3
`tsx
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
function FieldCPF() {
const { register, errors } = useValidation();
* IDs únicos: o primeiro parâmetro do register é a chave em errors — mantenha-o estável.
* onBlur remove erros: quando o campo volta a ficar válido, o erro correspondente é limpo automaticamente ao perder o foco.
* Controlled inputs: continue controlando seu estado normal; o register apenas adiciona máscara/validação.
* Validação seletiva: use trigger(["campo1", "campo2"]) em etapas do formulário.
---
❓FAQ
Preciso usar useState para todos os campos?
Não é obrigatório. O register já aplica máscara/validação. Use estado próprio se precisar ler valores no ato.
Consigo validar apenas uma parte do formulário? Sim, passe as chaves para trigger(["cpf", "cep"]).
Como limpo mensagens de erro após corrigir o valor? Erros são atualizados em onBlur. Para limpar globalmente, use resetErros(); para casos específicos, resetErros(["id"]).
---
🔌 API Completa (Resumo)
$3
* Aceita children como nós React ou como função (ctx) => JSX.
* Mensagens de erro totalmente customizáveis por regra.
* Hooks utilitários para extrair valores mascarados/limpos.
* Suporte a mais máscaras nacionais.