Improve form validation and accessibility

[kumudasrip]

Closes #41

• Summary: Add consistent client-side validation, accessible per-field error messages, ARIA attributes, and visual error highlights for public and admin/profile forms. This improves UX, prevents invalid submissions client-side, and keeps server-side flows unchanged.
• Changes:
  • Validation & Accessibility: Added fieldErrors/errors handling, aria-invalid/aria-describedby, and inline error elements.
  • Relaxed Login rule: softened overly-strict password regex to a minimum-length rule to avoid blocking existing users.
• Files touched:
  • src/components/customer/ReservationsSection.jsx
  • src/pages/public/Login.jsx
  • src/components/admin/upi/UPIFormModal.jsx
  • src/components/admin/menu/menuCard/CategoryFormModal.jsx
  • src/components/admin/menu/menuCard/FoodItemFormModal.jsx
  • src/components/admin/store/tables/TableFormModal.jsx
  • src/components/admin/store/branch/BranchFormModal.jsx
  • src/components/admin/profile/profileComponents/PersonalInfoCard.jsx
  • src/components/admin/profile/profileComponents/SecurityCard.jsx
• Testing:
  • Ran development server and exercised these forms to verify: inline errors appear, inputs get visual red border when invalid, ARIA attributes link to error text, and valid submissions still call the same API endpoints.
  • Quick commands:

npm install
npm run dev
# Open app and test Reservatons, Login, UPI, Category, Menu Item, Branch, Table, and Profile forms

[kumudasrip]

Hello @rdodiya
I have merged this PR for the issue #41 under GSSoC 2026
Please do review and merge the PR whenever possible, thank you!

[kumudasrip]

Hello @rdodiya ,

Just following up on this PR. Since it affects several commonly used form components and there are currently no merge conflicts, an early review/merge would be very helpful. It would make the validation and accessibility improvements available for future contributions and help avoid potential conflicts as development continues.

Thank you for your time and consideration. Looking forward to your review!

[kumudasrip]

Hello @rdodiya
I have merged this PR for the issue #41 under GSSoC 2026
Please do review and merge the PR whenever possible, thank you!

[Copilot]

Pull request overview

This PR improves client-side form validation and accessibility across public and admin/profile forms by adding consistent per-field error handling, linking error text via ARIA attributes, and visually highlighting invalid fields; it also relaxes login password validation to avoid blocking existing users.

Changes:

• Added fieldErrors / errors state and inline per-field error rendering with aria-invalid + aria-describedby.
• Added/standardized visual invalid styling (e.g., red borders) across multiple modals/cards.
• Relaxed login password validation away from strict complexity rules.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
RestroHub-FrontEnd/src/pages/public/Login.jsx	Relaxes login password validation rules.
RestroHub-FrontEnd/src/components/customer/ReservationsSection.jsx	Adds client-side validation and accessible inline error messaging to reservations form.
RestroHub-FrontEnd/src/components/admin/upi/UPIFormModal.jsx	Adds per-field validation, ARIA attributes, and inline errors for UPI modal inputs.
RestroHub-FrontEnd/src/components/admin/menu/menuCard/CategoryFormModal.jsx	Adds client-side validation and ARIA-linked error messaging for category creation.
RestroHub-FrontEnd/src/components/admin/menu/menuCard/FoodItemFormModal.jsx	Links existing errors to inputs via aria-describedby + stable error element IDs.
RestroHub-FrontEnd/src/components/admin/store/tables/TableFormModal.jsx	Adds client-side validation and per-field accessible error messaging for table form.
RestroHub-FrontEnd/src/components/admin/store/branch/BranchFormModal.jsx	Adds client-side validation and per-field accessible error messaging for branch form.
RestroHub-FrontEnd/src/components/admin/profile/profileComponents/PersonalInfoCard.jsx	Adds client-side validation and per-field accessible error messaging for profile personal info.
RestroHub-FrontEnd/src/components/admin/profile/profileComponents/SecurityCard.jsx	Connects password field errors to inputs using aria-describedby + error IDs.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[kumudasrip]

@rdodiya , I have resolved the suggestions..
Please do review and merge the PR whenever possible, thank you!