React Hook form, including ZOD schema validation

okay guys so in this video we'll be doing a quick tutorial on react hook form that is how to handle forms in react using the react hook form library in this video I will be showing you two approaches to use the react hook form one is to use the plain vanilla react hook formula library and the other one would be to use it with a validator something like Zod so that's also what we are going to do in the second part of the video so for this tutorial what I've done is this that I've created this project on GitHub that is reactive form tutorial and if you want to follow along with me you can simply clone the startup project or you can simply switch the branch called starter project because after this video I will be putting in two more branches that is the main branch that contains all the source code of the completed application so you can simply go here as you can simply like click here that is code and then you can simply clone this repo and you can switch to a starter project so without wasting any time let's see that what do we have in this project so if you open this project inside vs code we see that we have a couple of dependencies here and I'm simply using Tailwind here just to make the make the firm look much better and the only dependency we have here apart from react is the react hook form which is like required for building forms with react hook form and now if you go to the app.jsx file we see that we have a very basic form here like we have this very basic form element here HTML element here and then we have a couple of divs in here and then we have a submit button here as you can see on the right side and if you open this div that is the first input field we see that we have an input with type of text name is first name and then the placeholder is first name and then we are simply splitting out the paragraph tags which says that first name is required and this red color is coming because of this Tailwind class so until now I have not done anything regarding react hook form so let's say that how do we dynamically show these messages that is this field is required that this last name is required and this email should be a valid email address so let's see that how do we do all that using the react hook form so the first thing we need to do we need to import use form from reactive form so we can say from reactive form and what do we need to import we need to import the use form simply like this because as the name suggests it it it works with hooks so we can simply say cost something equal to use form and this takes in a couple of options so firstly though it is not required but I always advise you to pass in the default values for all the fields that you want to validate with this with this hook form so let's say we have in the here three fields that is first name last name email and in the same way we have the names for these fields that is name first name and the second input field has a name of last name and the third input field has a name of email here so for now let me simply comment out this email thing because I would be coming to this later on and now we have this thing here that is this thing and I need to keep my application running so let me do npm run Dev and now we see that we only have these two Fields first name and last name and we want to validate the form before submission so what do we need to pass in here the first option that we can pass in here though it is not necessary I would pass in here default values because it provides that with better Auto completion for our form Fields later on which we which we will see in a moment and the default values for first name would be an empty string and the default value for the last name would be an empty string like so and now this hook form returns us with an object and we are simply restructuring the object with the following fields that is we have a form State here then we have a register here function here then we have the handle Summit function here and we have a couple of more things that is set value and get values which I would be coming to that later on and now in this form State we want to Simply extract out the error object or the errors object which we have that is when we are validating the form that is we want this first name to be required and the minimum length of the first name should be like greater than three characters so in case if that is not fulfilled by our input component then OE would be simply splitting out the error message here and that is what is contained inside this errors object here that is that we are destructuring from the form state so let's save this so we have like better formatting Here and Now what we need to do we need to go to the each of the input fields and we need to register the values for these for these names here so what I need to do I need to go to my input field and here I can simply say I want to spread out the register function like this and here we need to pass in the name of the field and in our case the name of the field is first name so as we see here that we get Auto completion and it is because we have provided in here the default values had it had had we not provided in the default values here then we would not be getting this Auto completion here so now we provide in the first name here so now we have registered the first uh field called first name but as at the same time we see that we are getting a red squiggly line here that says that name equal to first name and this is because when we spread out this register a function here with the first name it already contains the name attribute here that contains the name equal to first name so therefore it is giving me an error or it is like simply screaming at me that we have provided in two attributes to this input field so what I need to do I need to Simply comment it out I need to Simply remove it out from here because that name equal to first names comes from this eraser thing here and now what more we can do we can pass in some options to this thing here that is to this register function and that would be like the validation function so we want this field to be required so we can simply say required to be true like this and in the same way we want to register our last name field also so we can say register and in the same way we simply need to remove this uh we want to provide in the name field here so we simply providing the last name here and then we can simply remove this name from here so if we save this and then what do we want to do we want to get rid of these first name is required and last name is required because you want to conditionally show them so what we can do we can take this errors object here that is this errors objects that is D structure from the form state which is restructured from the return value from this use form hook so now what we can do we can use this error object uh here inside this before inside this paragraph or like before this paragraph so that we can conditionally show that so we can say errors DOT first name if there are errors in the first name then only we want to render out this paragraph tag and instead of providing in our own message here what we can do we can simply spit out errors DOT first name Dot message like this because this first name Dot message contains the actual error message and in the same way what we can do we can again copy this and instead of spitting out last name is required we can conditionally spit out last name is required depending on whether there is a error in the last name field and then only we want to display out the message so that's all what you need to do to make your hook form working so if I save this application we see that our errors are gone and we have simply placed older values so let's say if we simply click on submit here so we see that we are still reloading the page because we have not you utilized this handle Summit function here because currently the form is submitting to the same route so what we need to do here inside the form we need to say on Summit that is on Summit we need to do something and here we can simply pass on this handle Summit function here so handle submit and this takes in data or let's say call let's call it values and here what I need to do I'll simply alert I'll simply do an alert here that simply spits out the values here so let me do it like this so Json Dot a stringify values comma null comma 2 simply like this and now if I click on submit we won't be submitting it to the same page but instead we would be simply getting the values here inside the handle Summit function here which is called from the onsummit event of the form so if I click on submit here we see that we are getting some errors here but we are on we are not able to see those errors here because we see that something is missing inside the message here that is this message here so instead so what we can do if we simply open the log statement here and we simply log out the errors object here so console.log errors like this and we re reload the form we see that currently our error object is an empty string empty object but as soon as you click on submit we see that we get an error object here uh that is this error object and we see that the type is required and we see we have an empty message here so if you like simply uh if you're simply like doing uh that this field is required you can simply instead of spitting out errors.firstname Dot message you can simply like do it like this that is uh uh last first name is required first name is required like this and if you save this we see that we get this error message here so currently we do not have any error message but as soon as you click on submit we see that we get this error message that is first name is required so a better approach to do this would be like instead of Simply printing out a static error message would be to like conditionally show the error messages depending on what kind of error it is so currently we only have this validation here that is required to be true but there might be a case that you want this first name to be of minimum length so let's say we provide here Min length would be let's say 4 and if we save this firm and if we still reload the page and if we submit here we see that we are still getting the message here that is first name is required so a better approach would be to like pass in the messages here as well so to do that what we need to do so after the required statement instead of passing in true here what we need to do we need to say value would be true and then the message would be this thing here that is first name is required so let me go here and let me paste it here like this and for the same in the same way for the minimum length we can simply say value uh to be let's say 4 and the message would be first must be 4 4 4 here charts and length like this and now we can simply uncomment this errors.firstname Dot message because this error object would contain the message here because of this message here so if I save this and if we open this thing here we see that we may need to like reload the form and now if I open the thing here and we see that currently oh we do not have any error and if we simply click on submit here we see that we get this message here that is first name is required and if you open this thing here we see that we are getting this message here that is first name is required which is directly coming from this message object or from this message property here so let's say we fill in two letters here that is TR and as soon as if filled in TR we see that we are getting this message here that is must be four characters in length because this field is still not valid because it needs to be of minimum of four characters so let me provide in five and we see that this error is gone for the last name if I simply provided methyl uh if I click my console and I simply do Summit we see that we get a uh we get an alert here that says first name is truly last name is metal and that's my name so we see that our form handling is working and whatever you want to do you can do with these values here so for now what I'd I'll do I'll simply copy these two fields that is required in minimum length and I'll put it here inside this thing here that is in the last name also like this so instead of first it should say last uh if I save this we are getting this thing here working so just ignore these form values as of now so if I save this and if I reload the page and if I sum it we see that first name is required last name is required and if I reload the page and if I touch this field that is first name and if I blur out from this field and go to the last name we see that we are not getting the error message when we simply brought out from from the field so to do that to make that happen what you need to do you need to pass in one more option to this use form hook and that is mode and I suggest you that you can go to the prop or to the properties that you can pass inside that user former thing but for now let me simply go to this thing here and use form here and you can simply go to this thing here and you can pass in this you can check about more about the mode property but in my opinion you should be good to go if you simply provide the mode to be all like this and it simply means that when the validation should occur so let me go back and here I'll simply provide in all here so if I save this if I reload the page I touch this field first name and as soon as I blur out from this field and I touch the last name field we should be getting the error message here that is first name is required as you can see here and if I again go back to the first name we see that last name is required and again R from error handling is working like this and like so now one more thing that is by default they have some like uh some like very basic validation so we can also pass in max length here like this and here let me say max value would be 10 and message would be too long let's save it and if I reload the page let me provide in this thing here and as soon as as I as I go beyond 10 characters we see that we are getting this message that is too long and we won't be able to submit the form until unless the form form fields are validated option so now let's say you want to validate an email address so let's come uncomment out this thing here let's save this and and what I'll do for the first name and last name I'll simply provide in some default value so that I can focus on I can focus on this thing that is email and as soon as I save this and I reload the page we see that the default values that is first name and last name that is truly and methyl automatically gets populated inside the respective input Fields as we can see here so that is the use case of default values if you want to provide some default values to your fields and again we need to have one more field here that is email and that would be an empty string as of now and this email should be should be like registered here so let me simply do register and here we need to Simply do email and for the validation of this input field what I will be doing instead of uh doing this required in Mineral length and like doing all the gymnastics ourselves I would be simply using a regular expression and just don't worry because like later on in the video like in five minutes we'll we will be using a library called Zod to do automatic form validations so we can go to this thing here and we can simply search for email reject so email regex uh I can go to this link whatever link or whatever rejects a regular expression you can find out for to validate email and I'm simply going to copy this rejects from here and now let me go back to my email to my this thing and here or you can pass in with some options here and here instead of required or main length I would simply provide in pattern here and in the same way the value of the pattern would be like this rejects here and we do need to escape these with this thing here and then we need to provide in the message here that is email should be a valid email should be a valid email like this and now we need to conditionally display the error so again we can do the same thing errors dot email if there are errors in the email then we spit out the this error message and we can simply see uh or we can simply throw out the error that is errors dot email Dot message like this so if we save this we see that we have this thing here but the email field is not populated because it's an empty string initially uh now what I can do I can simply pass in an email so let me so Tru and oh we get this error that is email should be a valid email so if I do fully uh Juliet gmail.com we see the error is gone and if I submit we see that our email is a valid email and as soon as I like change it to something that is not a valid email or if I do something like truly hash at gmail.com we see that we are not this field is not validated by this regex pattern so if you simply want to copy this rejects you can simply copy this rejects from the repository otherwise you can you like pass in any rejects or like pass in anything or any type of field validation you want using the pattern thing here like this is the thing you want to go with if you are not using a library called sword or something like that so this is all about this thing here so now let's see that how do we handle like this form validation using the Zod Library so for that what I need to do I need to like install one more dependency and that is called at hook form resolvers so for that what I'll do is simply stop the application so to install the library you need to install this Library called ad hook form resolver so let me copy it from here or let me simply copy this thing from here and we can go back and here what we need to do we need to Simply paste it here and we need to install this Library and again I'm using Zord here but still uh you can use any like uh validation Library like Joey or yep for this hook form but like Zod is the thing of the day so we are focusing on Zord as of now so what we need to do we need to Simply import a resolver function from this hook form resolvers so let me go back here and what let me start the application and let me do npm run Dev the application is started and here what we need to do we need to import something from I took from resolvers forward slash result and as you can see that you have a couple of more thing here that is Joey as I told you we have I don't know much about other thing but we have Yap here but we are focusing on Zodi care so we can simply say Zord resolver like this and in the similar way the first thing we need to do we need to Define our schema for Zod so to use sort in your application you also need to install zolt as a dependency inside your application so what we need to do we need to say npm I Zord like this and it would take a couple of seconds so let me do npm run div let me minimize the terminal and here what we can do we need to do import something from Zod IP but Zod and here we need to import Z from Zod oops so yeah so we need to define a schema for this first name last name and email so you can Define the schema anywhere inside your application so I am simply defining it outside this app functional component so we can say const form schema equal to Z Dot object and here we need to provide in the things that we need to have validation on so we need to provide in first name and it should be a z dot string dot Min and here we need to provide the minimum length so let's say 4 if you want to provide in the message custom message that is uh I'm in four charts like this and we can also provide in Max here so we can simply say Max should be HR so we can simply say Max HRS like this and in the similar way we can simply Define the schema for the last name we can simply say last name or the validation rule for the last name so we have the similar validation Rule and for the email it should be like much easier so Z dot email or it should be Z dot string dot email dot required or it should be an email like this so if we save this we have no changes here but what we can do we can pass in our own resolver here inside the use form hook so what we can do after the mode we can say resolver should be this thing here that is the zot resolver which is like removed from here so we can simply say import uh sword resolver or we can say from I took from resolvers Resort and this should be a zot resolver and here we can copy this Dot resolver from here we can pass in the Zod resolver and here inside this we can simply pass in the form schema that we defined above that is this form schema and now what we can do we can simply get rid of all these validation rules that we have applied to our register function so we can simply get rid of this thing from here in the same way we can get rid of this thing from here from the last name also we are simply registering the values as first name as last name and in the same way we can get rid of this pattern validation from this email thing from here so if I save this and if everything I've done is right then we should be getting like let me also remove this default values so if I save this and if I have done everything right we should be having a working form here so let me reload the page we see that we have a first name or we touch it we blur out we should say see that we have this man 4 character that comes from the Zod schema and let me put in those four characters and if I go beyond eight we get again an error for the last name we blowout we get the error so we say metal uh if we go more we see we get an error and currently we have an invalid email so let me provide in an email here so truly uh it's still an invalid email and you see that it is like a default message coming from sort that says that invalid email but we can provide our own custom message as well so let's say we say gmail.com and as soon as I write.com we see that all the errors are gone and I've simply submit here we see that we get this message here that is first name last name email inside this alert box so now let's come to this thing here that is this what is this form values here so before going to before getting the form values we can get the firm values using one more one more property that is exported from this use firm hook and that is get value so we can simply say get values like this like this and here we can simply use the get values thing from here and here we can simply pass it pass that thing here that is get values inside this Json dot stringify string E5 which is like rendering out this piece of code so if I save this we see that we have the default values here and if I pass in my thing here and if I sum it here we see that we have these form values here and if you want to see the values as soon as they are typed inside the inside the fields what you can do instead of get values you can again use this watch function from here so you can see simply use watch and you can put in watch here and it would like make your renders again and again so as soon as I type we see that we are getting Auto completion inside the form values here that simply gets you the current form state so you can see that we are getting the current form State like this but this state does not mean that the values are 100 valid because we see that we are getting these form values but the values are still not valid because we have an invalid email so to get the values the best thing would be to use the form values then this watch function should be like only used if you want to watch the values as soon as they are type inside the input fields so now let me show you one more thing and that is set value that is set value like this so let's say somehow you want to set a value of a particular field from outside the form so let's say we have this form a set value of the set value function here from this exported from this use form so what we can do we can use the set value function from from some button so let me simply copy this button from here and let me put it outside this form here like this and let me simply give it a color of red and this should be like red like this and let me also give it red and this should be like a set value of form of first name so first a name like this so we have this button here but currently does nothing so what we can do we can like minimize this thing and here what we can do we can have an on click event handler on this button so on click if you want to do something and that something would be to use the set value function and set the value of the first name or any any field you want any field you want to like uh have here first name would be like let's say Mafia like this so if I save this and if I reload the page and if I click on this button here that simply sets the value on this first name field Watch What Happens so if I set the value of first name we see that we have this field populated from the set value function here so this is again something if you want to use if you are using some kind of Google Maps and if you want to like get the latitude and longitude of a particular position and then you want to pre-fill the form with that thing by Google Map event handler so then you can use the set value thing here and I guess that I've covered each and everything about this react hook form like using the plane validations and using with sort validation using the Zod Library so that's all about this video and if you like the video do hit the like button and if you haven't subscribed to the channel do subscribe to the channel because I guess that if you have made it so far I guess that you like the video please help by liking the video and subscribing to our Channel and and press the Bell icon for notifications about the channel uploads so thank you bye Tata take care and have a good day and have a great day

Channel: Mafia Codes

Views: 2,427

Keywords: mafiacodes, handle forms in react, react hook form, react hook form zod validation, zod validation, how to use zod, email validation

Id: qxly_DXAvvE

Length: 27min 11sec (1631 seconds)

Published: Mon Feb 06 2023