A complete form validation with Zod and React hook form

hi what's going on guys welcome back to my channel so in this video we're going to create a form and we're going to create validations with reactive form and the Zod Zod is a new pretty new library for handling schema validations for creating schemas basically so if you go to the Zodi docs let's say here typescript first schema validation with static type insurance so as I heard uh Zod support typescript very well so I decided why not to try it and create this pretty simple form to test it and of course we're going to integrate it with reactive form which is at the moment the best form management Library so we're going to use the reactive form library and everything will be connected with material UI so you will learn how to integrate reactive form with components UI libraries like material UI so let's go back to the form and let me show you some validations that we have so if I click on submit let's see that I already have all the validations uh not passed so basically you can see all the errors that I wrote here there are some custom there are also some custom validations that you will see uh in a moment but there are first let's uh let's go through the simple ones so we can see that name over here so let's write the test and you can see in real time the arrow is gone if I delete it and make it one character the arrow is updated in real time so let's say test the email is going to be like this password is going to be one two three four five now let's create for example a password that is not matching so one two three four five six now when when I will submit this form one more time if I clear all this basic errors you will see the custom errors that I made so one of the customers is to check if the password is going to be equals to the confirm password another custom error is I'm checking if the user is under 18 years old so this one is pretty cool so I hope you like this one and the general so gender I think it's also simple one so it should go away and we have this accept terms and conditions that I that I'm still not getting at all so only when I clear all the simple arrows I will go zot form will check the customers which is something that I didn't like much I I wish like it it would check these customers with the simple levels but anyway it's you will see that this library is very very cool all right now let's set the age so let's say that my age that I was born I don't know uh on one and nine one nine nine uh three for example so this user should be um older than 18 years old now let's accept this form submit this form now you can see that I'm getting the more custom validations the more complex one that I made so first of all I'm checking that the user sending true or accept terms and conditions so I need to check this checkbox and now the server was gone and for the confirm password password do not match there is also something custom that I'm checking the password with the confirmed password so let's delete this one and now let's try to add a user that is younger than 18 years old so let's say 2010 and now look at this hero have to be at least 18 years old so when I submit it's not going to submit and let's change it to I don't know 2000 and there is also the the thing over here that you can choose it like with a calendar and stuff but it's just faster to type and this is why I'm doing this this is by the way material UI component of course so let's submit uh this form one more time now everything should pass so when I submit and everything worked I'm seeing this uh this alert with all the info that I submitted and look at something interesting you can see the birthday is actually uh transformed to uh to a date so this is something cool you will also see how you can transform that data with load and for terms and conditions you see that I'm sending true over here so basically I'm checking if only if the user is sending the true true value so if I remove this I cannot submit all right this was the little demo and I'm going to create a new repository now uh we're going to make this project from scratch so let's start coding now let's first initialize the white project so let's search for White and let's search for the command to initialize the white project so getting started I'm going to use pnpm to make it run a little bit faster okay project name I don't want a project name and I want it to be react block checked with typescript so now we can open the code editor also code all right so this is the folder structure very basic one that's already delete all the CSS files so delete this one this one and basically that's it so gets rid of them let's get rid of everything over here so select everything and export you know default function all right so this one is going to be uh don't know that we just did an apply and now let's do the payment installed so let's open a new terminal here and let's run PNP and um install the packages that we downloaded all right cool let's check what we have inside the main so first of all uh let's get rid of this trick mode that that I don't care about and why is it complaining oh yeah so I forgot to type here return so let's do return give right so we can run this project already so p and no you know what friends let's install all the dependencies that we need for our project okay so first let's go to the docs and let's go to um let's begin with material UI so installation yes so we can copy um yeah they don't have a pnpm but anyway default installation so I'm going to use this thing over here and let's make it installed let's check the packet Json uh okay in the meanwhile also it's installed already so emotion react emotion style material mui material this is fine do we need anything else over here um do we need the font um suppose we could get it so let's get the font and the next thing that I want to install is Zod so let's say the installation installation [Music] let's do pnpm heads out now let's install reactive form so get started quick start npm oh okay in this thing uh PMP installed the active form and I think we also need the reactive form schema validators so I will check how it's called yeah so this one is called the resolver something so let's say again Stone and hook form resolvers right so I think this is all the packages that we need let's on the project BMW and great our project is running let's go to Firefox let's go to localhost 5173 um so we have a arrow here index CSS so let's go back to the project Main and let's remove this input over here and now it should be fine and great we have hi okay so now I want to actually go one time to my finished project and I just want to get uh the up file so actually I just want this this jsx because there there is just some basic styling with material UI to place everything kind of in the center so let's get this thing over here and let's go to power up TSX and let's return this stuff uh cool so now we have to do some imports so let's important box and not Auto importing and I don't I'm too lazy to do it so let's copy uh all this stuff for material UI reload uh the windows so all the arrows will go and what we don't have for now is we don't have this component so let's comment this and let's comment also this thing and let's check our objects all right it's cool so we have the header and we've got some basic styling so now we can create our folder registration form and let's create our component over there so let's create a folder here and let's call it foreign and let's create a schema file schema.cs now let's export default function oh that's uh let's install animation rats let's go back all this stuff and let's uncomment swing now we should have our deal with registration nice okay so first of all I think the toy should start with the schema so I will teach you a little bit about the basic schema validation so if we go to Zod have actually examples for everything here and what I did to create this schema is just to go through these docs and check the syntax so basically let's start let's go to basic usage I just want to see to show you like what is going on so basically usage we get Z from Zord and we Define a schema with this Z thing so let's go to our schema so we can call you can close all these files let's go to schema let's actually copy this import and now let's look at what we have so const my schema is 0.3 so this is an example but we don't need the string we need an object what we can do is we can say coins I don't know registration team enough for example is going to be Z Dot object right now we have a validation schema with Zone and this is going to be an object so here we have the object example so we can Define our Fields inside our schema so for example here we have username but in our case I think we're going to have a name so let's say here of the name and this one is going to be C Dot [Music] as a function like this and we have our first uh first validation field so name is supposed to be a string now I want to show you how we can use this validation schema to get a typescript file out of it so what we have here and say extract the inferred type so let's say something really cool so we can have a type let's copy this thing so we have here a type of user and it's going to infer type of user but in our case of course it's not going to be type User it's going to be type of all right this celebration schema energy registration schema why it's so difficult to write this style I'm not sure anyway we're going to use our schema and refer it so Z dot infer type of so I'm inferring my registration schema so I see that we have a typo here so let's start to fix this one the way I just nice so what I want to do is I want to export both of these things so let's build for them to have these values in our index dot ESX so let's export the type as well and now let's try now let's start to write our schema basically so we need to Define all our schema inside this object okay so of course I'm not going to write everything but I will just paste it from the finished project and we will go through all the all the simple Fields so let's say this thing and let's see so we have a name so it's going to be Z dot string and it's going to be a minimum of two and now I can actually Define a custom message if this minimum is going to fail so I can open an object here with a message and I can say that the name has to be at least two characters so you can see that this thing over here goes inside the mean function and in the email we have a special thing in those so just email and this is you want to check if this is a valid email so I suppose it does it with regex or something so the message here and that I supplied not a valid email next we have a password so password should be a string and the minimum here should be fine and I Supply this message password has to be at least 5 characters film password is the same confirm password has to be at least five characters birthday is a string and I'm using something here that is called transform so I'm going to get this value from the user so I have a callback function here with value and I can transform and return a new value so basically I'm returning a new date with the value so you will see the value for how the format of the value is supplied with the material UI component we will console log it later and you will see how it's transformed to an actual new date it will have a gender which is going to be a string and here um and and for some strange reason I couldn't Define a message for a string error so I'm using here an object which have an error map so basically this error map is going to return a function and it's going to and I'm just returning a message of uh you have select agenda so basically let me actually show you this error Market thing I hope I can find it in in the docs uh so let's maybe searchable L map do we have a search over here I think [Music] um yeah this is not cool so how can I find it hello uh you know handling error formatting maybe it's something like this so what do we have here all no this is not it and all formatting uh this is also not it um right so unfortunately I couldn't find it like in the first glance so I'll just show you in the um in the vs code itself so we can see over here that string can have a perhams or object that is typed like this so look at this we have Arrow map which is optional and we can supply error map which is a Zod Z dot Zod error map and this is basically this is basically it let's try to maybe go to this string thing and you can see that Arrow map can be a Zodi or map or undefined and let's go maybe top here so we have a issue and context and it basically function that is returning an object with a message string so this is exactly what we did over here so we return the function with a object and inside it will have a message string so this is how I'm defining this level for this string over here okay we have our basic schema I'm not going to write the advanced fields at the moment but let's go to our index TSX file and let's walk a little bit on our form itself all right so we have some imports over here now what we should actually return is a form so let's change this gig to a phone and now I want to paste the on submit function that we are going to use when the form is submitted so the unsubmit is pretty straightforward I'm just going to take the values as registration schema type so we can actually use this type now and you can see that all all the things that we defined in our schema I've now inferred in this typescript type so this is very convenient and you can see over here name is string birthday date gender ever string is very very well typed and very well documented and I really really was impressed by that so now what we need to do is we need to integrate a reactbook form so let's go to react to Chrome docs and I want to have a I want to have an example for so first of all I want to show you the basic registered fields so what do we need from break form is that we have this used form book and you can see from here they are getting register and handle submit so I can copy this actually I don't actually need to register but I will delete it in a moment so let's paste it over here we don't need this register but the handle submit is not actually going to be run when the form is submitted so let's actually connect our form to this handle submit so what we can do we can say on submit so on submit we're going to use this handle submit from the used phone and what we're going to do here is uh this handle submit is going to pass me all the values that the form is holding so basically the use form is managing all the form you will see it in a moment how we register fields to it but after I'm submitting with handle submit it will pass all the fields and what and I want to pass for my fields to my on submit function so I'm going to take this one submit and put it over here and now of course it is going to complain because we are supported with typescript here and it is saying that it's it's missing Fields so this up so my phone is missing Fields so I want to get like all this registration fields and I'm not getting anything so I don't have name email password confirmed password and three more is missing so now what we need to do is to register our uh our form fields to the use form so in the simple example over here what they do is they use this register function and they just using a plain HTML um HTML elements so this way they can just register and register with the name of the field so for example this thing is one for the first time gender um yeah and so on so in our case what the example that I'm looking for is integration with UI libraries so to integrate react to Chrome with 0 UI we need to use this example so let's look at this in this example we need to import something that is called controller which I think we're already doing and in the use form I'm importing something that is called Contour so let's import this control over here so if and then submit we also have control and now look at this example so we wrap our um our material UI component with controller and we specify the name which is the key that is going to be registered so again you can see that they use first name so it will register first first name to the phone and the control is passed like this from this use form function and render is what actually renders the element so in their case the the rendering input and they passing the field which is coming from here from the from the function itself so let's check an example in our code first of all I want to wrap it with a box so it will be started a little bit so let's close this box over here now let's use our controller so we have the old Imports so we can see that we're already importing the controller we're importing the control over here so now let's paste a controller or a name field uh so let's ignore those Force for a moment so we have uh here a controller that is wrapping a text field that is coming from Material UI and the name of it is going to be name so we're registering so we basically registered a name uh field to our use form and uh here we are rendering the text field okay that is coming from the material UI so we have here arrows which were also can in get from the use form so I think what is what it should be is form context I think from State and what else do we have here maybe the else should be here yeah great all right so we still have a role for helper text but I think as soon as we Define our default Fields so use form and will Define what schema introduce introductionally be fixed so another thing that we can do now that we should do now is to Define our um our options over here so here are the options that we can use over here so let's see first of all mode I want to change it to all so basically the validation will run on all actions so let's look at the options one more time so we have one blue one change on submit untouched I want to do it for all and let's define our default Fields default values basically and our form validation so let's see let's look at the different values so first of all we have all the values over here this is the default ones and this is the resolver so basically I'm going to use Zod resolver which is coming from Hook phone resolvers.sod and we're going to use here the legislation schema that we created in our schema so now so this go so now this uh form is going to use our schema and when it's going to run the zot resolver so let's save this file and now this error is gone and now the only thing is uh we have is we need to Define all the controllers and all the fields in our in our form itself right so let's paste all the fields and let's go through all of them so there are do I have some arrows here and should be outside of the box so let's take this thing we don't need this and the button should be here and now I want to see um do we still have error all right so I pasted all the fields but we still have some issue with the on submit so let's look at this Arrow first so we have issue with the birthday because it says that the birthday types of property birthday are incompatible type undefined is not assignable to type date okay so I think that which when we will write our custom Advanced validations this error should be fixed but let's look now it's basically all the fields that I added and you will see how they all repeating itself and everything is pretty much the same so it will sync with with your memory so we saw the name controller over here and here we have the email controller which is pretty much the same so we Define a name which is email so we register the field we pass the controller and we have the render function that takes the field and uh it renders the material UI component text field here we Supply the arrow which is errors dot email so you can see here all the possible errors that we could that we could have and again we have some basic stuff like label type variants of stuff like that helper text is actually the text there the component that displays the arrow beneath the text field so uh yeah so we're just passing the arrows.email.message to this helper text now we have the password which is the same the confirm confirm password which is the same just the only the only difference is the type here is password and the controller for birthday which is going to render a fragment so this component is going to render a fragment which is going to have input label which going to say age the text field which is going to be type of date the next one is gender gender is going to be a select field so you can see here we have phone control and we have input label of gender and then the select with just specify the menu items so male female and yeah that's pretty much it and the last one is terms terms and conditions which is going to be a chat box so here we render phone control and phone control label and here we have a control which is a checkbox and yeah so again pretty much similar to the others all of this is just material UI components and in the docs of material UI you can just go to components and you have here all the fields that I basically used so select checkbox and the text field and so on so if we go to checkbox and you want to check some code for this so for example basic checkbox you can click here on show the full stones and you can see here the checkbox and for example checkbox with playable checkbox some different stuff I'm told so yeah so for example checkbox with a label the rapid Reform Group and form control label they pass a control with the checkbox so this is pretty much exactly what we did over here alright so the only thing left is to write our Custom Custom validations for the schema so what we're going to be using to write this validations is something called super refine so super refine is basically allowing us to write anything that we want so we can see here in this example they use super super refine with value and context and they use it on a array in the array of strings I guess so what the checking here if is if the value is bigger than three so if it's true they're going to add an issue and it's going to be uh to have a code and the maximum I'm not sure what what is specified here but yeah they specify also the type and is inclusive and the message so I think I didn't specify all this stuff over here I just made a custom code and the the thing that is um the thing that is interesting here is the message so if this thing is failing it's going to create an issue with this message yeah so the the other example is pretty much uh how I used it so I'm just going to here they check uh if value that length is not equals to new set value dot size add an issue with the with a node issue code of custom and then just a message so we'll see in the moment how I created this custom validations but first of all let's try to actually play with our form and let's see if we have the basic validations and try to submit to see our values at the moment so let's go over here and let's check uh okay cool so we already have the validations so what I want to do now let's let's go real quick over here and in the on submit I just want for now to yeah actually the form is going to pass so I guess that I can just use it as it is so let's click in business lights not working Ctrl C control V yeah this is strange so let's do one two first one five fifteen five um let's pass something over here [Music] and then 1990 except and great so we have the values and of course we don't have now uh all the all the advanced validations so for example I can probably pass it as false yeah and I can pass the date and of course the passwords doesn't don't have to be matched so this is also possible and now we're going to use this custom refine and I'm going to write our custom Advanced validations all right so here is our super refined validations so let's go through it so super so as you can see I'm using super fine on the object itself that means that I have access to all the fields that are inside it so I can structure all the fields basically all the values from here in the first argument and here we have the context which is going to be useful to for creating with the issues all right so our first so our first check is if password is not equals to confirm password we create a new issue with custom code and message passwords do not match and here what I did is I used the path to actually uh to place the arrows in the right place so in this case I want to place this arrow in the confirm password field so in the material UI it will be shown under the confirm password component so the next thing if terms and conditions is not equals true I want to add an issue and I want to say you have to accept terms and conditions really straightforward now let's look at the birthday so birthday what I'm doing here is I'm checking if birthday first of all so I'm creating the the date of now basically with new date and then assign it to now and I want to um and I want to get the time of now minus 18 years old so I'm basically checking now minus 18 years old and this is a now.gettime which is going to actually give me the the time in milliseconds so I'm going to receive a number like this and I want to remove 18 years old from the from now and I want to check is valid age is going to be birthday dot get time so basically the birthday that we received from the user if it's less than now minus 18 years old so this is our check he's he's valid his valid age so first of all uh we have uh we have the possibility that the user is going to uh send us the wrong format so if I see that uh birthday dot get time is not going to be a number then I'm sending I'm creating an issue it's going to be not a valid date and I'm going to use a path of birthday of course and if the H is not valid so is valid age if it's false I want to create an issue and say message have to be at least 18 years old so yeah so this is the age custom validations and now let's go back to our index involve some strange reason I see that I still have this arrow with the birthday so it says type undefined is not assignable to type date uh so anyways we can I think we can start testing our form already yeah so this Arrow was still not gone uh yeah but let's try to test it and figure out in a moment why it's actually happening so let's try to pass for the validations so test and run 2.456 until 445 The password should not match now let's send something that is younger than uh trading in a Zone so let's say 2020 and gender and accept have to be at least 18 years old cool now if I delete this thing you can see the time still getting to the advanced validations but now I'm getting not a valid date because the format is as I'm sending is not valid so if I console log this thing before I transform it so let's go to the schema for a second that I want to show you uh here we get the value from the user and if I do instead of this if I do something like um log and let's lower the value over here so I want to show you what do I get from the user so it's packed and let's open the console and let's do it a little bit all right so let's refresh Let's uh build this phone and one two three four five and now let's say 1 1 000 and let's choose the gender and accept and look at what the user is getting so one one two thousand so this is something that I can transform to a date but if I send something that I cannot transform to a date I want to receive uh I want to receive an interval like this not a valid date so we can return this thing so new date with the value and now let's actually check what is going on here probably birthday for the celebrity time date um so what can we do is can let's try to say oh um says Dot undefined Maybe should it fixed the issue it's fine is not assignable to type string but actually I am saying that it can be undefined uh this is strange so for some weird reason uh it complains the date is not the birthday is not type of date which I actually specify to be string and I don't want to deal with this at the moment maybe it's some strange bug that they uh that they have and I'm just spending on wheels for nothing because in the previous project it worked and maybe it's a different version of zodo or something anyways I hope you enjoyed this video I hope you learned something I very much was impressed with this Library I like that it supports types typescript very well and probably I will use it in the future instead of free up which is what I use at work at the moment uh yeah so I hope you enjoyed if you like it please like the video and I will see you the next one bye guys and thank you for watching

Channel: Mike dev

Views: 985

Keywords:

Id: tWjAnHWP92E

Length: 43min 36sec (2616 seconds)

Published: Thu Jun 08 2023