fix-#77:Refactor Form Validation with react-hook-form & zod #254
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Thank you @ShristiSharan |
|
@ShristiSharan please rebase the branch to latest main |
|
We still have conflicts @ShristiSharan, can you kindly handle this |
I have rebased issue#77 branch from which i raised the PR to refactor-branch(the latest updated one) but no changes or conflicts seems to be resolved here. some help needed to look into it. |
|
Okay when you rebase you have to make sure while resolving 2 files as there are the things giving you problem.
|
|
End goal is the latest things should come and sit in your issue#77 branch. ig it is not directly possible, for that you have to first rebase your local forked main branch with the upstream main Try it, we'll figure out later if you feel too challenging, because it is challenging @ShristiSharan xD Happy learning :) |
Ohkay will try it out to resolve this git challenge(under guidance ) and if it feels too much then will follow the approach to meet the end goal eventually. |
|
Figured out ? @ShristiSharan |
|
@ShristiSharan please refer #83 |
yup!...working on it |
Ohk Sure, i'll look into #83 and discuss with you further as reference drawn |
| @@ -5,6 +5,8 @@ import CategoryPill from '@/components/category-pill'; | |||
| import { createSlug } from '@/utils/slug-generator'; | |||
| import { TestProps } from '@/types/test-props'; | |||
|
|
|||
|
|
|||
|
|
|||
| export default function FeaturedPostCard({ | |||
|
|
||
| const addBlogSchema = z.object({ | ||
| title: z.string().min(3, 'Title must be at least 3 characters long'), | ||
| description: z.string().min(10, 'Description must be at least 10 characters long'), |
There was a problem hiding this comment.
Kindly update the validation as said in the comment
| }; | ||
|
|
||
| // const handleInputChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => { | ||
| // const { name, value } = e.target; |
There was a problem hiding this comment.
Kindly remove this comment
| if ( | ||
| !formData.title || |
There was a problem hiding this comment.
formData please, makes it more readable
|
Once the above is done, kindly update with a small video demonstrating the working of it @ShristiSharan |
|
Kindly take care of the comments in the new PR |
Summary
This PR address
1.Validation schema modification
2.Form validation logic enhancement
3. Image selection Improvements
Description
Added react hook form and zod which helps in validating the input fields and to show the error as user fills the required input field rather than showing error after complete submission.
The validation schema has been updated to include checks for the author's name length and the maximum number of selected categories, image selection, blog title length and description of blog to be posted.
Users now have the option to select an image for their blog post either by providing a URL or uploading a file from their device. Additionally, feedback is provided to the user upon image selection.
Images
Helping user to fill the input as per requirement beforehand:
and once corrected, error gets removed-
Issue(s) Addressed
Closes #77
Prerequisites