React Forms Full Tutorial - Validation, React-Hook-Form, Yup

[Music] hey guys how's it going i'm back here with another video and before we actually get into this video i really wanted to show the end product for you guys so in this video we're actually going to be building a full on form in react and i'm going to show all the different aspects of building a form in react that i actually think are necessary when you are building an application so obviously i'm not going to focus that much on ui so you can see that the ui for this form is actually pretty bad however if you're interested in looking at the css for this form that i created right here the link for the code is going to be in the description as well as the link for the the whole like project in the description however i'm going to be focusing on different aspects that beginner people in react don't usually think about for example when you create a form you usually want to work with validation or displaying errors and this is something that i want to show you guys in this video through two different libraries which i think are really great um one of them is called react hook form and the other one is called yup so react hood form is a is a library made for just automatizing your your creation of forms and also displaying errors correctly also i decided to use this library over another library like formic because i believe i wanted to try it out and also i saw that it actually um is made in a way so that um it triggers less renders of the page so i really wanted to try it out and actually really enjoyed the library so i'm going to show you guys how to do it with it and yup is a library that allows you to create validations for different inputs and different schemas which is exactly what we want with the form right we want to say exactly what we want in this input and in this input right here and every other input that we have in our from so let me show you the end product over here you can see that um we have like a just a normal form and i can add information like i'm going to add my stuff over here i can put an age let me say like i'm 29 and i can put a password over here let me say something like um subscribe something like this and for the confirm password i'm gonna say something like subscribe please so you can see that i'm putting different um values for the the password and the confirmed password so when i click submit nothing happens because and it says password should match so this is something that we're going to take into account um for example if i remove this over here and just let subscribe you'll see that the message disappears also for example this is 29 right because i need to put an h however imagine if i don't put in an h i put a negative number like negative four you can see it will say h must be a positive number and obviously the ui again doesn't look perfect but it's just something that is not as important for this video however the important part is actually like validating everything for example if i put an email that doesn't satisfy what an email should look like you can see it says email must be a valid email so this is what we're going to be building and let's get into the implementation okay guys so you can see that this is our form and i actually removed all the code that relates to the validation and i'm going to walk through with you guys showing how to actually make that work the code actually right now is only this so what we have over here is we have a simple react application it starts at the app.js i don't have any like crazy files or anything i just have an app.js and a components folder with a form.js which is our form and in the app.js i just call the form component over here which is great right so what do i want to do now i want to come here to my form.js which by the way right now just includes some divs a title and as you can see a form with some inputs right i have some inputs over here which is exactly what you would probably have if you were creating a normal form however i want to change this to satisfy um the new kind of like a better form a better way of making forms right so how exactly do i do this first of all one thing that is best practices with form is always utilizing the name property because when you have inputs you want to be able to identify identify which input you're talking about so sometimes you can use the name property to do that and they should all be unique for example this input right here is the one for the first name so the name is first name this one is last name this one is email and so and it goes on right so i also like to put placeholders so it looks better and also like to define the type right so if i actually wanted to define this set as number i could have make that equal to number and it would only accept an age that is a number however i actually like to keep the age as text um it's just a personal preference and you can see that all of the other ones are also text but this works with every single type of input and at the end we have an input of type submit which i just add an id so that i could i could style it um not a big deal the the ui as i mentioned the code is in the description so let's actually start by making this work with the libraries that we're going to be using and the firs the way to do this is by first installing the libraries we're going to be using right so let's actually get started and install the libraries we're going to be using so the first library we're going to be using is react hook form so i'm going to leave this command in the description which i'm going to write because it's going to be pretty big the name of the library is react hook form and we are also going to use yup which is another library and also in react hook form we also need to install a different branch of this library which will allow us to create schema-based um validations together with yep so i'm going to install this other package called hook form slash resolvers slash yup like this and this should be it um okay it said oh because i accidentally wrote the command wrong so again i'm gonna just put an ad over here and this should work so add and i'm gonna put the comment in the description i already actually installed everything however if you're interested just go into the description and you'll see it over there so after you install the the packages you can just come here at the top and import all the packages we're going to be using but we're just going to be using certain things of each package so i'm going to show you guys exactly where we want to use so for example in the react hook forms i'm going to say import from react hook form like this and i just want to import the use form hook so this is a hook that exists in this library which is really cool and it's basically the the building file foundation for creating this validation and the the next thing we want to actually import is going to be from the um add hook form resolver slash yup as i mentioned and we actually just want to import the yep resolver which will allow us to make this connection between react hook form and yup which are two different libraries and at the end we also want to import everything that exists inside of yup so to do that we just want to say import all as yup from the library yup like this and this is basically it for all the imports now we're going to be using every single thing that we imported in order to make this work and the first thing that i actually like to do is i actually like to create the schema right so what exactly is the schema well think about this we have over here a form which contains um first of all a first name a last name an email an age a password and a concern confirm password right so these are the things that we actually want and there are many different situations in which we might want to create a form like this but primarily when you're trying to sign up for um an application right you're writing an application that you are able to sign up and this data will probably be sent to a database right and that database probably is defined through a schema and a schema is just again the properties that you want to have in your database or in the table right and this includes um all the ones that we have over here however they should be of a certain type right we don't want to add uh an email that isn't of the type email right we don't want to add an age that is actually just a word because age is a number so we have to define this kind of stuff and we use yup which is a really nice library to do this so in order to actually create our schema we get we gotta come over here at the top and obviously when you're working in a real application i recommend actually creating this in an external file but this is just um it wouldn't matter that much in this video just know that you're gonna create a schema over here like this a variable called schema and it's going to be equal to yup dot object dot shape and the reason for this is because this is how you actually create a schema you define it you see that a schema is an object of the shape and inside of here we can put all the properties that we want to have in our object and the properties that we want to have is well a first name like this first name then i'm not going to put the values yet i'm just going to put all the properties so last name then we also might need an email and then an age and then a password like this and then a confirm password confirm password and by the way when you're doing this you need to set this properties over here to be the same exactly the same as the names of each input or else it won't work because this is how you identify which input you're talking about and when you use the up this is exactly how you do it right so um you know that this or the this is just a way to identify it so we just created our shape over here and now we have to fill this object with each value and actually describe what the input will be and what do i mean by describe what the input will be well yep actually contains a variety of different functions that describe different inputs so for example um the first name if we want to say that the first name has to be a string we can just say yup dot string to say that it needs to be a string so we first defined the type so if it was a number it would be number then we define um if it is required right because at first name there's there isn't much that we want to um kind of like say for it we just want to say that it needs to be a string and it has to be required we can't submit this form without submitting a first name then last name should be exactly the same i think first name and last names are only strings that are required however email is really nice because yep actually has a an internal validation to check if the thing you put is actually actually looks like an email right so when you say yup dot string just the first again say it's you you want it to be a string you can then say email which will basically check to see if this is actually an email and at the end you can even say something like required which again will just um show you will you need to put an email to make this work right and then over here we can add more stuff with age we can say something like okay i want this to be a number first of all so yep.number and because it is of type number and also i might want to say that like think about it all ages are positive numbers right no one has a negative h so i can say that i want this to be a positive number and i want it to be an integer which means i don't want it to be a decimal so i can just add it like this obviously i'm just making this stuff up i like i looked at the documentation and i saw there's many different things that i can add to each field so if you're interested just go around and check what you can do because you can just change like add them as a chain like this just make sure that the first one is the type and the last one is the required like this and this is really nice right so now for password is actually really interesting because you can define for any string um a minimum amount of characters and a maximum amount of characters right so this is something really cool with password because you don't want a password to be inputted with like two characters or with 100 characters you want to have like a defined fixed length right so for example here i can say that i want password to be a string and i can maybe put a minimum length of like four and a maximum length of like i don't know 15 which is what i did before and at the end i'll just put that i want it to be required like this and this should be fine like this but now with confirm password this is actually really interesting um to make this we want to confirm password to give us an error if it doesn't match the password that we put over here so to do this it might sound a bit a bit weird but it's just a way that i actually found a couple months ago on on um i think stack overflow and i just use it every time i have to use some yep validation to create confirm it like two to make it so that i can confirm passwords so to do this you can just write to write it like this i want it to be a string and then i can just use one of yop's built-in method called one off and inside of you can actually put a reference to one of the things that already exists in our schema i know it sounds weird but this is how you actually do it so what i like to do is i just put it over here like this you open and close square brackets then you say yep dot ref to make a reference to another field in your schema and you just grab the password field like this and again this over here should be the same as the name over here and at the end um you can pass null over here because it takes two arguments and this is basically it this will check to see if this confirm password field is exactly the same as um the field um of yup dot raf password right so the field with the name password so this is how you actually make the confirm password and this is done like we finished the schema validation using yup this is all we have to do now we have to write our react hook form code so that it will take on the schema and validate our inputs and also display the error messages so how do we do this well to do this we actually have to come here to our form component and we have to um kind of destructure the used form hook that we imported at the top here and grab some useful information from it so one very useful information that we want to grab is the it is basically like this we can just come over here and say const and open and close and set it equal to use form this is how you destruct your just destructor for hook and over here what we want to grab from the used form it actually comes with certain things that you can use to make your validation work one of the things that we can use is the register function like this the handle submit function and the errors um this isn't a function this is just an object so basically these are the three things we can get we can get more but these are the three things that are mainly um useful right the register is of just a function used to determine which fields we want to be part of our validation handle submit is actually just a function that we can put as the unsubmit of our form so when we submit our form we can say to submit this and use for the react hook form um library will handle everything and errors is just an object containing all of the errors so literally we don't have to write any errors individually this will grab the errors that are displayed by yup and will be stored inside of this errors variable our object right and in order to actually connect this with yup we can just pass inside of our use form over here we can pass an object like this and we can pass inside of here a resolver and this resolver will be the yup resolver like we imported at the top and inside of it we can actually pass our schema so this is how you connect the up to react hook form and it's i think it's really nice you can see we just pat we just created the schema pass the yip resolver as the resolver into a hook and this is it um it will automatically handle everything for us and now all we actually have to do is we have to actually make our form and display our errors um before we actually do that actually we need to come over here and oh now we're on submit like this on our form we just have to pass the on submit like i mentioned before so on the forum when when we submit the form we want to submit and we want to pass the handle submit and instead of handle submit which is the thing we imported over here we actually have to pass a function inside of here which is the function which basically handles when we submit our form so like when we click on the submit button this function will be called so let's actually create this function right now we won't actually write it out we'll just create it by saying um submit form something like this um just create this function and this should be fine like something like this and we'll actually this function grabs some data so the data will be the object containing the information submitted in each input so when we write stuff in our input and we click on submit form then the data from our form will be stored as an object in this argument right here and now that we created this function we can just pass it over here like this and now that this is done we can come here at the bottom and start creating our input so that it will work with react hook form so in order to actually define as i mentioned before you need to use the register function to actually make it so that each input is actually part of our validation so to do that you need to actually pass a ref so if you're used with hook you know that raf will it's basically you're just setting this as a reference to something and internally inside of right hook form this is how they actually grab the inputs so we're setting our ref here and we can just pass register as our ref and we do this to every single um input or every single field in our screen that um satisfy that we want to be part of our validation so i'll just like paste this on all of them um and this one right here which is confirmed password um i just realized that i actually wrote confirm password wrong so confirm like this and this is done so we now actually have everything almost done the last thing that we actually want to do is we want to display our errors so how do we make it so that it will automatically display the errors we know here that we have we grabbed the errors object right so what happens with this is that every time we like it will constantly be checking to see if our fields are satisfying the schema that we define above so for example if my password is currently not the same as the cur as the confirmed password then it will constantly show the things like the message saying um like the errors object over here will constantly have a property called confirm password dot message which will show the error message saying something like um i don't know passwords don't match right so this is how we check we can just come over here at the bottom and below each of the inputs we can just put something like i don't know i'll just put a p tag but you can use any type of tag and what you want to do is you just want to grab the errors dot the name of your field so this field right here is the first name so i just want to display the errors for the first name and obviously we can use this to check if there is actually any errors and then access the message like this so if there's any messages then display the messages if there isn't then just don't display anything this is what this is basically saying and we can grab this and paste it below every single input and just change it so that it will like it will satisfy the the input that we want to display the errors for so this one is going to be the last name and this one is going to be the email like this on email then this is age like this age and then password is going to be password and for confirmed password is actually a bit different um we didn't actually set um like it doesn't since it was since we actually um as how can i mention since we actually created this kind of validation by using the one off like over here it doesn't come automatically with an error message so we can bypass that by just coming here at the bottom and just creating our own error message by just saying something like okay i just want to check to see i want to create a b tag over here and i just want to check to see if errors dot confirm password exists so if it's if if there's any errors so if there is i want to display my error over here and we can put whatever we want here i like to put passwords um don't match or should match like something like this password should match and this is actually basically it right um we just handled everything but currently we obviously are not seeing our our data but it's just not allowing us to submit so to actually see our data let me just say that when you submit the form you want to console log the data like this okay guys so that's that should actually be it um let's check to see if everything is working um let's first of all just check to see if stuff are submitting so the thing is that um if we submit a form so like i'll do actually i'll just fill up this form i'll put something like pedro i'll put something like machado which is my last name i'll just put a random email at gmail.com something like this dot com and i'll just put like an age of four i'll just put a password of pedro i'll just put a another password of pedro and actually yeah this actually i'll just put something like pedro s so these two passwords are two completely different right um so in this case when we click submit it shouldn't actually submit so nothing should be console logged and also a message should appear down here same password match so when you click submit you can see that nothing is console logged and you can see clearly that says passwords should match because the two passwords are matching and when i um remove the s now the error disappeared because messages the passwords are the same and when we click submit you'll see that we actually console logged data meaning that um all the data has passed through right and this is great we can test the other errors as well so like if i put a negative sign over here it should say age must be a positive number because we said that our ages should be positive also obviously if we remove a field it will say first name is required um you can like customize these errors if you want to easily by coming over here for example and like just adding um inside of the yup validation you can just add a string at the method and saying something like um first name should be required please right and when i save this this will automatically be changed if i refresh this and i don't put a first name but i put like a bunch of random stuff over here i'll just put like this and click submit you'll see the first name should be required please because this is the message that we just customized in our yep validation right and another thing is just the the password should be um again it should actually be of type password as i mentioned before um i use text but usually you should have a of an input of type password because now you'll see that it doesn't actually display the password and again i know the ui looks horrible it is completely not responsive but i just made this really quick the focus was actually validating our input so that it will actually work so now what you do is if you have an api where you're submitting your data to a server something like that then over here you can safely just make like a fetch request something like that to send the data to your api and it should be completely safe because you're only submitting the data if it had if it passes through the layer of validation created by yep and react hook form and you can easily display your errors like i mentioned before so this is basically it for this video this is my full tutorial on how to create forms in react um i've made tutorials in the past where i used other libraries so that's why i really wanted to make this tutorial because i found this new library which i really enjoyed so yeah that's basically it i really hope you guys enjoyed this video if you enjoyed it please leave a like down below and comment what you want to see next subscribe because i'm posting three times a week and i would really appreciate if you guys can subscribe and yeah hope you guys enjoyed it and i see you guys next time

Channel: PedroTech

Views: 94,951

Keywords: learn reactjs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, react js crash course, react js, pedrotech, traversy media, traversymedia, freecodecamp, deved, forms, form in react, forms in react, react forms, react forms hook, login react, register react js, login page react, react form, react form validation, yup tutorial, react-hook-form, react-hook-form vs formik, react forms yup, react forms with hooks, react forms best practices, react hooks

Id: UvH70UkbyfE

Length: 24min 56sec (1496 seconds)

Published: Wed Feb 10 2021