React Form Validation With Formik and Yup

[Music] hello everyone and welcome back so today you are going to learn how to use formic what is formic formic is the world most popular open source form library for react and react native and we're going to create simple sign up pitch with react and i'm going to use bootstrap by the way and as you can see in the left we have the form if i click register we don't give any value we get the required error okay and if i click reset everything is clear and if i just give a value john in here say do email say john at com which is invalid email right if i click another field we get email is invalid so let's do uh join at dev.com and the error is gone and let's give a password say password and for the confirm password i'm going to say pass and we get password most match so let's say pass word okay if i click register now we get all the value in the console if i click reset it's gone okay that's what we're going to be building so very simple but by following this tutorial you'll be able to use for me to your next project so let's go to the vs code i have already generated react app in here you can use npx or yarn and let's start the app again to say yarn start enter so let's see in the browser this is create rack up by default and we're going to remove couple couple file that we don't need and we're going to remove the tas index.css logo report web files and set up this let's get rid of this file so now we get file it to compile because we don't have the logo anymore so let's go to the app.js file and we are going to remove the logo dot svg and we are going to remove everything inside the header so everything in here let's get rid of that just put a hello react now save and let's go back to index we need to remove the index.css and report web titles and get rid of this everything in here so now save now we should see hello react in the browser and we get a hello react okay so far so good so next we need to install booster pickage so let's add another terminal and in here i'm going to say yarn add boost strap hit enter and wait all right so it's done let's go to index.js file and in here we need to import the bootstrap bootstraps last this slash css less bootstrap [Music] okay so let's save so as you can see in here the phone is changed that's mean everything is work perfectly so let's close the index.js file and the app.js file we need to remove everything in here and i'm going to wrap our app with container class from bootstrap and i'm going to give a margin top 2 3 and inside in here i'm going to give a row and inside a row i'm going to give a column that's md desk i'm going to say 5 and in here we are going to put sign up a component but now just put sign up and in here i'm going to say column desmd 7 and inside in here we are going to put the image which is the illustration so i'm going to copy my illustration and before that in a source folder i'm going to create a file called not file folder call assets and insert assets i'm going to put the image which is the rocket dot bng so now we need to import the illustration in app.js file so we can say import just give a name uh rocket img let's say from dot slash set slash the filename which is workcat.png okay so we need to bring the rocket img into source right here so we can just remove the code and put that right here and inside in here i'm going to give a class name say class name set that equals to img das fluid and i'm going to say width into 100 wait not 0 100. so now save let's take a look in the browser so as you can see we have the sign up in the left and the illustration in the right side so now we need to create another folder i'm going to say components and i'm going to create file called sign signup.js file and inside in here i'm going to generate a functional bas component and inside in here i'm going to put h1 let's just say sign up okay now save let's go back to app.js file and in here we need to import the sign up save from dot's last with components let's sign up like so and now we need to bring the sign up component inside in here let's say sign up like so now save we should see sign up with h1 in the left side and here we go scene machine sign up so next we need to install formic because if you want to use formic you need to wrap your form with formic component so now let's add a formic let's say formic and hit enter alright so it's done now we need to import the formic and form from formic and we need to wrap our sign up component in here with for me so we can say for me with capital fee and inside in here i'm going to remove that for now we are going to say for me set it equals to our function in here and i'm going to console.log to for me okay just want to show you so now save and let's go back to the browser and open the console by ctrl shift g and now as you can see we have all the property in here we have the values we have the handle blur handle change handle submit initial values and all this kind of stuff okay so we need to use this all this property right here so for now we need to just returning jsx in here so we can just say like so and we are going to say div and inside in here i'm going to say h1 i'm going to say class call margin vertically into 4 and i'm going to say phone wake to bolt and let's say display to four all right and in here let's say sign up now save should be capital s right here like so and in here we need to use form which is form from formic right here okay so we can say form like so so now let's set the initial values inside the format right here we can say initial values set that equals to and i'm going to say first name of the string last name empty string say email wait i'm string and what else password pass password empty string and the last thing is confirm with password empty string okay so if i want to see the initial values let's check into just in here i'm going to console console.log the formic like that so now save and let's take a look we're going to refresh and as you can see in here we are going to looking for initial values as you can see in here we have the confirm password email first name last name and password everything is empty string okay so far so good so the next thing is i'm going to create another component called text field say text field dot js file and send here i'm going to generate rfc enter and just put just put input for now okay let's save and let's go back to sign up and i'm going to import the text field from dot's last text field and i'm going to put the text field inside of form like so wait text field okay so now save now we should see uh input in the browser so now refresh and here we go all right so let's go back i'm going to send couple props in here let's just say label so that equals to let's say first name i'm going to send a name set that equals to first name and let's say type set that equal to text all right so let's save and let's go back to text field and in here i'm going to grab the label and i'm going to grab all the props okay so next we need to import use field from formic so we can say import import use field from formic and we are going to say in here let's say cons field and meta so that it goes to use field and let's put the props right there okay so if i console.log the field and the meta so let's save and let's take a look in the browser what we have so as you can see in the field we have a name on blur on change and value all right and in the meta meta i don't know how to pronounce that but i mean this is we have error initial lr initial touch initial value and touch and value okay so now let's get rid of this console in div right here i'm going to add class name so that it goes to margin bottom to two and down here i want to say label html4 i'm going to say i'm going to access the field dot name which is right here okay i want to say field dot name okay that's mean the first name right here okay it's come from here all right so inside in here i'm going to say label like that which is first name right here okay so now save let's take a look right here save and reload as you can see we have the first name and input right here okay cool so let's go back in input right here i'm going to remove the type and i'm going to wait wait wait where's the d right there i'm going to add class name set that equals to i'm going to say form a dash ctrl which is bootstrap class and shadow i'm going to remove the shadow which is shadow none and i'm going to say auto complete into off okay so now save we should see beautiful form let's refresh let's take a look see we have a first name and the beautiful input right here okay cool and we need to destructuring all the field value so let's just put field right here and also all the props value like that so now save and let's go back into sign up component and we are going to copy and paste that couple time and this should be last name this should be email say email the name should be last name type text email let's say name email type should be email and this should be password and name let's say password and the type say password and the last thing is should be confirm password and name let's say confirm password and type say password okay so now save so now we should see five different input field in the browser see we have the first name last name email password and confirm password so the next thing is we're going to add button in here and just add class name called btn and btndsdark and i'm going to say martin top23 and the text should be register and in here i want to say type set equals to submit and we are going to add another button here just give a btn ptn desk dangers and martin top 2 3 and margin left to 3 and the text should be reset and i'm going to add a type set that equals to reset okay so now save and let's go back to the browser now we have the register and reset button okay cool so as you can see in here we have the console.log for me all right so i want to access the values so for make dot values so now save and let's go back in here i'm going to refresh and as you can see we have all the value we just confirm password email first name last name and password if i say chan now as you can see we have the value chart into the first name okay if i put a therefore here now we have chan def all right pretty cool right but how about the validation if i go to the form and i go to email and click another input field we don't get any error so let's go back in here and we need to handle the validation so we need to use package called yap so let's install yap by typing yarn at yeah and hit enter alright so it's done now we need to import the app up here so we can say import everything and give a name yep from yep and we are going to create variable let's just say validate set that equals to yap dot object and in here i'm going to put object okay so the first thing is i want to grab the first name and i want to make sure that first name should be string and i want to give a maximal value into the first name so you can say maximo right there and i want to give a 5d maximal character so i can say 15 and if the first name have more than 5t character the error should be must be 15 characters or less and i want to set the first name into require and the mischief let's say required all right and let's just copy this and paste that couple time and change this into last name should be string and the maximum value into the last name i want to set that into 20 and the error should be must be 20 character or less the next thing is email and that's string i want to put email in here and if the email is invalid i want to give a error let's just say email is invalid involve it and password and that string and i want to give a minimal value and i'm going to set that into six and error let's get rid of this it should be password must be at least six characters all right and require i want to change that into password wait password is required and email let's change that into email is required and for the confirm password confirm password should be string and in here i'm gonna get rid of this and in here i'm going to say one off and i'm going to put array in here and let's say yap.reference into the password and let's set that to null and then we're going to say password loss match and change the require error into [Music] confirm password is required all right wait required and to use this validate we can just simply go to the formic right here and to say validation schema set it equals to validate variable just like that okay and let's just save and let's go back to the text field and in here i'm going to import error message error messages from the formic and i'm going to put the error message in here say error message with error message and i'm going to give a name set equals to i want to access the field dot name okay so let's just copy put that right here so now save and let's take a look in the browser so now if i go to the first name and without giving any value and click another input field get a require and if i type in more than 5d character we have the error should be must be 50 character or less okay that's happened with the last name must be 20 or less and the email we are going to get email is invalid and we're going to get wait see password much match all right so let's go back in here there's class called is invalid in bootstrap so we need to use this class when the input field right here have error okay so let's go back in here and i want to use a backtick in here like so and i want to say if the input field is touch and the input field have the error i want to add class call wait is invalid like that so now save and let's take a look in the browser so now if i click the first name and click another input field without giving any value in the first name now the input field have a border red okay that's what we want okay pretty cool right and i want to put some css in app.css right here let's remove everything and put the style in here let's just close this make that smaller okay and i want to save and now as you can see we have to wait where's the error oh yeah let's go back in here and i want to say component into diff and i want to add class name in here with class name set that equals to error okay we just uh right here okay we set that the position into absolute it changes the color and the font size okay so very basic css right here so let's take a look see we have the arrow right there so now let's refresh if i click first name and click another we get the require error okay so pretty cool all right and next thing is i want to if i click register i want to showing the value into the console so let's go back in here to sign up we're going to say on submit right here on wait wait wait what happened on submit set that equals 2 we grab the values and i just want to console.log the values okay so now save and let's go back refresh oh yeah we need to remove this console and let's give a say chan death email chan should be involved email okay we get the arrow right there john at dev.com for example and i want to put password one two three five four five six and just copy this password put it right here if i click register wait not much really one two three four five six and here we go we get all the value okay but why the illustration not in the center so let's go back to app.js file in here i'm going to say margin vertically to auto so now save and let's go back refresh bam okay i think we're done with this project i hope you learned something new for from this simple project and i'm gonna see you in a very next video and bye

Channel: Cand Dev

Views: 37,417

Keywords:

Id: u-CCnDayNJw

Length: 26min 19sec (1579 seconds)

Published: Fri Jan 08 2021