Form Validation In React Using YUP Tutorial

hey guys how's it going i'm back here with another video and today i'm going to be talking about a topic which a lot of you guys asked me to make a video about which is basically form validation and input validation using react.js and i'm going to be using a library which i honestly don't think there's like correct me if i'm wrong but i only know this library i've always used this library for input validation so i believe it is the most famous one if you search any tutorials online most of them will show you uh basically teaching using this library so this is the library i'm going to be using and its name is yup it's very famous and we're going to be using it in this tutorial so basically you can see right here i have a normal application in react i just load it up as you can see right here it has everything and the only thing i did was i created this small kind of form right it's a small application which there's just a form with three inputs and a button and why did i choose basically the inputs one of them is for putting the name one of them is for putting the the email and the other one is for putting a password so why did i choose these three inputs these three like pieces of information that i want the user to get well because those will teach you guys all the different stuff that you can do to validate your inputs using yup and i'll show you guys for example how to make sure that the the person submitting the form wrote a valid email like they didn't just enter a bunch of random letters i can also show you guys uh like how to validate if the user actually put the a password that matches for example either just uh like if if we want the password to be between five to ten or ten letters then we can definitely make this work we can validate to see if that is the case we also validate for much other stuff for example using rejects but i'm not going to show that in this video but this is basically what we're going to be doing so you can see right here we have our simple project and we need to install you up into our application i have already installed it but if you but but if you haven't uh which i guess you you didn't then you have to come here to your terminal and you have to just write yarn add yup just like this yup and or if you're using npm you can write npm install yup and that will work and when you finish installing it then it is all said and done so basically you can see right here we have a very very simple application and what i want to do and what i usually do is i create a folder called validations into my project so i'm going to come over here and create a folder called validations and i guess many people also do this because it has the material ui theme color for validation so i guess it's kind of like a standard for making applications and inside of here i put all the different files that require some validation for example if we want to validate a form for creating a user in our application then i'm going to create a file called user validation or i can just i'll just call it user validation like this dot js and if i want to create another validation file it's just for our organization purposes so i'll create a different one for each kind of form i have in my application so we're going to be using this one right here and in order to use yup we need to import you up into applications so let's just say import all as yup so we're going to import everything inside of the yep library from yup so basically we're gonna why do we do this well because we need to import everything existent in the yep library and we want to import that as a to represented as the variable yup so now that we imported this we can basically just come over here and we can start defining our schema so what do i mean by schema well the result of this form so when this form is submitted we expect it to be basically almost like an object right so there's the name property with the name value so it's whatever we wrote over here there's the email with the email value and there's the password with the password value that we put so in order to do that we gotta like to validate that we gotta create a schema that represents the same thing so in order to create a schema we can come over here and say something like const uh some user schema i'll call it user schema and equally to yup dot object because it is an object and then we can just put dot shape and what this does is now instead of here we can best basically define our object that will represent our form so just like i mentioned before our object for the form will contain a property called name for example and i'll just write all the properties first so name there's going to be an email property and there's also going to be a password property as you can see right here so what do we actually put inside of here well we actually put the type definition for our property for example name we want to we want it to be just a simple string and we want to make sure that we receive that string so how do we validate that well with yup there's a property called string and this will basically make sure that whatever we put a name is a string then we can also just put that we want it to be required so that we we will never submit a form without having like with having an empty string for the name so this is all the validations we actually need for name because we don't care like a person can put a a 20 character name that we don't we don't care that much it doesn't have to be have any more validation than just this however with email it is important that we check to see if it is actually similar to an email right if we have the ad symbol if we had the dot com or dot whatever we got to see if it is an email so how do we do that well yup already takes care for you basically you can just come here and say yup dot string meaning we are first making sure it's a string then we can make sure it's an email by just passing the email property and then finally we can just say we want to make sure it is required so this is how you basically validate an email and for password which in my opinion is the most interesting one you can just come here and say as we did before yup dot string we make sure it's a string then we want to basically make sure that whatever we put inside of here is between a certain amount of characters right we don't want someone to put a password that is too small or a password that is too big so let's imagine we want to make it so that you can't put a password below 4 characters and you can't put a password above like 10 characters yeah so let's just do it this way so in order to do make it so that it has to be at least four characters you can just pass the min character the mean property so we're going to say min 4 and now it's making sure that it is at least 4 characters and if you want to pass max we can just say say max and pass 10 characters here and it will do the same thing and as always we got a pass to say we want it to be required required at the end so required and now we have all the validations we actually need for our schema now you might be wondering well is that it well basically it is it's almost it because we can now we already have the definition this is all the validations we're doing in our form and if we want to access this in another fi in another component like over here we can just export this validation over here so export const and now we can access this schema wherever we want to so let's import this schema in our application so what is the name of that it's a user schema so we import user schema from and we can put the path towards the user validation file so dot slash validations slash user validation and you can see that like it's already grabbing stuff he knows we we can we we need a user schema from this and also we also need to import yup in this component why do we need to do that well because we are going to use another function from yep we can actually just import that function specifically but like it doesn't really matter but we're just going to import it up over here in this component because when we submit the form we want to execute a function from the up which checks against the validation schema that we created to see if our form data is compliant to that so what do i mean by that well let's do it right here let's actually make it so that when we submit this form when we click on the submit button we get an object that represents the values for each input so how do we do that well i'm just going to do it the the simple way which is i'm going to create a function here and let's create this function for example create user and over here we can just inside of here we're just going to first of all take an event because it's going to be the submit of a form and on our form we can just say on submit and pass create user so when we click on this button over here we're going to submit the form and it's going to go everything into this function as always we got a event dot prevent default because we don't want stuff to be refreshing when we click on this on this to submit this form so we don't want the page to refresh and after we do this we can basically create an object which is going to represent the form data so what what does that mean well let's create a an object called form data which it's going to be a simple object containing name containing email and containing password and how do we get this information well this information is contained inside of the event um inside of this event variable because this event variable represents whatever like the whole form so what we can do is for example if we want to access the the form the the the first the value for the first input in the form we can just say event dot target and targets is basically an array containing all the different inputs in your form we have three so that means that if we want to grab the value written so whatever is written inside of this first input we can just grab the first element in the array and say dot value this will return the value for the first input you could do the same thing for all the other ones and basically what this does is you'll see right now i'll just change this to one into two i'll just console log this so you guys can see let me console.log console.log form data let's take a look and see if this works right so let me open up my inspect element here let's look at our console and i'll just refresh everything i'll click over here write something like pedro whatever right now there's no validation so it doesn't really matter but i'll just write everything and you'll see that when i click on submit an object is console logged containing email name and password meaning that we're actually correctly retrieving the data from our form and creating an object for called form data so why is that important because now we can just check if this object satisfies the validation schema that we defined on our validations file so how do we do this well the function that i mentioned that is uh from yup that checks for validation is very simple well let's create a variable here called is valid it's just a variable representing a true or false statement it's a boolean representing if our form data is valid or not i'm going to set it equal to a weight because we need to wait for the validation to be done and to do that we need to make this async so what we want to wait is basically we're going to wait for the user schema dot is valid so we're going to ask is valid and we're going to pass the the form data so form data actually i don't even think we need to import you up let me try not importing it up yeah we don't even need to do that because we're already importing the users the user schema yeah that forget what i mentioned about yup but basically now we have a variable called is valid which represents the comparison between the user schema that we defined over here and the form data object that we get from our form and what does that mean well we can now just check to see if we actually validated our input so let's check and console.log the value for is valid you can see right here this shouldn't be valid for many reasons like for example if i if i remove this add symbol this shouldn't be valid at all because uh it's not an email over here and i think maybe i didn't count the letters here but it's probably not between the letters so let me click on submit and you'll see it will say false why is it false because it doesn't satisfy the schema we define but if i come here and i say something like i want my email to be my shadow at gmail.com and i want my password to be password um that's how many letters one two three four five six seven eight that's okay eight password eight letters means it's between and when i click on submit you'll see that it will say true if i make this pat this password huge and i submit it will save false because it is now larger than the max that we set over here so this is basically how you do and how you work with validations in react so how useful is this it is very useful and trust me you don't want to send wrong data to the backend uh a lot of people ask me like wait so i need to check for this kind of stuff both both in the back end and in the front end i would say yes i would never like large scale project i work on i validate i use yup on both the front end and the back end why because i want to make sure the data i'm receiving is correctly validated i don't want to be inserting wrong data into my database because that can bring that that can literally bring a lot of problems so i would recommend after like if you finish this video video i would recommend learning formic or any type of form uh validation system why because for example if i write here if i get this this isn't valid then i want to display a simple message over here saying well this email type is not valid and you can do this by using formic i have a video on formic and yup using both of them together i'm going to link that video here like on the card on the top right here so if you want to watch that video you can just watch it and yeah i really hope you guys enjoyed this video if you enjoyed it please like and comment down below what you want to see next subscribe because i'm posting every single day and i would really appreciate it and i see you guys next time [Music]

Channel: PedroTech

Views: 20,522

Keywords: crud, css, databases, javascript, learn reactjs, mysql, nodejs, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, programming with mosh, tech with tim, freecodecamp, form validation, yup, input validations, form validation in javascript, form validation in react, react yup, react validations, react email validation, react forms, react form validation

Id: RQ1E2EjyqY4

Length: 14min 21sec (861 seconds)

Published: Sat Nov 28 2020