Refactor Form vailidation using the react-hook-form and zod

[geetanjalichawla]

Description

1. Getting values in and out of form state
2. Validation and error messages
3. Handling form submission

we can use formik or useform library for the validation

why Formik ?

Formik keeps track of your form's state and then exposes it plus a few reusable methods and event handlers (handleChange, handleBlur, and handleSubmit) to your form via props

Formik and useForm are the mostly used library and it can handle a lot of things very good for learning prospective also

Current Behavior

1. There are no validation of the title of the post like there should be minimum 3 char for the title.
2. There are no validation for the author name which maybe we can handle with the authentication but still it should have minimum '3 character in a author name '
3. Required error is not shown before clicking on the submit Button

Proposed Enhancement

The validation help us to post the right type of data in the blog post we need also can reduce the chances of wrong and trash data by adding some validation like if we want email then this should have some patter text@domain-name.topleveldomain like in,co,com etc

Attachment

[MrBlackGhostt]

@geetanjalichawla

I've gained expertise in React and would love to contribute to the project. I've identified form validation issue #77 and am eager to resolve it. Could you please assign this issue to me? I'm committed to delivering a solution aligned with project standards.

[geetanjalichawla]

@krishnaacharyaa

[MrBlackGhostt]

@krishnaacharyaa can you assign me this issue #77

[krishnaacharyaa]

@MrBlackGhostt, how are you going to solve the issue and kindly give me time estimate

[MrBlackGhostt]

installed the formik library and it tells the title should be 3 min char so I use the validate. length > 3 by doing so it will validate

[krishnaacharyaa]

@geetanjalichawla @MrBlackGhostt,
I believe for our project we can work on react hook with zod form instead of formik.
Kindly refer: https://youtu.be/u6PQ5xZAv7Q?feature=shared

@MrBlackGhostt, let me know if you are confident to take this up, it is a little task intensive in my opinion, you can take up others issues as well to start from

[MrBlackGhostt]

@krishnaacharyaa I am confident that I can take the issue and solve it

[krishnaacharyaa]

Okay @MrBlackGhostt assigning it to you, follow the YouTube link as above and make the required changes ...
Let's stick to react hooks + zod with server side errors

[MrBlackGhostt]

@krishnaacharyaa
put the validation on the blog title and author name can you please check it

12.07.41.PM.mov

[krishnaacharyaa]

Let's discuss on the Discord channel, that's convenient for both of us

[MrBlackGhostt]

don't find the discord channel link in your profile it only Twitter StackOverflow LinkedIn, not discord

[krishnaacharyaa]

In project readme

[MrBlackGhostt]

join the Discord server i am read to discuss

[MrBlackGhostt]

Screen.Recording.2023-12-14.at.6.16.18.PM.mov

@krishnaacharyaa now error shows on clicking the button if the word on either author or title or both its show the message below the input also add the margin-top the error show last is because i don't run the mongo not its run perfectly please check

[krishnaacharyaa]

@MrBlackGhostt great improvement, thank you for the quick fix, just a couple of observations, let's kindly discuss in the discord.

[MrBlackGhostt]

@krishnaacharyaa In discord server I uploaded a video of Form plz check it.

[krishnaacharyaa]

@MrBlackGhostt, kindly follow this style of commit message and PR title: #67

[krishnaacharyaa]

@MrBlackGhostt , Do you wanna finish this? It is almost 80% done to be honest... @geetanjalichawla if you find it interesting, can you just kindly work with him, so that we can close this....

[MrBlackGhostt]

yes

[krishnaacharyaa]

@MrBlackGhostt please work on the comments, as far as i remember, the added functionalities were working just perfect, but it was breaking the exisiting features, Can you add one by one validation , so that you get a grip and can succesfully finish this, Feel free to take help from the discord.

[krishnaacharyaa]

@MrBlackGhostt kindly confirm.... Else will try deligating it.... If you have other priority work....

[MrBlackGhostt]

Sorry @krishnaacharyaa I am little busy i love to contribute but did not make the time

[devsharmagit]

so @krishnaacharyaa this is not finished yet?

[krishnaacharyaa]

I am not hearing from the guy who was working.
You can start this, And kindly raise PR with commit and PR guidelines.
I had to decline a PR because of it, as warned 2 times :) @devsharmagit

[devsharmagit]

@krishnaacharyaa
okay, I will check and see what has been implemented and whats needs to be added.

[ShristiSharan]

I'm interested to work upon it.
@krishnaacharyaa Kindly assign this task to me.

[krishnaacharyaa]

@ShristiSharan can you kindly let us what is the update, if you are inactive, someone else will take it.
Will wait for another day for the reply.