Skip to content

feat: #399 [Frontend] Form Validation and Error Handling#475

Open
amankoli09 wants to merge 1 commit intoArena1X:mainfrom
amankoli09:feat/issue-399-form-validation
Open

feat: #399 [Frontend] Form Validation and Error Handling#475
amankoli09 wants to merge 1 commit intoArena1X:mainfrom
amankoli09:feat/issue-399-form-validation

Conversation

@amankoli09
Copy link
Copy Markdown
Contributor

Summary

Closes #399

Implements consistent form validation and error handling across all forms using React Hook Form + Zod.

New Files

frontend/src/lib/validations.ts

Centralised Zod schemas for all forms:

  • loginSchema — email + password (min 8 chars)
  • signupSchema — first/last name, email, password strength rules, confirm password match
  • contactSchema — name, email, category, subject, message (min 20 chars)

frontend/src/component/FormField.tsx

Reusable form primitives shared across all forms:

Component Purpose
FormInput Input with label, inline error, success state
FormTextarea Textarea with label + inline error
FormSelect Select with label + inline error
FieldError Red error message with icon
FieldSuccess Green success message with icon
SubmitButton Loading spinner + disabled state
FormSuccessBanner Full success panel with reset CTA
FormErrorBanner Full error panel with retry CTA

Updated Pages

Page Changes
login/page.tsx RHF + Zod, inline errors on touch, loading state, success/error banners
signin/page.tsx RHF + Zod, password strength meter, confirm password validation, all states
contact/page.tsx Replaced manual validate() with Zod schema, uses reusable components

Dependencies Added

  • react-hook-form
  • zod
  • @hookform/resolvers

Checklist

  • Validation library chosen (React Hook Form + Zod)
  • Reusable form components created
  • Validation implemented on all forms
  • Consistent error message styling
  • Inline validation (on field touch)
  • Success states
  • Loading states during submission

@vercel
Copy link
Copy Markdown

vercel bot commented Mar 29, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
insight-arena-4rll Error Error Mar 29, 2026 9:44am

@drips-wave
Copy link
Copy Markdown

drips-wave bot commented Mar 29, 2026

@amankoli09 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

- Add react-hook-form, zod, @hookform/resolvers dependencies
- Create frontend/src/lib/validations.ts with Zod schemas for
  login, signup, and contact forms
- Create frontend/src/component/FormField.tsx with reusable components:
  FormInput, FormTextarea, FormSelect, FormLabel, FieldError,
  FieldSuccess, SubmitButton, FormSuccessBanner, FormErrorBanner
- Refactor login/page.tsx: inline validation, loading state, success/error banners
- Refactor signin/page.tsx: inline validation, password strength meter,
  confirm password match, loading state, success/error banners
- Refactor contact/page.tsx: replace manual validate() with Zod schema,
  use reusable form components throughout
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Frontend] Form Validation and Error Handling

1 participant