ReactJS Course [11] - React-Hook-Form and YUP Tutorial | How to do Forms The Right Way

hey guys how's it going i'm back here with another video and today this is episode 11 of my react.js course and on this episode i'm gonna talk about a topic that a lot of people don't think about and the topic is how to do forms right in react so in this video i'm gonna teach you guys how to use two libraries together one of them being react hook form and the other one being yup in order to create um a really good and secure um form in your website that also has some sort of validation and error handling so we're gonna create all of that in this single video if you want to check out all the code as always will be in the description so with that in mind let's get into the tutorial [Music] [Applause] [Music] [Applause] okay everyone like i was saying we're going to be using two libraries in this video for for creating forms um one of them being up in the other one being react hook form i mentioned in the beginning of the course i was going to be using uh formic in order to make forms in this course but i decided to use react hook form instead um to replace because um i feel like it is it is the one that i'm using most nowadays if i'm going to create forms in a website and i feel like it would be the best to explain uh based on how this course is going so um if you're interested i also have videos i'm using other libraries but i feel like you would like react hook form because it's pretty simple so over here i'm gonna i just have a very simple app as you can see we have our app component which just calls a single component called form and a form as many of you might know is just a set like a group of inputs that you have in your website which it's used to get data from the user so over here i have a simple form which is the one we're going to be using in this video which um it has a set of different informations that it basically wants from the user and it also has a button down at the bottom you can see the form like this we have one for the for asking for the user's full name one asking for the user's email one for the age one for the password and one to confirm a password right and then there have a button here at the bottom that for now basically doesn't do anything but what we want to do is be able to control um what we can write on this inputs so for example you can see that for the age i'm writing a a text right not a number so that if i try to submit with with this um it should give us an error and i'll actually submit the data it should actually error to the user first because that will prevent us from sending incorrect data when submitting a form um then we have passwords for example i want to check to see if this password is the same as this one and display an error if that is the case now you get what i mean right we're just validating how this form is written before we actually submit the the form so how exactly would we do this well let's start by installing um the two packages that we're going to be using in this video the first one is the react hook form and you just write npm install react hook form just like this the second one is yup which i'll explain the distinction between both of them and why that you need both of them um but basically react hook form will give us all of the functionality related to displaying errors and submitting the form and handling all of that while yup is only used for validation the distinction between them will become clearer as we go but it's important that we just start by installing both packages which is what we just did so now what we want to do is we want to start by importing from the react hook form library so i'm going to say from react hook form and we want to import a hook called the use form so the good thing about react hook form is because it is really simple it just provides us with the hook which is this over here and i know i haven't explained what a hook is so far and the score set but we've seen so many of them um it's it's coming along and you guys will see but use form um it's just a form it's just a hook that we can use to generate a lot of different stuff related to the form so in order to use the hook we're just going to say const then set it equal to use form and what we want to grab from this use from hook is initially just this function called register and this function called handle submit now the handle submit by the name you might expect it is a function that we're going to call whenever the form is submitted so whenever you click on the submit button but um in order to make it work we actually have to create another function which is going to actually be the one where we write the code that we want to execute when the form is submitted so for now let's just console.log hello world i don't know whatever and just have this function as part of the on submit and here we want to pass the handle submit function which inside of it we're going to pass our own on submit so the way this is working is handle submit is a function that react hook form will use to handle all of the stuff prior to submitting and what we have to do is just pass our actual submit function to execute after react hook form handles everything prior to actually submitting so you'll understand better as we go but um just know that when we submit it should go through both of these functions right so now we have this register thing over here and what exactly is this register so think about it as as just a way to insert an input inside of a form uh to be part of this whole validation that we're creating with react hook form and yup so this register function is used in each of these inputs to tell react hook form which inputs should be part of this validation so we have all of these inputs and the way we are going to register one of them is by just opening and closing curly braces like this putting three dots and just putting register and inside of here we just have to pass in a name to identify this field so what would this be well think about it this way all of the data we get back from this form will be in a format of an object right so if the user types in pedro as the full name then we would probably want to get back an object that includes something like full name is equal to pedro right and there's also an email so we would probably want the form to be email equals to pedro at gmail you know you know what i mean right so we're getting all of this back as an object and what determines the field or the key for each of the inputs when we get back in the object is this register function over here so what we put over here is going to be the name almost like as if we were passing in the name property that you might have in an input so we're going to pass it over here phone name to register this input as uh with this name specifically now we're going to do the exact same thing with all the other inputs we have um and we're obviously gonna change a little bit so this one will be the email one this one will be the age one uh this one will be the password one and this one will be the confirm password now we have registered all of our inputs which is pretty good right and we can actually see this working um without any validation of course because if we put over here data we can grab data directly from the unsubmit because the handle submit function will give us that that's just how react hook form created this function to be we can actually console log the data so you'll see that um it will console log the data so i'll actually open this up and open our console you'll see that it will work um because uh we currently have no validation in place but i'm gonna type all of this click submit and you'll see that we'll get that object with the correct um keys because that's how we wrote them right meaning that react hook form is working but we just haven't implemented yet all of the validation and error handling that we want to create right but it's working which is amazing um so now what we want to do is we want to start creating the validation and what do i mean by validation is like i said i want to make sure what you're typing on your inputs or actually what we want from an input so oh also i realized that age should not be taxed it should be number right it should not be text it should be an actual number so this is how an age should be right not an actual text but you know what i mean so technically what i want to do now is i want to write some sort of logic that will guarantee us that um you can submit a full name that isn't um a text or you can't submit a age that isn't a number or more importantly you can submit an email that isn't an actual email format um you've seen websites do this right where they you try to type something random and they're like this is not an email well with react code form and yup you can easily check that so the validation part comes off from yup so i'm going to actually come over here at the top and i'm going to say import all as yup from yup when you put this astrix over here you're just trying to import all things in this specific library so in this case with yup it requires that we import it this way so i'll just check the documentation for the library you want to import and they will tell you how you should be importing it but this is how you do it for you up so when we say import all as yup um we want to use this yup variable to generate a shape of how our form should look like so what we're going to do is we're going to say const over here and we're going to create what is known as a schema a schema for validation is just a name used for shaping how our data should look like right and then we're going to set this equal to yup and with up we get a bunch of stuff that we can use it right so for example we can use something called an object now what is an object well with yup you just create a chain of functions like this where you specify um the shape of your schema so first we're seeing over here okay our schema or our data will look like an object remember that i talked to you guys that we're gonna get back an object with all the data and then we want to specify the shape so we're going to use the shape function just like this now the shape function accepts an actual object and we can specify the shape or the identity of each element in this object or in the schema so the first object will be the full name and it has to be written exactly how we wrote over here because it's exactly how the object getting back from the unsubmit will look like so with a full name what do we want to specify well remember with yelp you can specify what how things will be shaped like so instead of an object we're just going to say that the full name will be a string so this will here will enforce that when we get back from the unsubmit full name has to be a string not only that but you don't really want to submit a form if there's no full name which is what happens right now we see we can have an empty full name because we don't have anything preventing that from happening so what we can do with yup is we can actually add a required function over here at the end which will allow us to say that full name is a required field for now let's just specify that full name looks like that but let's continue shaping the other fields right so i'm going to zoom out a little bit so we can see all the other stuff but email is a cool one right so we have email over here and how exactly would we specify um how an email looks like well first of all we'll say yup and say that it is a string because that's what emails usually are but yup provides us with a really cool function called email and this will again give us an error if the thing doesn't actually look like an email so if a user actually types just a bunch of random letters yup will know and tell us that that's not an email which is amazing then we also want to make this required because you don't want a user being created without an email being inputted so then let's continue moving through our fields we're going to go to age now age is just a little bit different from the other ones the main difference is just that um we want to make it a number instead of um a string not only that but uh we also want to make it positive right we don't want to make allow negative ages because that's not what an age is you could maybe force something to be negative by adding the negative one but yep allows us to specify that we want to make this positive also um there's no such thing as an age like 3.14 that's not an age you don't want to allow that you want to allow whole numbers so are integers right so i can specify that an age must be an integer and yup again will specify to us that um this is basically it has to be this way so this should be it but there's another thing i want to specify about age if you're making a website which for example you need to it has to be 18 plus you can actually come over here and put a minimum or a maximum value and just specify that i'm only allowing this field to have a minimum value of for example 18 right and you can save this we're also adding the required one at the end just because um we obviously want to make this required but you can already see how powerful yup can be and how easily you can prevent yourself from from having weird user behavior in your website by just specifying by just specifying exactly how you want the user to fill out the form then over here we're just gonna put out the last two which is the password and the confirm password now both both of them will be very similar um the first one will be yup we'll just say yup it will say a string right but then let's say that you don't want to create weak passwords right we don't want to have passwords that are too weak or too strong well with yelp you can create a pretty good password tracking system um one way you can make that is by saying that you want those text to have a minimum amount of four characters and a maximum amount of i don't know uh let's say 10 no i'll say 20 characters right and you can also say we want it to be required which is the same as before now we can add more stuff for password you can actually for each of these fields if you're familiar with the concept of rejects um which is something we learn in computer science and you want to write your own rejects you can also also do that which is pretty cool you up perfectly allow you to do that but we're just using these functions in this video because they're way simpler so finally we're gonna put on the confirm password um fun field right and this one is a bit different because um we want this to be exactly the same as this one because we don't want you to try to put a password different on those suits right the whole point is to check to see if you're actually putting the correct password so what i want to do over here is i just want to specify first that it has to be a string but we're not going to put the min and max because if i check if i write a check over here saying that we want them to be the same then it technically already implies that it will have a minimum and a maximum so let's just specify that we want both of them to be the same and it should be fine now how would we specify this well there's kind of a hacky way to do this and and yup um and it's a bit complicated to understand but it's it's it's okay it's just the way that you up is you is created right so the way we say it is we want the confirmed password to be one off and we can pass over here an array so we're just saying that this has to be one of the the stuff that we put over here now what exactly we want this to be one off well we want it to be one of the password right we want this to be present uh ignore that we want this to be equal to this so if we make this uh be one of an array that only includes this then technically would be it would mean the same thing right but how would we get what we get the information or the the value that the user inputted for the password well with yelp you can just say yup dot reference or ref like this and just specify which of the fields you want to to get the information so i'm going to say password over here it has to be the same as this and we're also going to pass over here a null value in their array just to say that this is the only field that we need so right over here this is all the check we need we're also going to say that we want it to be required just to again just emphasize that although uh this should probably do the deed because like it won't pass through anyways right so now what we've done is we've specified the format of the data we want in our form which is amazing but how exactly do we tell react hook form inside of this on submit that the data should be of this format well the way we do this is we actually gonna get this over here and put it below the the schema thing because we're gonna use it and on our react our use form over here we just want to pass in an object and it allows us to pass something called a resolver now a resolver is just where we specify um how our schema will look like but we need to use a function that will um be that we will pass the schema um to actually turn out to be the resolver that's a little bit complicated but that's just how um the integration between yep and react hook form works and in order to get that function we actually need to install one more package and the package we want to install is we're going to say npm install at hook form slash resolvers now this package will just and will give us a function like i said that will help us with the integration between the two libraries yup and react hook form and to import that function we're just going to say import from at hook forms slash resolvers slash yup so this will give us a lot of functions for a lot of different libraries these are all the libraries i think um react hook form has um an integration with or is compatible with but the one we really want is yup because it's the one we're using right so over here we can just import what is known as the yup resolver and we just set the resolver of the used form to be equal to yep resolver schema inside of it so this we're just saying we're just telling recruit form finally that this should be the format of our form and this is great it means it should be working and you'll see that now if i come to my google chrome over here and i try to submit this form uh without the full name right it will actually not work no matter how many times i click if i try to put something over here it will still not work because we're still not fulfilling the form well let's think about it what are we not what are we doing wrong first of all this is not an email let's just write here something that looks like an email such as email at um gmail.com right this kind of looks like an email will it work no because 3 is less than 18 which is a requirement we made for age so let's go to 19 right now it should be working well no because now the passwords are not the same so let's make the passwords the same i'm gonna i'm just gonna write same the word same for the password and the same word right uh this is actually confusing i'm just gonna write uh nick and nick i don't know why i chose that name as a password but yeah so now it looks like our form is actually correct right we have this word over here i can even write pedro to make more sense but we have a name that looks like a name an email that looks like an email an age that is that looks like an agent also is above our required age and we have a password that is the same on both fields and also fulfill our requirement of being at least four characters long so let's click on this button and you'll see that finally it passes through right if i were to make this one character less you'll see it won't pass and if i were to make this um the same character as before but one bit different than the other it would also not pass so all of our checks are working perfectly and you can see how this can be really nice because you're not sending wrong data to the backend does this mean you shouldn't validate your data in the back end well no that's that's something for another video or some sort of back-end course that i make in the future but you should be validating your data on both the front-end and the back-end but this is how you would do it in the front end by using something like react hook form and yup now you might be wondering okay um it's not submitting but the user experience isn't pretty good because we're not seeing uh any ui changing we're not seeing any display that we actually have an error in our form so that's what we're going to be working on right now okay so how exactly are we going to write down the the errors right so it's actually pretty easy um with react hook form they actually have something called the form state which is just the state of the form which is obvious but yeah you get what i mean and you can actually grab from the form state all of the errors that um that you can get from it right all the errors that are currently being handled from yup so this over here should be an object containing each of the fields in the form and their potential errors right so i could come over here and i could create for example a p tag right below the phone full name input and i can say that we're going to display the errors which is what we're getting from the use form hook dot and then we put full name and it has to be written exactly how it's written over here and then if that has an error then we have to put a question mark because remember this might not have an error but if it has then we're going to read the message now let's check to see if this is going to be displayed well you see at least right now um there's a space for a potential error we can fix that um in the ui if you want to but let's try submitting this without a full name you'll see that it immediately shows that full name is a required field now this error message looks kind of ugly right because um it just looks it's the worst thing i've ever seen in my life uh we want us we want to give something more that looks more real that doesn't look like code so you can actually specify the error message in yup by coming over here and saying okay if it fails on the required part which is what it's failing right now because we didn't type anything then the error message will look like this full name or something like your full name is required something like this and now you'll see that if i try again the the message is different because now we specify the message we wanted also i don't know why but i like when um when forms like with errors have actual um are kind of red so you could actually specify the color by going to your css and just adding some sort of um color to all of the error messages right for me i'm just gonna use the p tag to specify but obviously maybe give it a class name or something like that but you can see that now it kind of looks like an error right so let's add more more errors to all of the other stuff right so we're going to do one for the email and one for the age and obviously one for the password and one for the confirm password and we got to change the field for all of them because they are different now so the email will say email age will say age and same goes to password and confirm password now let's test to see how this looks obviously it's failing everything but let's refresh the page and let's type um something i'm going to put my full name over here and now let's type an email such as i don't know tech gmail.com then let's type some age remember it has to be over 18 so let's actually fake it and put 15 then go to password and let's write a correct password the password will literally be password to make it less confusing and i'm going to actually put the correct one over here as well so let's see if this will fail well obviously it should fail because um 15 over here is not the correct age and you'll see that this is the only one that actually um actually like is displayed now let's make this 18 and you'll see it automatically when you fix it it automatically stops displaying the actual error if i go down it will trigger again and it will say well it has to be 18 so go up right so let's try it again but let's make the passwords not be equal you'll see confirm password must be one of the following values this isn't a bad error message because it doesn't explain a lot so let's actually change that so when we say over here that um one off has to be of the type password we're saying that we want them to be the same so to specify the error message over here we can just come and say passwords don't match and this would be our error message so instead of just putting directly because you can see we already have an argument to this function the error message will come to on the second one if this is the case differently from the error message and they require now we can check that but um you can see it restarted our form so i'm just going to fill it out real quick and i'll be back in a second okay so now i just fill that out again and you can see that um we still have one last character here so they're not matching and you'll see that now our error message is the one we specified which is good so now let's test to see if this is working if we actually have the correct data you'll see that if i click on submit it will submit the form and that's amazing because it means it is working it's validating everything now i'm not going to continue with the video just pacifying more but you could go around and put error messages on each of these functions to make your thing look cooler you can also make the form look better my point is not to make a good css for this video it's just to show you guys how to actually make forms work in react and i really think using these two libraries really help you a lot it makes the job a lot easier than it it normally would be so if you enjoyed this video please leave a like down below and comment what you want to see next subscribe because i'm posting um twice a week and i would massively appreciate it um i'm really enjoying this course so if you want to check out the code it will all be in the description and yeah that's basically it really hope you guys enjoyed it and i see you guys next time [Music] [Applause] [Music] [Applause] [Music] [Applause] [Music]

Channel: PedroTech

Views: 31,510

Keywords: computer science, crud, css, databases, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, react-hook-form, react-hooks-form, reaxt forms, formik, yup, react yup, react form validation, react form errors, react hook form

Id: wlltgs5jmZw

Length: 28min 44sec (1724 seconds)

Published: Fri Aug 12 2022