auto-form-validator
Version:
A smart, zero-setup form validation library for React with automatic rule detection, i18n support, async validation, and UI integration helpers.
137 lines (98 loc) • 5.13 kB
Markdown
[](#contributors-)
A smart, zero-setup form validation library for React with automatic rule detection, async support, i18n, and UI integration helpers.
---
- 🧠 **Smart Defaults:** Automatically detects validation rules from HTML attributes like `required`, `type`, `minLength`, and more — no need for verbose schemas.
- ⚙️ **Flexible Validation:** Supports both inline JSON schema and automatic rule detection from your markup.
- 🔄 **Async Validation:** Easily add asynchronous rules such as API checks (e.g., username availability).
- 🌐 **i18n Support:** Built-in multi-language error messages, making it easy to internationalize your forms.
- 💅 **UI Helpers:** React hooks and components to simplify error handling and display.
- 🚀 **Zero Setup:** Get started quickly without writing long Yup or Zod schemas.
---
## Why auto-form-validator?
Traditional validators like Yup or Zod require explicit schema definitions and can add boilerplate, especially for simple forms or dynamic validation needs. Here’s how **auto-form-validator** stands out:
| Feature | auto-form-validator | Existing Validators (Yup, Zod, Validator.js) |
|-------------------------|---------------------------------------|----------------------------------------------------|
| **Setup** | Zero-config rule detection + schemas | Mostly manual, schema-first |
| **Smart Defaults** | Auto-detects from HTML attributes | None |
| **Async Validation** | Built-in support for async API rules | Limited, often complex |
| **i18n Support** | Multi-language errors included | Usually requires separate setup |
| **UI Integration** | React hooks + error display helpers | External integrations required |
| **Bundle Size & Speed** | Lightweight, React-optimized | Bulkier, generic |
---
## How It Works
- **Define** an optional validation schema or rely on auto-detected HTML attribute rules.
- **Use** the `useAutoValidator` React hook to register inputs, validate on change or blur, and validate the entire form on submit.
- **Access** real-time error messages and form validity status through the hook’s API.
- **Extend** with async rules and internationalized error messages easily.
---
## ⚡️ Quick Example
```tsx
import React from "react";
import { useAutoValidator, ErrorMessage } from "auto-form-validator";
export default function SignupForm() {
const { register, errors, validateForm } = useAutoValidator();
const handleSubmit = async (e) => {
e.preventDefault();
const values = {
username: e.target.username.value,
email: e.target.email.value,
};
const isValid = await validateForm(values);
if (isValid) {
alert("Form valid! Submit logic here.");
}
};
return (
<form onSubmit={handleSubmit}>
<input name="username" required minLength={3} {...register("username")} />
<ErrorMessage name="username" errors={errors} />
<input name="email" type="email" required {...register("email")} />
<ErrorMessage name="email" errors={errors} />
<button type="submit">Register</button>
</form>
);
}
```
🔄 Async Validation
-------------------
You can create dynamic async validators with helper functions:
```tsx
import { createUsernameAvailableValidator } from "auto-form-validator/asyncValidators";
const schema = {
username: {
required: true,
async: createUsernameAvailableValidator(async (username) => {
// Simulate API call
const taken = ["admin", "mehek"];
return !taken.includes(username);
}, "Username is already taken"),
},
};
```
🌍 i18n Support
---------------
Supports multi-language error messages (default: English + Hindi):
```tsx
const { register, errors } = useAutoValidator(schema, "hi");
```
You can also define your own messages:
```tsx
const customMessages = {
required: "Custom required message",
minLength: (n) => `Custom: minimum ${n} chars`,
maxLength: (n) => `Custom: max ${n} chars`,
pattern: "Custom pattern failed",
async: "Custom async failed",
};
```
Real-World Benefits
-------------------
* **Less boilerplate:** No need to write long Yup/Zod schemas unless you want to.
* **Faster dev experience:** Auto-detection reduces setup time.
* **Async & complex validation:** Easily add API-backed validations (e.g., username availability).
* **React-friendly:** Designed as hooks and UI helpers for React apps.
Contributing & Feedback
-----------------------
Contributions are welcome! Feel free to open issues or PRs. Your feedback helps improve the package.