React Form Validation Hook

Uma biblioteca leve, poderosa e extensível para validação de formulários em React com suporte a atributos HTML e validações customizadas.

✨ Destaques

- Validação baseada em atributos (required, type="email", data-*)
- Mensagens de erro globais, multilíngues e personalizáveis
- Possibilidade de definir mensagens específicas por campo
- Regras customizadas com addValidationRule
- Suporte a campos de texto, email, checkbox, file, e mais
- Pronto para usar com Tailwind CSS (ou qualquer outro estilo)

🚀 Instalação

``bash
npm install react-form-validator
`

🔧 Uso Básico

`tsx
import React from "react";
import { useFormValidation } from "react-form-validator";

export default function MyForm() {
const { formRef, errors, validate } = useFormValidation();

const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (validate()) {
alert("Formulário válido!");
}
};

return (

{errors.email &&

{errors.email}

}


{errors.name &&

{errors.name}

}



{errors.confirm &&

{errors.confirm}

}


{errors.avatar &&

{errors.avatar}

}

Enviar

);
}
`

🌍 Idiomas

Você pode definir o idioma padrão e mensagens customizadas por campo:

`tsx
useFormValidation({
lang: "en",
messages: {
en: {
email: {
required: "Email is required!",
email: "Enter a valid email!",
},
},
pt: {
name: {
onlyLetters: "Somente letras, por favor.",
},
},
},
});
`

🧩 Validações Disponíveis

| Atributo | Descrição |
|-------------------------|------------------------------------|
| required | Campo obrigatório |
| type="email" | Validação de email |
| type="file" + accept| Validação de tipo de arquivo |
| data-validate="rule" | Regras customizadas como onlyLetters |
| data-equals-to="name" | Campo deve ser igual a outro |
| minlength | Tamanho mínimo (minLength no HTML) |
| maxlength | Tamanho máximo (maxLength no HTML) |
| pattern | Expressão regular (pattern no HTML) |

✍️ Adicionando Validações Customizadas

`tsx
import { addValidationRule } from "react-form-validator";

addValidationRule("even", (value) => parseInt(value, 10) % 2 === 0, {
pt: "O número deve ser par.",
en: "The number must be even.",
});
`

🛠️ Mensagens Padrão Customizadas

Você pode sobrescrever mensagens padrão para todos os campos:

`tsx
useFormValidation({
lang: "pt",
defaultMessages: {
pt: {
required: "Preenchimento obrigatório!",
},
},
});
``

📦 Pronto para produção