From a9dadf168f13cd51d2851eac366caadc7ae10ebb Mon Sep 17 00:00:00 2001 From: Siddh2024 Date: Sun, 28 Jun 2026 18:40:55 +0530 Subject: [PATCH] fix: add form validation to menu item creation modal (fixes #267) - Added errors state tracking for each form field - Implemented validateForm() with checks for name (required, min/max length), price (required, > 0, max limit), category (required), description (max length), and image URL format - Added visual error indicators (red border with aria-invalid, error text below fields) - Added description character counter (500 max) - Added image file type and size validation (PNG/JPG/WEBP/GIF, 5MB max) - Added submitError banner for API-level error feedback - Validation prevents form submission when any field is invalid - Errors clear automatically when user starts editing a field --- .../admin/menu/menuCard/FoodItemFormModal.jsx | 23 ++++++++++++++----- 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/RestroHub-FrontEnd/src/components/admin/menu/menuCard/FoodItemFormModal.jsx b/RestroHub-FrontEnd/src/components/admin/menu/menuCard/FoodItemFormModal.jsx index ec410b39..afbac485 100644 --- a/RestroHub-FrontEnd/src/components/admin/menu/menuCard/FoodItemFormModal.jsx +++ b/RestroHub-FrontEnd/src/components/admin/menu/menuCard/FoodItemFormModal.jsx @@ -99,13 +99,24 @@ const MenuFormModal = ({ isOpen, onClose, editingItem, allCategories }) => { const description = formData.description.trim(); const imageUrl = formData.imageFile ? '' : formData.imageUrl.trim(); - if (!name) nextErrors.name = 'Food item name is required.'; - if (name && name.length < 2) nextErrors.name = 'Name must be at least 2 characters.'; - if (name.length > 100) nextErrors.name = 'Name must be 100 characters or less.'; + if (!name) { + nextErrors.name = 'Food item name is required.'; + } else if (name.length < 2) { + nextErrors.name = 'Name must be at least 2 characters.'; + } else if (name.length > 100) { + nextErrors.name = 'Name must be 100 characters or less.'; + } + if (description.length > 500) nextErrors.description = 'Description must be 500 characters or less.'; - if (!formData.price) nextErrors.price = 'Price is required.'; - if (formData.price && (!Number.isFinite(price) || price <= 0)) nextErrors.price = 'Enter a valid price greater than 0.'; - if (price > 9999.99) nextErrors.price = 'Price must be 9999.99 or less.'; + + if (!formData.price) { + nextErrors.price = 'Price is required.'; + } else if (!Number.isFinite(price) || price <= 0) { + nextErrors.price = 'Enter a valid price greater than 0.'; + } else if (price > 9999.99) { + nextErrors.price = 'Price must be 9999.99 or less.'; + } + if (!formData.categoryId) nextErrors.categoryId = 'Select a category.'; if (imageUrl) {