Formik With Yup React Form Validation - React Javascript Tutorial

hey guys in today's video i want to go over formic so formic is a react package to deal with forms as the name i suggest so in web development we constantly have to deal with forms whether it's something like register form um logins just generally capturing user data it's most of the time it's captured reform now what format does is it allows us to deal with things like form validation in a much easier way it lets us standardize our way of handling forms and let's say are form structures it's good for pretty much every use case that there might be some edge cases to this where you can have to come up with your own custom solution if you're really you know doing something odd um but i'd say for about 90 of use cases this is really really good that will probably be exactly what you need and one of the really nice things about formic is that you can create your own custom let's say custom components for let's say an input and then you can reuse that everywhere and it would you don't have to worry about things like your state for you that forms value um errors or things like that formic can actually take care of that for you so you put an effort at the start to create some of your own custom components and after that you just reuse them everywhere and it's very very straightforward and easy to use um handles things like errors for us and it's really nice we're also going to be using yup so this is just for validating the values that our form has so say we have a login page where we have an email that's required then it has to be an email so a valid email um the form we can take care of things like that to make sure that it's like a string i think there's a really good example here so here you can see there's one for email it's a string and it's an email so we could also do other things like required so this is positive integer there's all sorts of things you can even do things for arrays so you don't have to worry about let's say you have a dynamic number of fields this also covers that so it's really good and the reason why i'm actually up is because formic integrates with the up very very smoothly um it's actually one of the it's actually integrated into formic so you can very easily use yup with formic okay so to get started let's create our basic react template so what you want to do is type mpx so this is in your terminal create react app and then specify whatever directory you want so dot slash will just be a current directory i've already run this so i have some of the the files here um let's also install our dependencies so the npmi so we want formic and we also want yup so i've already installed this as well this will just take a couple minutes once that's done you guys can come back to this video so let's next just start our development server so npm run starts this will just start your localhost server okay so we have our localhost server running let's go into the app.js so i'm going to close this i'm just going to remove all of this yep so it's empty now let's start off by um just explaining what i'm going to do so i'm just going to create a very simple form to get started with that's just gonna have an email and a password so let's start off by importing formic from formic so um to get started let's call our format component let's see exactly what this does so this has two required props that we have to give to it first one is the initial values so there's going to be an object and the second one is the on submit so on submit we get data uh we also get some other helpers i think um but just for now i'm gonna ignore those helpers and i'm just gonna console.log data let me just multi-line this okay so our initial values i'm just gonna say we have an email field so i'm just gonna assume that we're gonna have an email value which is initially gonna be empty and a password which is initially also going to be empty so now we don't just start putting our inputs here what we actually do is um we have to put a function and that's because formic is going to call this function and by doing that what allows us to do is actually get some props from formic so here's what i mean by that so we actually got some props here if i close to log these props so you can see we're passing a function here we're not calling this function but formical caller for us and because it's calling it for us it can actually pass on props to us so let's take a look at what these props are let's open up the terminal uh the console and you can see we get a bunch of props and you don't need all of these so i know this seems overwhelming i'll go through some of the key ones so just to point them out now we have the handle blur handle change um errors we have is submitting so this is if you had um so here on the on submit if this was async let's say you make a api request you want to maybe instead show a loader while it's submitting you can use this um we have some other fields these are some helpers though they're quite useful as well touched so we can see which fields have been touched so that way maybe we can choose to show error messages only on those fields um i know this is very confusing to get started with but hopefully this will be real clear to you guys by the end of this video okay so what i'm actually going to do is just destructure the props instead of call them directly here this is just so it's a bit easier for me let's return let's restart a form where on submit what i actually want to do is to handle submits so one of the props that it gives us is a handle submit and what this does is it takes care of things like um preventing the the window from reloading every time you submit a form so that's quite nice and takes care of some other stuff as well which we don't really have to deal with let's next create a input so let's create a div to wrap this so let's call it input wrapper let's have a label and it's going to be email and let's have a input so there's going to be text we're going to now add some stuff to this input which is might seem a bit confusing but i'll explain it to you guys so the first thing i'm going to add to an input is the unchange now normally you might have some state and that state would be your forms data [Music] um and in this case we don't actually have to do that instead we get a handle a change from formic which we can pass down here so handle change and what this is going to do is going to use the name so let's give it a name says email against this name it's going to put into data it's going to put into data the value so let's say we perform a keystroke we press a letter um then it's actually gonna in its own internal state it's gonna update the value associated to this name so the names are quite important in this and name's actually important in every form um so just remember that it's going to use the name field and this is what you're going to get the data from so if we were to change this to let's say test.email.com then data dot data.email would actually be that value that we just said test.email.com let's also do a on blur which is going to be handle blur which is also given to us by formic so handle blah and i think that should be it for this i hope i'm not missing anything so we have a name let's also give a placeholder email and let's just check out our let's check out our page so we can see we have the email and the field let me just put some uh spacing at the top so actually let's keep everything remove that it's just a dot input wrapper margin top just give it 30 pixels okay so now we have this um let's just put a button here so let's say button type submit and let's just give say submit now let's look out for this console okay of data and see exactly what we get so i'm just going to say i'm just going to actually do nothing now just click submit and we get email and password let's next say test test.com and when i submit this one we get test test.com firstly let's say change this name to email to test test.com hit submit then it would actually be on the email too so you can see um we set our initial values to only have email and password but our final data actually has more has the email too as well so append to it i just realized we should also do value is equal to um we get values here and so we're going to do values dot email so you can think of values almost the same as data and so there well before it refreshed you can see that values um the data dot email was actually that was actually the email that we changed and this is the same i hope that makes sense so if i do it one more time if i just console log values so i do test oh i just realized this is i forgot to change the name of this one so i now do test you can see here on every keystroke it's updating the um the values to be the value of that name of that input field okay so so far with very minimal amounts of code you can see we already have a way of not having to to deal with our handle submit so that's taken care of for us um handle change taken care of for taking care of for us our state is also taken care of for us um we have things like the handle blur so another thing we could do um is when we deal with error messages we're going to also see not always show the error message maybe we're only going to show the error message for touched fields so i'll show you guys what i mean by that um but yeah let's just create one more of these this is going to be our password i just realized this should be email it's gonna be password and let's do there's gonna be values.password these two still just stay the same so a hand will change and handle blur you use the name to determine if which field to update in its own internal state uh the place order i'm just gonna say password so now if i type some stuff in you can see it shows up here in the password all right so that's really nice we have two we have our state handled for us first click submit and you can see we have all of the data here right in our console log um so that's already taken care of a lot of the issues we a lot of the things you might have to normally manually do before make it take care of it for us so now i actually want to go into error validation so let's import everything as yup from yeah to get started with the up what i'm going to do is just create a basic schema which is going to be which is going to define how our data should look so which fields are required maybe some requirements for the password like a minimum length so we're going to be doing that with you up so to get started let's just create a constant here i'm going to call it um form schema it's going to be equal to a yup dot object and it's going to have a shape so here we define the shape of this object and let's say it's going to have a email and this is going to be a yup dot email it's also going to be required and let's say string as well now let's also add in a password so it's going to be yup dot string i'm going to say required as well so now we have this form schema what we can actually do is just directly put that into formic so this is one of the really nice things about formic is it actually um it knows about yep and it can you can work with it so we can do a validation schema it's just going to be what we called it here so form schema so now i want to just console.log errors so you have arrows here which is passed to us by formic i'm just going to console log it oh and let's raise this is a capital y just change it here so yeah oh and i just realized i think this has to be let's do yup dot string and then we can do email here okay so let's say i click on this i click off it all right then what it's going to do so this is our errors you can see in errors we have email as a required field so the reason that this error message is showing is because it is a string it's an empty string so it's not going to throw an arrow but it's required and currently it's empty so we get this error message emails required field we can actually change this error message so let's say changed message email field is required this is just an example so if i click on this click of it then you can see here so change message email field is required so our actual um the error message itself you can change it to wherever you want um for each specific time that for each specific um case so say you want one message here you can have a different message here so next let's do test.test.com and let's actually make it invalid so you can see email must be a valid email so i'm assuming that yup does some sort of regex validation test against this because if i do com i scroll to the bottom you can see that email field that we the email property that we have here is no longer on the object but the password one is still there so on password we just have required so if i do test you can see it's gone that it's it's fulfilled the um the requirements and it's gone you can do a min so let's say minimum of six characters let's do test so you can see here that password password is must be at least six characters and if i make it longer than six characters you can see that error message goes away so this is really nice and it directly plugs straight into formic so how do we actually go about showing these error messages so i'm gonna also import um also these structure touched the reason i'm doing this because what i want to do is say errors dot and then so this is the email oops so this is the email field so if we have arrows.email and touched.email so i should probably just show you guys what touch it is it's very similar to errors let's just look at this so currently touched is completely empty if i click email click off it email is not true i click password i click off it password is now true it's just seeing which fields have been clicked on so if we have errors in the email field and the email photo is touched then what i actually want to do is show a paragraph tag with a let's give it a class name of error and i just want to render errors.email so now if i click this and i click off of it email is a required field but you can see so if i console.log errors again so if i click on this click off of it we have an error for password as well but it's not showing anything with password yet and that actually probably is because we haven't added this so let me add it so let's a password password and password so now if we try this again when i click on email you can see that password has this error but it's not showing here because password isn't currently touched so now if we click on it click off it now it shows the error message for password um and one more thing if i just refresh this if i click submit straight away it shows birth error messages so when you submit it will um it will trigger it as though it was as though they are touched fields so you don't have to worry about that um see that's quite nice but one one thing you might notice straightaway is this isn't the the most pleasing to look at so what i mean by that is we have this handle change we have this handle um this on blur with a handle blur and there's a lot of things that really this for example this error message could be could be put into one place right so what i want to do is just create a new component so let's call this text input let's import react let's say text inputs and we are expecting some props from this and all i'm going to return so i'm just going to copy this so you see this input wrapper this entire div i'm just going to copy that and just put it in here and let's just export defaults our text inputs so i want to use this and just make it a bit simpler so instead of having to put this entire div i just want to pass down a couple of props to it now having to put the handle changed handle blur passing these down can be a bit annoying so instead what i'm going to do is is this so i'm going to remove all of these i'm going to remove this as well the label let's just do a um let's do a conditional statement so prompt start label so if we have a label in case we don't want a label we can just put this in props dot label the errors um i'm going to show you guys how we do this so one of the the nice things about formic if i go to their documentation is they actually let us use hooks so i think it's use field yeah so use filter so this is very similar we're going to be creating um use field this hook right here actually can connect to whatever formic um whatever wrapper formic component it's in um it does this via the context api so i'm not gonna bore you guys with that but all i wanna say all i wanna really show you guys with this is we don't actually have to pass down any of these to the component so what we're just gonna do is we're gonna say uh let's see what do we get we have field meta and helpers so field we just put directly on our input so this is gonna handle all of those things we were doing before so that's going to handle the value the unchanged and some other stuff uh props here this is just mainly for us to add in whatever we want i didn't and this is just going to be for handling our error messages so let's do this now so we get a field meta and helpers i'm actually going to ignore helpers these are just functions to do things like set the value of this yourself so there are some cases where let's say you're using react select you might want to use that to create your own wrapper component to use react select with formic i'm not going to get into that in this video something that i've done if you guys are interested in that i can make a video about it how to use react select with formic let's just say use field and this just expects a name so props dot name this name does have to be unique per formic let's say instance um let's just remember that let's now remove this let's do field spread in all of the props and let's also spread them whatever props we want as well um let's next this is going to be for prop start name and let's do errors so error is actually going to be inside meta so meta.errors.email i think it's actually just methods.error if i'm not mistaken yep so methods.error metadot touched and then we can just do error metadata so now let's actually try this out so let's remove this email one more event i think let's call our text input so you can see it's a lot smaller already i'm just going to pass in the name of email and i think that should be it i don't think there's anything else special that we need uh maybe just also adding the placeholder email and yeah so let's see how this works so just to make sure that this is different just before dots so yeah this is different you can see straight away when i clicked off it we get the error message um so that's nice so we can already tell that at least the error message part is working let's uh let's remove this and let's see if the in the data we actually get the value of this input so let's see if that happens so let's do test and let's do test here you can see we don't have a label because i didn't add one in so we'll add that in the moment and click submit so you can see we are indeed getting the value of this email and this looks a lot cleaner than all of this because we put in the hard work to make this once and it's not even really hard work it's really simple but we can reuse it anywhere so let's also do the same thing with this one so let's do text input name password placeholder password let's also give this a label now let's just say email and let's do label for this password so now you can see these also being added in which is nice and click submit shows the error messages we can do some styling for the error messages so make them red um you could let's say do something like this start here just to really make it stand out um but yeah this is the very basics of uh formic now i want to get into one more thing before i close out this video it's a bit confusing um but i think it's something you might want to know how to do so sometimes we want to actually have an array of data so let's say this is just an example let's say we have data where we have something like users so it's an array and we want to be able to dynamically add users so let's say you choose as a name and then let's say we want to add a new one let's also give it see an id actually i don't think we need that so we want to add another user name to and we want to be able to edit these dynamically so how would we do that with formic formic actually makes it pretty easy just easy for us to do that so all i'm gonna do is just i'm just gonna remove a lot of this so let's just remove this let's create one called users we'll get into the validation moment actually i'll leave that empty um let's see users which is by default empty array um oh by the way you could all see that because here so this is just side note um because here we're using the use field hook we don't actually need any of this uh we can just keep the handle submit for the form but even the form i think there's a use format cook which you can also use so even this you probably won't even need okay so just for the final part of this video we're gonna go through how to deal with users and multiple fields primarily dynamic fields so we're going to use something called field array so filtery is similar to formic and it's a render prop so it's going to do field array the name is going to be users so i think this is the name of um our value here uh so this is a render prop so we get some props here i'm actually just going to destructure a couple props so we have push and remove so these are two important ones then i'm going to return just a div for now now one thing i'm going to get back from here is actually the values because i want to map over our users so let's do um let's do users no sorry values dot users.map let's say user actually say user and index and for each one i'm just going to return so let me just do this inline so i'm just going to return um a text input and this is going to have a name so the name is actually important so i'm going to use backticks here it's going to be uses dots and then the index dots and then the name so this is let's say each user is just going to have one field which is its name let's also add in a label so i'm just going to say users i'll actually just use a let's say name and i'm just going to put in the index as well just so we have a visual representation of which index is although it will be quite clear um so we have the user and the index okay let's also just uh let's actually put this in a div so that we can actually instead of a div let's use our fragments so we can put a remove button so say button remove user and on click i'm just going to do remove so this is an anonymous function because we have to actually pass in some parameters to this the parameter is actually the index that we want to remove from our user's array so the index we want to remove is just this one the current one that we're looping through it's just index um so that is how we map over all of our users next i'm just gonna do [Music] um just the button here add new user so what this is going to do is on click i'm just going to call push actually i think i can call it by itself but i think oh no actually we have to push and then what we push is going to be placed inside of this this object this array here so i'm just going to pass an object with name as just an empty string so this is going to be pushed you can think of this as the initial state for that part of the part of the map so now if we take a look at this oh and that's because the validation is actually off let's comment this out for now and let's comment this out so let's might as well just remove these since we're not gonna be using them anymore let's add a new user so this is index zero oh and this probably needs a key so let's do react or fragment key is equal to let's just say index for now so we add new user there's also console log values just to see exactly what's happening so initially values m theory uh use the m theory when i add a new user user actually has one value inside it which is name if i type test and i just go to the bottom here you can see that name actually comes test let's now add another user so now we have a second user we open this up you can see that name is empty so let's say test two let's open this one up and you can see we have test two let's remove our first one so the zero index and only keep test two you can see we only have test two that's the new first index and we look here we only have test two so this is how you deal with um dynamic sort of uh inputs so where you don't know exactly how many things you can need and this this is a really nice uh feature that formwork has added um just want to clear one part of this this name is quite important um and another thing the validation for this can be a bit irritating so here's how i do it so if we do yup dot um i think this is array of and then it's going to be array of object dot shape and then so it's an array which is it's an array of objects where the shape of the object just has a name which is required and oops it's actually yup dot string and then let's just say required and then let's say min so this is the minimum users that's a minimum of three users actually let's ignore that for now because i just realized this would throw a different type of error which we currently don't handle um so let's do let's leave at that actually let's see how this works out now so if i create a user i hit submit oh we haven't actually synced in so let's connect it so now if i add a user you can see users zero name is required field is required you might want to change the names of these so i might do something like um this field is required so now it's like this and then we can do something like test and then the error message will go away we add new user test and then so on um and just to show you guys the error i talked about before if i say min let's say minimum three if i hit submit we don't have any error message during if i do errors and i console log errors oh and i should also do required so submit users users field must be at least three items in fact so if i add new hit submit oh actually now it's just showing the individual ones if i write test here now hit submit user field must be at least three items so you can see there's actually two different types of errors so one of them here is a string and here it's actually the same thing users is now an array so what you might want to do is let's say here we can do errors dot users and errors and type of errors dot users is equal to string then we just want to show that error so arrest.users so now if i write test you can see user field must have at least three items so this is how you would do the validation for this uh it's not as pretty but it does work so yeah i i know this is a fairly simple video um i didn't go too complex to anything uh i know this is maybe a little bit complicated so that's it for this video guys i hope you enjoyed i hope um maybe you're considering using formwork in your next project i think this is a really really powerful package and i think it helps you guys out a lot the fact that we can create things like this text input component here which just connects to our formic wrapper component is really nice i think how it handles things like um errors with the up is quite nice you can also do your own error handling i didn't show you guys in this video because i think job's quite a lot more powerful my opinion although um you a lot of times a lot of the time you would probably have to create your own um error handling if it's a edge case yeah that's that's it for this video guys if you enjoy the video i'd appreciate a like um i regularly upload react videos so if you if you're looking for more react videos i have videos on things like react query redux react rather so yeah thanks for watching bye [Music] you

Channel: LetsCode

Views: 5,471

Rating: 5 out of 5

Keywords: js, javascript, react, react-js, formik, react-hooks, react hooks, formik hooks, yup, formik with yup, formik-yup, useField, formik tutorial, react forms, form validation, react form validation, formik react, reusable components, formik yup, formik validation, formik field array, Formik 2

Id: jCxtm7mLaa8

Length: 35min 59sec (2159 seconds)

Published: Thu Jul 23 2020