💡[Feature]: Enforce schema-based validation for all forms using React Hook Form and Zod #655
Description
Is there an existing issue for this?
- I have searched the existing issues
Feature Description
Currently, form validation across the project is inconsistent and depends on individual implementation patterns. To standardize form handling and improve reliability, I propose enforcing schema-based validation using React Hook Form integrated with Zod for all forms in the codebase.
This feature would introduce a unified form architecture where:
- All forms use React Hook Form for state management
- Validation logic is defined using Zod schemas
- Validation errors are consistently handled and displayed
- Type inference is automatically generated from schemas when using TypeScript
The goal is to create a standardized, scalable, and maintainable form system across the entire project.
Proposed implementation guidelines:
- All form components must use useForm() from React Hook Form
- Validation must be defined using a zodResolver
- Each form must have a dedicated Zod schema
- Shared form components (Field, Label, ErrorMessage, etc.) should be reused
- Form patterns should follow a consistent structure similar to modern design systems
Use Case
Many forms currently implement validation in different ways, which can lead to:
- Inconsistent validation behavior
- Duplicate validation logic
- Increased maintenance overhead
- Higher risk of runtime validation bugs
By enforcing React Hook Form + Zod, developers can define validation rules once in a schema and automatically apply them across the form.
Example scenario:
A login, signup, or profile form can define a schema such as:
- required fields
- email format validation
- password length requirements
This schema then becomes the single source of truth for validation while React Hook Form handles the UI and submission flow.
Benefits
Implementing this feature would provide several benefits:
- Consistent form architecture across the project
- Type-safe validation when using TypeScript
- Better developer experience
- Reduced boilerplate validation logic
- Improved performance due to React Hook Form's optimized rendering
- Easier maintenance and scalability
- Reusable validation schemas
Additionally, this approach aligns with best practices used in modern frontend stacks and design systems.
Add ScreenShots
No response
Priority
High
Record
- I have read the Contributing Guidelines
- I'm a GSSOC'24 contributor
- I'm a IEEE IGDTUW contributor
- I want to work on this issue