React Form Validation Using Custom Hooks Tutorial - Beginner React JS Project

yo what is up everyone so i made this form in react and i wanted to show you how i did it and include simple form validation and this is just front end so if you want to add back-end and all this crazy fancy stuff to it then feel free to refactor the code after but pretty much you can see here if i were to go in and sign up it's going to ask me to fill in the required information so i'll be like here i'll add my name here and then for the email let me just put like a random email just to show you and then i'll say email address is invalid so let's just say brand spell my name bunch put that for now and then if i hit sign up there that one decides to go through and then if i do like one two three it's gonna say it needs to be more six characters or more so i'll just do one to three again and then here i'll do the same thing but i'll add an extra number just so they don't match and then i hit sign up and i'll say that they do not match and then i'll backspace it hit sign up and then i got a little fancy little astronaut character right here and it says that we received your request and then i'll just refresh the page here so it's super simple just front end but if you want to see how i created this then let's go hop into vs code and let me show you how i made it all right so now i have my terminal opened up so i'm gonna go ahead and type in npx create dash react dash app and then i'm just gonna call this react form and that should be one and then i just put dash yt for youtube and then you can name whatever you want to and then we go ahead and press enter and then once this finishes loading i will see you on the other side all right so mine finished so i'm just go ahead and cd into the new file so cd react dash form dash v1 yt and then i'm gonna go ahead and say code dot so i can open up vs code if you don't have that installed just do a quick google search it'll show you how to set it up and then once you do you can just type it in and automatically opens up vs code for us so let me just drag this over here and then let's go ahead and let's do on the keyboard command j and this opens up the terminal and then what i want to do is i'm going to type in i have yarn so if you go back you don't have yarn whatever just says here is probably going to say npm start if you don't have yarn so you can just type in either yarn or npm and i'm gonna say start and then i'm gonna press enter it's most likely gonna show me an error so if you do have this error then just copy this so we're right here go to the right create a new file it has to be dot in v then i'm gonna just paste that in there save it and then i go back press the up arrow to bring back what i just typed yarn start again and it should go so if you don't have that error and i already have the app open so let me just type y so pretty much now we have the beautiful react logo so we have everything loading properly that's good so let me just bring this to the side here all right so let me exit off this exit off here and then i'm going to the src now and let's get rid of these three files right here so setup tests service worker and then logo so let's click on that setup test i'm gonna hold shift click on logo so like all three of them delete so right click delete move to trash index.css we can delete that and then also app.test.js we can delete that as well index let's get rid of this little code right here click on the five here it automatically selects the whole line let's get rid of that line here index css get rid of that here and then command s will save it and then in here we just go to number two click it deletes this line for logo svg and then let's just go inside the div delete everything and then just be like yo save awesome now we are good to go so now let's go ahead and let's just create all of our files so i'm gonna go ahead and right click src new file and then i'm gonna go ahead and call this one form dot js and i'm gonna create a form and it's going to hold both the sign up and then also the success page and then let's create a new file let's call this one form sign up dot js and this is going to be our input where you type in like the name password everything and let's create another file let's call this one form success dot js and you can name this whatever you want to and then this one essentially is the little logo we saw after i submitted it that said we receive your request and then i want to create a let's see form.css so let's go new file say form.css and then for now let's just keep it there and let's just start editing some code here so form sign up now i have this little extension that saves my life so go over this icon type in es7 and download this one right here by diaz not nudger i don't even know how to pronounce that pretty much this one right here 1.7 mil when i'm filming this and this basically allows you to type in react code super quickly so right now we're going to create we're going to import an error function at x at the same time by typing in r f a c e press enter boom so now we have the import reacts the arrow function cons form sign up and also exports it so now you mainly don't have to type it in anymore and then let's just put in here for now let's just say sign up just for filler let's save that and then uh let's go to our form this is the exact same thing rface enter boom and then i want to go in here and just do the opening tag and let's just import the form sign up and a cool trick is if you press enter right here before finishing it off it should auto import it and sometimes it works sometimes it doesn't if it didn't work for you i can like delete this really quick just show you the other hack is you can go the end of it and then control space will load it up and then you press enter and boom just like magic it's there again and then let's just put a closing tag save it here and now we can't see anything because we need to go to app.js and let's change h1 let's input the form now enter so it auto imports there close it off save it boom now we have sign up so awesome we got everything set up so now go back to the sign up form sign up component and let's go ahead and start adding in some code so let's go ahead and let's delete all of this code free right now inside of it and in the return let's just go ahead and let's just start coding out the jsx so i'm going to say dot class name not class name my bad dot form content dash right and i'll press tab and then it automatically adds it in for me if not just add a div with the class name of form content right and then i'm going to add a form with the class of form and then let's get rid of the action and let's go inside the form and then let's do h1 let's press tab let's just say get started with us today and then create your account by filling out the information below so this is just the text we saw above the input forms and then underneath this h1 i want to create another div with the class name form input so dot form dash inputs press tab inside of here i want to create the label now so let's do label dot form dash label and again you can name your class names whatever you want to but um it doesn't really matter and then let's just keep it technically just say this for the um username for now it doesn't really matter for this this is just a little mini project but again you can get fancy with it and then inside of the label let's do input dot form dash input press tab and then in the type i want it to be text i want the name equal to quotes username and then let's see let me save this really quick and let me put this all on the separate line so you can see much easier and let's just fancy that really quick and then under here inside the input i want to add the placeholder so that equal to enter your username and then we're going to add values and onchange function onto here but for now let's just let's just keep it like this for now and then we can get it all fancy later and then pretty much we're gonna do is just rinse and repeat and copy this exact code here so basically this div down to see where it ends right here let's go ahead and copy this press enter and then paste and then now we want this to be the not username we want this to be the email now so let's change the type to email name is going to be email and then enter your email right there and then in the label i forgot to add something in the label so the form label ends right here and i don't know why i put i shouldn't have put the label i should have put the input outside the label and do that right so basically command x this and this should be under the label so in the label this should say name or username and then same thing here this input should be outside the label so there should be email so save it now and boom it should be like this so there's pretty much a label here and then the inputs username email enter email same thing here so now if i if i were to go ahead and just click on the label you notice it doesn't auto select the form so if you could we could do here and set an id equal to user name and i save that i click it now it it auto highlights it you can keep that if you don't you can leave it out for now but um let me just add that in here so input let's change the id to email also html for you let's keep the email there and boom okay so that's just a little extra stuff i want to add here and then we're pretty much gonna copy and paste that two more times and that's just for the passwords so basically go back to here let's take this div and then boom one under that div two change all of this so a little cool trick is highlight email i'm gonna do command d selects everything that matches the word that has email in it even the uppercase one you can see there and i'm just going to change this to password and then i just want to make sure the label is called capital p password and then please enter your password here and if i save that you can see it's like this and then same thing for the second one i was going to command d select them here and call that password to and looks like i didn't select this one so let's just call this confirm password save it and then let's just say id yeah it should be good so we're clicking them all here boom all right so pretty much the the main size of it and then next go underneath this div here and let's add our button so let's do button dot form dash input dash btn and then inside of this button i want it to be a type equal to submit and then for the test which wanted to say sign up save that here and then the last one i just want to add is like a little text at the bottom to be a span and then let's do dot form dash input log in here press tab inside to say already have an account log in a href equals to just put a hash for now and then here save it and boom all right so this is pretty much our form and now we just got some css to make it all fancy and lieutenantly could do that right now so let's actually let's keep that at the end because this is more focused on react we'll add all the fanciness later but uh pretty much now what i want to do is let's add some state and use some react so that we can actually do some magic on here so right now what i want to do is i'm going to create a custom hook so essentially i want to keep all of our state and functions within this component so i'm going to go ahead and right click the src and create a new file call this use form dot js and for custom hooks you got to start with use and then after you can name it whatever but i mean you could go to the react docs and look at it in more detail if you'd like but pretty much in this used form we're going to do is going to import curly braces use state and then also use effect from react and now i'm going to say is const use form so that equal to an arrow function now in here let's set up our values so we have a username email and password and password confirmed so i'm going to say cons and opacity array and then our initial values so let's call this one values and the function to update this state so i'm going to call this set values equal to use state and then m pass in the curly braces press enter here and then i'm gonna say user name i'm gonna set it equal to empty string then we got the email and then we have the password and then the last one was password2 and leave it like that and then also i want to do is you stay with our errors as well so let's go ahead and let's just add the state up and then we can go back and fill everything in after so let's just say const errors and then set errors equal to use state and set into an empty object here and then for now let's keep it like this and then what i want to do is whenever i change something i want this to update the values so in the input form we're going to call this a handle change function so let's just call it const handle change let's set that equal to e so short for event and set it equal to an arrow function and then what i want to do is set the values so now i'm updating the values and i want the values to be equal to spreading in the values and then also i want it to be e so let me actually get rid of this crazy pop-ups e dot target dot name which over to the signup form it's targeting the name of each input so name here also the name here name here password and then name here would be the second password and then i'm gonna do the colon and it should be an in brackets my bad here and then colon here and then i'll set it to e dot target dot value now we can actually make this code much cleaner so we can and say cons curly braces and i'm going to say name and then value and set that equal to e dot target so then that means we can get rid of this right here and then also get rid of it right there so now i'll go ahead and technically i have to return this as well so once i return it let's go ahead and say return the handle change function here and then also we have to export default use form so i'm going to save this right now nothing's gonna happen because we have to go back to our form sign up and now we need to do is actually add this handle change function we just created which pretty much updates the values and we need to add that to all of our inputs so let's go into input here and under the placeholder i'm just going to say first i'm going to have the value i want to set the value equal to values.username and then under that i'm gonna say on change equal to curly braces handle change and then let's copy these two lines of code go under here copy and paste into the second one change this one to email and then just rinse and repeat this for the remaining forms you have so this one should say password and then down here this one will just be password two so see password two and now what we need to do is actually import the use form custom hook into this actual component so i'm gonna go here and say import use form from dot slash use form and then in here we have to actually destruct the values from the used form so i'm going to say const curly brace handle change and then let's do comma values i'm going to say that equal to use form and let's just keep it blank for now and right now it's going to say properties value username of undefined so i'm going to go back to actually return this into the use form hook so let me add it down here let's see values here and boom all right so now let's go ahead and let's just type stuff here for now so it looks like confirmed password isn't set with the password type so password to should be just password not password to type so make sure to type on password two is just password and right now we can type here all right perfect and then let's add email boom sign up and it refreshes so right now what i want to do is i want to actually add the handle submit function now because you saw what happens when you type everything in it will pretty much refresh let me just do it again for you it refreshes so let's prevent default that so if you've seen forms before you already know this trick but pretty much when you say cons handle submit equal to e very similar to the handle change and then let's just say e dot prevents defaults and then parentheses and let's just save that for now and then let's go back to actually let's see if we need to return this at the bottom yes we do so let's do handle submits and then let me go ahead and let's just save this for now go to form sign up this time and let's add this onto our form so let's go up here to form and let's just say on submit equal to curly braces of handle submit and that's going to pass this in here so let's just say let's pass it in comma handle submits and let me save this and now if i type stuff in again sign up you can see i click it no matter what happens it's not going to submit because we got the e dot prevent default all right so now let's go ahead and we need to have a way to show the actual errors so right now there's nothing in terms of functionality saying whether or not i typed in a proper email or the passwords match etc so i'm going to do is create another file src claim new file just call this validates capital i info dot js here can i whatever you want to but i'm just going to call it this and then in here it's pretty much going to have all our logic to tell us whether or not whatever values we type in are correct or not so again there's our third-party libraries that make your life 10 times easier that you can just plug and play but i just want to do with the i guess you can say the harder way just to show you like what you actually have to do so let's just say exports default function and let's call this validate info then i'm going to pass in as a parameter the values and then let's just say let errors equal to an empty object here and now here's our first set of logic so pretty much say if parentheses and then the exclamation mark and say values.username and the added.trim so that we can get rid of the whitespace and then in here basically going to say if errors.username if this logic right here essentially if it's not true then i want to set that equal to showcase the error saying username required so if i if i would just type in a space and nothing's in there then this should show that the actual username required will pop up and then under here i'm going to add another one for email so let's just say this is um email so you can see it if values.email it's not true i want to say email say equal to email required and then else if not this crazy code i got off the internet but pretty much i'm just going to copy it in and then you can go to the github if you want to to see like exact code and pretty much just rejects in short to make it to where or regex how you want to say it to where it validates if it's actual email or not and i think even right now it uh even if we don't have this code i'll still say like email needs to have an at but i'll just add this one just so we can have it in our code because i wanted to say right here curly braces i want to say errors dot email equals to email address is invalid so if i were to do anything without like at gmail.com if i don't include like dot com or dot whatever then it should showcase that error even like back here on the uh original one like if i just type in this it's gonna say email address and valid right even though i inputted something it's still saying it's there but so if i were to take out this and say it'll required so this is saying there is a value let me go back so this line saying there is some value if there's no value then i'll say email acquire but then if there's not like the email code then it's going to say email address isn't valid so this stuff is it's pretty self-explanatory but if you can look into it more you feel free and then we'll do the same here and say exclamation that values a password and that says you're going to say same thing with errors dot password is equal to password is required and then else if values.password.length is less than six so i mean you can do whatever you want for this but essentially if i type less than six characters from a password it's going to say please enter six or more characters right so have you ever seen like please enter a stronger password on an input field before this is essentially the same logic here and then we're going to say errors dot password equal to password needs to be six characters or more if you're wondering why i have like single culture double quotes when i save it it automatically formats it for me and it doesn't really matter at this point so you can have the both if you're just curious about that grab my settings where it formats it when i save to like if i say right now you can see everything went back to single quotes just in case anyone's like well what's happening the last one is just the same uh thing but the password two but let's just say if values.password exclamation mark in the front i'm going to say 2 curly brace errors.password2 we're going to say if there's nothing we have to say password is required then else if and this is where it doesn't match so like if you say values.password2 does not equal values.password then we have to do the curly braces then i want to display the error message that says password to say passwords do not match now this is just like simple logic that i have for this example feel free to refactor this or use in a third party library if you want to make a life easier but there's like the common logic here and then you can go fund have fun with this and look up more details and then at the end it's going to return the errors so save this here and right now nothing's happening so let's go ahead and go back to the actual let's see let's go to sign up where is it at here and i want to import this actual function so let's just go ahead and say import at the top of form sign up import validate i'm just going to call it validate from dot slash validate info and then what i want to do is add this here to validate so that's going to set this value of use form so validate and i'll save it right now and then what i do is go back to use form and what i want to do is display these values so if i were to go into the handle submit i'm going to say set errors which we made earlier right here i'm going to have the validate function i want to set the values that we had added and then if i save it i need to add errors down here as well save that there and then let's see one more thing i need to add saying right now validates not defined so i need to pass that in as a parameter here so let's do validate save it here and let's see right now if it showcased anything so right now it's not showing anything because we need to add the actual code into the sign up form so that it can actually show us so we go now back to sign up form and let's just go below the first input for the username and i'm just going to say curly braces here we're going to say errors dot username and this is a short little trick where you just do double and signs and it's automatically going to say like if errors the username if that is true then we're going to return whatever we pass after that so i'm just say the p tag and i want to pass in curly braces errors dot username and i believe if i save this it's going to say errors is not defined so let me see if i need to add that up at the top right here into add it right there next to everything else we'll save it now and now it's showcasing now if i sign up boom is going to say username is required so pretty much what just happened is it's saying error username we just triggered it from the validate info and then we're basically showcasing this value right here because i didn't type anything into the actual username field and if i were to just say like something now it disappears so now we can actually take this line of code copy this here go under the second input and then we can change this to email and then just set this equal to the value for the errors.email we set boom now we have username and email required and let's add this under the input and this one's going to be password so let me command d so it gets both of them save us some time boom now password is required and then the last one will be password two so it's command d here alright i messed up let me go back back down to password two command d password two save it and now when we sign up boom everything is pretty much showcasing that it is not looking good and then also we command b and uh let me go to formula css and technically this uh let me see if some sign up let's import that actually and let's do um let me see if i should import that yeah let's just import it at the top of form sign up so let's say imports dot slash form.css and let's go to so right now this is input right and then this is a p tag so if i can target input i can actually just target form dash input this class name and then say p after it so i can target here i can go to foreign cs and this is the form dash input p let's just do color let's do red so now if i sign up let's see at that and target this properly i think it should be form inputs did i make it right let me see yeah actually the label is form label class names form input so my meant to target the div so the div so that should be form inputs save that here and now you can see that it clicks it now you can see that we have the little red action going on here and now let's go ahead and right now if i were to actually type in let's see here if i type in that it's going to say the add sign so this automatically defaults do gmail.whatever com save there and then passwords one one two three it should say password need one six characters so let's say here password do not match so perfect there and then right now when we hit submit sign up nothing is happening so let's go ahead and let's add that last parts here so let's go to use form now underneath the handle submit we need to create some state first so let's go under here let's do under errors and let's just say cons and then the brackets let's call this is submit ting and then let's just say set is submitting equal to use state of i want it to be false because obviously it's not submitted yet and then under here i want to say once we submit one set is submitting to true and then if i save this right now let's see all right let's go like this just type everything in sign up right now nothing is happening so pretty much what i want to do is actually implement a function so that we can actually see this happening so on the actual form let's go to form now the form component i want to first off let's import actually let's keep it for now like this let's import this stuff after but basically what i want to say is cons and then the brackets i'm going to pass back in is submitted comma set is submitted equal to use state of false and then here's a function so pretty much this is the function that's going to set is submit to true so say function submit form then i'm going to say set is submitted to true and then i'll save this here and now it's going to say usage is not defined so we have to add use state here use state and then we need to go back to the form sign up and we have to destructure this and pass in that function so submit form here and i also want to pass in useform as the actual submit form comma and the use form value so i'll save that here and what i'm doing is pretty much this we're going to create some code here to where whenever basically if i write it out here set it under here so i'll curly brace here we're going to say if it's not submitted if that's true then i want to display essentially form sign up and then pass in submit form equal to submit form and make sure it closes out properly here and then else if i do actually have the form submitted then i want to pass in form success so it looks like my let's see when i must have added a parenthesis in the wrong let's see so let's take a submit form equals let's see dot is submitted question mark parenthesis let's just let's add these on separate lines okay here it is here and then this one shouldn't be there all right okay now it's going to say form success not defined so i have to actually import that so let's just go ahead and i'm going to do alt shift down and we technically haven't added anything into form success yet but let's just import it for now then let's go back to it success and then from form success let me save this here and then let's get rid of this top form sign up so it's much cleaner and pretty much let's go now to form success component now this is pretty much the the little thing where it says like hey we submitted the actual form so now let's go ahead and let's do r f a c e press tab and then let's just add in some simple jsx in here so let's just say get rid of this let's see dots form dash content dash right inside here is the form dash form success and let's just say we have received your requests and then let's do the image and if you uh don't have the image that's actually um yeah let me just add this for now image dots form dash ig2 let's press tab here the src is going to be image slash image 3.svg and let's just call this success image and we don't have this actually imported so we're actually going to go let's go to my github in the bio and then you can access all of the uh files there so here i am on github and pretty much you can just download this go here and just download the zip and then you can basically drag in the public folder and if you don't have that you actually drag in the images there so that way you don't have to like bring in everything but that's pretty much what i'm going to do so i'm pretty much going to go to my file and let's just drag in this image folder and there's a couple images in here so you can like play around with them but let's just copy the folder there so now i go to public i have this image thing here so i'm gonna save it and right now if i go to the let's go to form let's comment this stuff out and let's just see if my form success is actually showing everything so perfect we've got the little man in right here astronaut and a little text here so let's cancel this out and actually let's just come and see this and since we're here we might as well just copy my css so i'm going to go to my github because it looks nothing like what we have here i'm gonna save you some time just go to form.css from the src go to raw here command a command c and then go to form css and then let's just get rid of this because i already have it save it and just add all this code here if you want to see the css and read it feel free but since this is more in react i want to waste like 30 minutes just going through css and then also app.css i'm just going to copy this in two and let's see it's being slow right now but once it's finished let me just see if i can click it again alright yeah let me just copy this into app.css so get rid of all this so command a backspace then command v save it here and we pretty much should be let's see looks like i must have messed something up on the let's see form oh yeah the form also is missing a lot of um taken on the top two so let's actually import that too here so let's do input dot slash form.css and then i wanted to actually showcase some stuff on the top because we have to have this in order for the form to make any sense so in the return let's just add some fragments so here and then let's add the bottom two but on the top one i want to say let's do let's get rid of these dibs first and then what i want to say is dots form dash container press tab and that's pretty much going to bring everything in there so let's do span dot close dash btn let's put an x here for now under the span i want to do dot form content dash left and then inside this then we'll do image dot form dash img src's image slash img-2.svg and then alt let's just do spaceship and then underneath so underneath this form content left did want to press enter then i want to add in this code here so command x and then when i go back here save it now now we have our beautiful looking form all right so now when we hit sign up is currently it's literally submitting a request because there's nothing telling it to that it's not so let's go back and let's fix that code now so let's go to on use form so when i go down under the handle submit and then pretty much this user we're going to use use effect and it's essentially going to display the errors if there are any and then if there isn't it's going to allow us to submit so i'm going to say use effect and then parentheses and pass in the arrow function here and then curly braces here and i'm basically going to say if and they're going to say object dot keys and we're looking at the errors and outside the apprenticeship errors and say dot length if it's equal to zero meaning there's zero errors then we're going to basically return is sub miting and then the curly brace here and then after that we're going to run the callback function so i'm going to say call back parentheses here and then if i were to save this right now it's going to say callback is not defined so i have to pass this in at the top let's say call back comma and then validate and then let's save this here and now if i were to try to submit this now also i forgot we have to actually add in right here in the user effect dependencies or array brackets and i only wanted to trigger when it updates the errors so here now we can go and then go back and now if i hit sign up it's going to say username and password everything's required so let's actually try to submit something really quick and then sign up and boom it's currently submitting our request so right now here actually i can just still refactor the valid info it should say um no actually form sign up this should say where is it at on the second place folder should just see enter your password save that there and then now we should be good here perfect alright so let's just let's just try to make some errors so sign up it's not going to work okay so let's just put a number here email there's no dot com and it's invalid password let's do let's do a short password needs to be six passwords do not match and boom all right so now it looks like everything's working for now so this is super that's a basic way to set up react form validation but obviously you'd have to implement back end and do a lot more complicated code but definitely this is a starter basic template so this pretty much ends it here so if you did enjoy this video to go ahead and give this video a thumbs up subscribe if you're new to the channel i'm pretty much just docking myself learning code building projects and then just sharing with you what i've built so if you want to follow me along that journey then definitely hit that subscribe button aside from that i will see you in the next video peace

Channel: Brian Design

Views: 175,360

Keywords: react form, react form validation, react forms with hooks, react form validation hooks, react formik, react form submit example, react form validation best practices, react form validation using regex, react hooks, react project, react js, beginner react project, react tutorial, beginner react tutorial, react forms with material ui, react formik validation, how to add react form validation, validate form in react, form input validation, react js form, formik, react login

Id: KGFG-yQD7Dw

Length: 44min 47sec (2687 seconds)

Published: Mon Aug 31 2020