React Form validation and Linking with API (Backend) | BEGINNERS REACt.JS Formik w/ EXPRESSJS Server

Key Takeaways

hi everyone in this video we're going to create a login and register form that has validation and that is actually linked with a register and a login api server running all on react so we're going to take like the form we created on the last video and also we're gonna take a server like it's running on node.js with express and a password.js authentication system that we built also in our like earlier video i'm gonna combine both of these and i'm gonna just like bind this elegance react form with that system just to do vlogging perfectly plus register perfectly we're going to just like do full validation email validation password validation using regexes also we're going to just like send the request to registered user and get back with the response and show that response to the user i say oh thanks for registering or like if an error happens say internal server error or something like that all of that is going to happen in that particular tutorial so it's going to be a complete course for you guys to just take whatever you i form that is sitting there a react form and just like turn it into an alive form binding it with a node.js or whatever api server that is like going back and forth using http requests posts and gets and jsons and why not so yeah that's that's basically creating heroes first in here whatever we do like login we've got welcome back authenticating uh if you just like put a wrong password or whatever do log in it says email password does not match and that's exactly working with a server that is running on port 5000 that is doing requests and response and getting all the data ready for you guys so i hope you guys enjoyed this one and without further ado let's go ahead and jump right into it [Music] so what we're going to be using here is actually the formic which is the form states manager library that gonna manage all of our react forms it's just like dead simple easy to use and very very easy to integrate even has like hook render supports if you prefer that but i would prefer my hooks of course and it's open source it can also support react native and plural stuff and it's been used like wildly by a lot of companies cruising here from stripe to nasa booking.com many many others so they are loving it and i've loved it since there's like started working with this formic kind of thing and i've been working with this like a couple of years ago it's just like really awesome and really simple the api is that simple plus the performance if you've got like thousands of fields that you need to validate over and over again with like errors and yeti idea kind of stuff well formic is really performance because it depends on reacts with the reconciliation algorithm and everything so it does perform really really well in this kind of circumstances where you got a lot of data to manage and a lot of state to keep up to date so yeah i would go with forming there's other libraries like final form or like um i i think redux for maybe a fair rumba rise but yeah they both do pretty great of works both of them they are pretty awesome but the case for formic i would go because just two things the api is pretty simple like dead simple and it has also performance like i see it's more performance and i see a lot of people talking about that for make is much kind of like slightly performant than compared to final form for example so we would go with formic in that case so this is going to be using here we're going to be installing it's pretty simple as i said before and for the validation well it kind of depends on this kind of library it is called the up it's pretty pretty awesome name here and it's actually heavily inspires clicks in here from joy's api so if you're familiar with joys from like have.js uh it's it's a pretty awesome validation library has like more than 16.8k stars and this one is pretty heavy it's made for like node.js runtime on servers and stuff like that it has a lot of complicated and like advanced apis to use and validation apis but yep it's inspired from that particular api but it's much more lightweight and it is targeted toward the front end you use so you have like a huge bundle to deliver to your clients and yep is that simple and has a pretty awesome api to use with and likely for us formic does integrate with you up really really well so in that case we're going to be using yelp with formic in the best way possible you could have ever imagined so that's we're going to be basically using for that this one is the validation the other one is like for form state management and they're going to integrate pretty well with each other since formix supports really well yup likely for us so yeah that's that's going to be pretty much using in that case so let's just kind of jump into our account so this is the second one i'm going to jump and if you're not familiar with this actually the reacts modern form login i created these projects in one of my video sources where like uh like showed how to create a login register form with the smooth animation and everything on the place using react so this is a project you can grab it from github but what i would really recommend is actually go ahead like watching the video story of like the full video story to understand exactly how we build that then what we can do in this particular video story is actually just like pick up that particular form that we created you know like likely in here it's actually the projects where we created it on so we're going to grab this project and we're going to add formic and form states management and validation on top of it plus we're going to bind this with our real word uh kind of like login register api which we also created on a video story of mine which like the node.js passport.js authentication uh like login register api we created that particular so also why would it say without project score like express login with just your api you can go to my github you find it or link in the below description you're going to find for sure and uh also we're going to give you the link to the video to fully understand and watch that because this is going to be like pretty self uh kind of explanatory at first but you might need the video to like understand how i did that and why i did that applicable place and how i did with just your login with database setup and all that kind of stuff with passport.js authentication so that's exactly what we're going to be having in particular case and um yeah so this is basically the projects what we're going to be using and we are going to just like get started with like 3x model form login to and for make safe managements into it i know it talks a lot but that is actually needed very important for you guys to understand exactly how i'm going to walk through this video story setup and what you need to do in order to like follow up with me because that's that's pretty important kind of thingy so yeah without further ado so this is basically what we're going to be needing first and without jumping any further we're going to need to install a couple of stuff so let's go ahead and install the most important part of par sorry it is called formic so our states management library formic we have to install that next we need to install jump just type in yeah for validation and last but not least we're also going to need to install in axios why access also it is another simpler library it's kind of like an htcp library that allows us to do requests on the fly from our like node.js and has promise based api and a lot of stuff axios is really really famous i'm surprised if you don't know about that but yeah there you go we got axios in here and that's we're going to be using to do our like http request to the server to do login and register pretty simple so go ahead and install that and just going to wait a couple of seconds to get things up and running so now we got everything installed that we needed let's go ahead and clear everything out and we are going to start our development server so we took a look on the package.json we're gonna find like the script there's a start script which is gonna start our development server for us so all we have to do just do yarn start and this one's gonna start off a server for us and it's just gonna do everything that we will need behind the scenes so if we take a look in here uh maybe this is going to just like do an auto start for us not really sure yeah as i said that so there you go localhost 3000 or 5000 and this is actually the form if you're not familiar with it so that's basically what we created in the last video and that's basically we're going to be adding form states management plus validation into us plus bindings with like the original api for both login and register so they both gonna have that uh up and running and working perfectly so yeah that's that's exactly we're gonna be adding for that so first things first to get started with this one let's go ahead into our component i'm gonna start with the sign up for why because this is actually the where we are gonna register users and that's we're gonna just like get started because registration is the most fundamental part that a lot of people would like grasp want to need to know how to do because it's it's such an important part of a lot of like websites and web applications nowadays so that's that's basically we're going to be doing in that particular case it's just going to go ahead and integrate formic into the sign up form so it's closing here for the signup form what we got just quick look up we've got the form container which has a couple of inputs if you take a look on the form container it is basically from styled form and by the way if you're not familiar with this syntax with this kind of like um style component thing we are using style component library to create our custom styled css and js components then reuse them normally so yeah just watching this video story that i told you about would make you understand exactly what we're doing in here so we got the form in here wrapping the input and all that kind of stuff and uh yeah what i did in here actually didn't include maybe i need to include the submit button we're gonna need because uh the submit button needs to go inside the final form or pretty much the form elements in order to make sure things are working fine so if we jump back we're not going to see a lot of like differences they're still going to be the same it's going to work i guess for the sign up forms you really well so um yeah yeah going going so far so good we don't need that much of changes right so that's basic stuff what we need first now to set up formic it's pretty simple we've got formic installed now to use formic we're going to use hooks as i said before you can use render props and other stuff but since hooks are new shiny things that a lot of developers including me of course i'm a big fan of them so i'm going to just jump into hooks and use them right out of the box so they're going to do here cons i'm going to have formic which is going to return a state for us i'm going to use do use formic and this one is going to open up or import for us use formic from formic library and for this one we're going to pass in a couple of objects the first most important one is actually initial values so what initial values you need to pass into your forms which means what initial values your fields they're going to need to have for example we got in here like the full name email password and a confirmed password pretty simple right so we're going to be needing first is actually the full name and make sure no space is of course that variable name in so for now i'm going to have completely empty i'm gonna have an email completely np again password completely empty and confirmed password is well gonna be completely empty so that's for the initial values that's how we want our form state it's going to just like start up and running with empty string values okay now the second part let me just wrap that one here now the second phone here election wants is actually validates on blur what that means is actually whenever we are typing on a field we want whenever we click outside the field like we blur that particular field we run the validation for our formic form that way we can just like display a new error messages or just like updates whatever form status it is actually currently on just on blur so to do so just include true and that should do it now we also got on some map and this one is actually going to initiate it or this callback is going to be called whenever we submit the form so it's going to create a function for it that's going to take care of this callback it's going to be on submit and you can do whatever in here that takes care of submitting and by the way this function takes the values the current values that the form has so this value is going to be an object of like full name email password and confirm password pretty simple so this one is going to be on submit now what i can do just go ahead and do like a large i can do a json string defined just just to show how things are going on in that case just doing that particular case okay so we got one submit and the most important object we're going to need to use now is actually this formic object if you take a look on it you're gonna have a lot of stuff like a lot of states to manage basically all our form states like the values you're gonna need the submit handler function mainly the validation function and all the kind of stuff are going to be inside of these objects so here for the form container it's going to have an on subman handler so for this one we need to pass in the formic dot handle submit so this one whenever we click enter whenever we click on the submit button this one is going to be running like the form on submits handler and this one is just going to call the format handle submits which in that case form is going to delicate it into our own submit because we provided that into this particular object and basically this is going to be running that's pretty simple thing to have in that particular case now just for this button we need to mention this that this one is a submit not a regular button just to make sure that it works perfectly okay so that's basically what we've got now to set up the fields which are the most important piece that holds the dna manages to state obviously so we have every single field that you want the stage to have um like be managed by formic and all that kind of stuff make sure to include the name and make sure it has a unique name for that particular form so this one name uh we can we can pretty much like use something since it's a full name so we can just provide the name that we provided for the initial values make sure to do so otherwise the initial values won't work it would just like be broken and name here is going to be email name password and last but at least we got confirmed password okay so just providing the names and this one is going to know like exactly what is going on now we also need to provide it with the current value because this one is going to be like a managed input field by the format so whenever we like change the state this one is going to go through the formic handler this particular one it's going to manage to see it in some way it's going to return it right here then we can use the value first so we can do formic values and this one is going to be an object as always security has all that we need so full name and to trigger the change like whenever a character whenever this inputs data is changed so we have to also to do on change callback so whenever we change that we can just do formic dot handle change so just pass it form a handle change and regarding this particular name that's provided here it's going to automatically know which field to update and which value to take and all that kind of stuff so it's going to do everything for you in that particular simple steps and hooks make it even simpler for you guys to work with that particular api and just provide that with a simple easy to use api cool now we've got the value we got uh the only change and everything so let's go ahead and pass in copy paste all of that now we're going to be changing only this one so i'm going to change email so for this it's going to be password last for always this one is going to be confirmed password right that's pretty cool so that's what we need just going to ctrl save so value is not defined okay there's something wrong with this one [Music] i'm not sure exactly which values talking about yeah that's values all right so we got the full name the value on change and that's basically what we need for a basic setup for formic to run at the basic level and to update the states every single time right so let's go ahead and go into the browser just refresh that in that case let me open up like the devtools if any errors happens whatsoever this is um well this is kind of like an error that's not related to what we have added maybe another components issue but we don't care about that okay so let me just zoom that in i think that's that's a bit better for you guys to see but of course you can change the sizes however you want so let's go ahead and do an email in here so me at example.com whatever password we click login and um this okay we need to sign up okay sorry so it's on the sign up um so whatever whatever name whatever password whatever confirm password we submit and there you go we got full name email password i just set it and confirm password which is running perfectly now the data is being updated like regardless whatever we got in here for the sign up so that's pretty simple that's the basic setup that you everything you need to set up formic easy right cool now let's jump into the most important part for you guys which is validation now what we want is actually to validate that this should be like a minimum characters or something this should be an email this should be matching a particular rejects for a password and this also should be matching this particular password so that's that's what you want for a particular validation and how it works now to use validation we're going to use yup as we said before so it's going to import that make sure to import all as yeah because it doesn't have a default explorer so i'm just going to import yep real quick now let's go ahead and create the validation objects work so i would prefer to create that outside the component because it doesn't need to be updated every single time with every single render but it's fine to put it inside of there but i just like don't find that much of a need to breathe there there's totally no difference just putting it outside so that way you could make sense better that this one's not going to be updated this kind of static thing you're going to be just like using it through other components okay so that's that's basically what it is now it's going to do like validation skimmer i'm going to use the ups api so yep have something called objects which gonna just allow you to use any kind of object shape which means this validation schema is gonna tell you oh this one is gonna be an object and has a couple of fields for example has the full name and we want to make sure that the full name is a string and it has like um a minimum of let's say three characters if it's not suspicious in here there's the first attribute in here for the function is actually the minimum number the second one is actually the message which is the error message that you want to show up to the user if this criteria is not met that's the case so what we want is actually to display a particular image so please enter your real name or something that should do it and also we make sure that is required so we could show up a message like oh full name field is required of course you can like customize that so we can do full name is required cool now it's going to add the last one so i'm going to do yup again there's going to be a string and one is going to use the email i'm going to just like provided with an error message please enter a valid email address right and this one should be required too now also i'm going to be needing a password so this one is going to be string and maybe we're going to use some rejects to check that we need a strong password this one to work so you can you can go and activate that using some kind of like a reject so let me go ahead i think i got like rejects for this one to work as um not really sure but i guess i got one here so just a quick rejects i got i'm gonna do password [Music] rejects i'm gonna paste that in and basically this rejects or regular expression is gonna like test if the password is strong enough it has like capital letters lowercase letters uh if he has also numbers plus some special characters and a minimum of eight characters so this one denotes this otherwise it won't work for you so i'm going to use matches function and this one should match the password rejects if not i'm going to say please enter a valid or a strong password okay that that should make it pretty self-explanatory and las vegas you need to make sure that is actually required okay pretty cool and last but not least i also need to confirm password so in that case we're going to use something special with the off that is called something like references and something like has a when function that references another field which is in that case we want to reference the password field we're going to grab the value of the password and check it in with the current value then we can decide of this matches we are fine otherwise just print this error message to a user so we're going to do in here i'm going to do yep i'm going to just like do string validation again i'm going to use when so this one it's actually takes like which type of field that you want to check which is in our case the password field so just enter up the name of the field that you want to check in that case now second it takes like an object options right so this one has is so is it validates if this password field matches the current criteria so just like a criteria that this password should be matching which means for example we want this password to be valid like not an empty string we want it to be a complete string that has some characters so we can run this conferred password checking right so for that it takes like a callback function we got something like a value so what we want to check is actually the f value and value.length which is remember this value is actually this passwords value just to keep you in sync so if those are like greater than zero they'll return true otherwise so i should use journey operators otherwise just return false now this one is going to decide whether this callback function which is called then so this one is going to decide if this one is going to run or not and this one is actually the most important part which is gonna run it checks if the password is correct matches this one otherwise you're gonna print out like a message so i'm gonna use jump i'm gonna do string so like do this kind of matching i'm gonna use one off so this one off is going to match either this or that so we can go ahead and pass it in the up reference so this function references a key and it grabs us a value so if just like here references we're going to need to reference a password so it's going to return us the passwords field value the current fields value right so we're going to reference password in that case it's going to return it for us and otherwise if this one like one off in here so if this one is actually uh kind of like true so i'm gonna reference that this one otherwise it's gonna just print out um an error for that particular case so we're gonna do uh password does not match okay that should do the job for us for the confirm password and it's kind of it's might seem a bit tricky but it's pretty simple the api is pretty simple you can take a look on yelp's documentation on github it should be super clear straight to the point so um yeah so that's exactly what we're gonna need now it's gonna grab this validation schema and um so we can go and pass it in into that case i'm going to do validation schema and just pass that in but that should already be and i guess but anyway so just passing that one in and it should do the job for us now let's go ahead and do console.log and check if there is any error so we're going to do formic errors and this object has all errors with like you know these keys full name email password and confirm password so we can go ahead and do like console log and uh let me just kind of jump into that one there you go so um let's go ahead and try to input something here please enter a strong password for using it or detail another slide please enter strong password that it tells us confirm password does not match and those are two the errors that we got the only two errors if you remove this one we're gonna have another errors like full name the full name is required if you enter up like this one just a single character in the full name because please enter your real name which is telling that the minimum character should be three if enter more it's going to just disappear so the validation is pretty much working fine now we have to use this kind of objects to render up this particular validation errors for us so let's go ahead and do that real quick in that case so for this one we're going to be using um we need to do something real quick before just like using this one so we want to inputs or put some errors but um for our like input it won't look that good so we have to do some kind of changes to the input to make it look a bit better so let's go ahead and add two things so i'm gonna do export cons i'm gonna do a field container so this one is going to like a container for a field which means an input and a kind of like an error element or something so i'm going to make this take a 400 percent i'm going to make this this display effects and flex direction to b column right that should do it also what we're going to be needing is actually field error so this field here is going to decide how we're going to render up the error just gonna give it like a style and everything so i'm gonna have a color i'm gonna say red but i'm gonna choose a different color than complete red just a bit down here i guess maybe you can change that later um for fun slide we want something not really that big so something small that should match and also i want to give it a minimum height because we don't want to change the height of our form whenever this value comes back and forth so uh that's that's the exact same thing we want to do there so let's go ahead and drop this one so i've got field container which i should do it um okay yes field container right and um got another field container right got two more filled containers uh let's copy paste them all [Music] and there you go so control save should make that look good anyway so we got the field containers let's go ahead and add the errors so we got called field error so just import that and here we're going to check if formic dots touched and this object the touch object has everything or all the fills that are touch which means all the fields that we have like put something into it like we close the mouse and we type something into it otherwise you're going to be false so this one is just like a boolean if it's touched if it's something like if we type something in that particular field it's going to be true otherwise it's going to be false so touched dot full name so if full name is judge if you type something on it and a formic the errors full name so in that case if there's both like full name touched and errors what we're going to do formic dot errors full name otherwise just going to render up nothing okay so basically this is going to happen for all of that i was going to just copy paste this one going to be email email email and this is going to happen two more times for both the password and the confirm password all right and this one should be confirmed password all righty so that should do the job for us perfectly and uh let me go ahead and check so we've already got some issues going on here and there so we're gonna refresh everything go to sign up let's see how it goes okay the form is kind of going up and down already so yeah kind of like we got also an issue since we put the button inside of that so let's go ahead and change that real quick uh for the form container so i just need to remove the box shadow just to make it look better and there you go so if you click on that nothing is going to happen because we types nothing if you type something that's good that's acceptable if you remove something um yeah that's that's not changing for the full name not sure email should do that or not okay there's something wrong so email please enter around the email so that should be something not making it work perfectly that's the errors are not being showed up here for formic and yeah so what we forgot about adding is actually the blur handler so here also we have to do like on blur make sure to delegate this to format and do blur handler or handle blur basically otherwise you won't be able to handle blur which means it won't be able to validate on blur okay so that should make sense here we have to edit all the fields that we need okay so let's go here now whenever we type something that's good remove it we got immediately full name you know required and everything so that's that's working pretty much fine in that case so yeah everything is working fine i got the email and everything uh the email should be working too so if we remove something out of the email it's gonna tell us immediately if you send your email remove it completely it's not gonna work so let's test this one guys one two three four five six scale says please enter a strong password because that's literally not a strong password if you interrupt something that does not match he's gonna tell us also password does not match if you enter up one two three four five six that's matching the error goes away pretty pretty well so that's that's exactly working fine and that's how we want it to work so the sign up here with the validation and everything it works absolutely fine and it's kind of like looking absolutely amazing so we can do the same thing with the sign lane and in a really quick way and an easy setup as well so um yeah this is just going to be simply a copy-pasting just to make that thing work but what i want to do is just before jump into this like the sign-in or the login part is actually combine or bind this registration with the api we got so we're just going to make this one fully working it's going to tell us the user that you registered you've successfully registered and all that kind of stuff with the api that we've created using node.js password.js and of course express.js so let's go and jump right into this one and i'm going to jump into the other project is express login register api and this one has like the api which is basically just first login for slash register and some dummy payment api that i just like for testing purposes okay so that's that's basically what it does and we're going to need this register api a lot and one thing just before jumping if you already watched my video or if you do watch my video grab the full source code you're not going to be finding the statues 409 and this statue is 500 and also for the login some stats uses so why out of this because this is better for handling errors on the ui just you know exactly which error message you got which http code you got back from this response of the server so that is much more better to understand exactly what it does so just add it in here you can ignore that but it's going to slightly change your access but make sure to add this one or maybe i'm just gonna update this if you clone the new one you're gonna find the full changes uh working pretty much fine so that's that's basically where it is now to start up this particular server what we need you just go ahead and do yarn forward slash dev or just yarn dev directly and this one is going to start up like a nodemon kind of server for us on localhost 5000 and that should do the job perfectly so let's go ahead and jump right into the code here so pretty simple code it should be working absolutely fine already so now what we want is actually whenever we submit which i think we did that submit right okay so let's go ahead and work onto the on submit so for this one we're gonna need to make sure that this one is asynchronous so we can like use async away with this one you can use then catch callback promise callback but i don't really fan of that so just use this pointer frame syntax much clearer much more maintainable much more understandable about everyone pretty much so we're gonna need the response and the values are going to be sent is actually those are the values so that's basically what we need actually has everything we need like the full name email password but likely if we take a look on that like attributes one we need in here we're gonna also like only need password email full name we're not gonna need the confirmed password so there's like no um you know no benefit just sending in any useful data so just gonna make sure extract that exactly so i'm going to have full name i'm just going to how to extract i'm going to do confer password then i'm going to do there that's basically how just using es6 powers and just make sure to structure that from the values okay now we're going to use axios it's going to do auto import for us i'm going to do a post request to http localhost 5000 forward slash api slash v1 or slash register and remember this is completely what i did on the other object so it depends on the api you're like binding with if you've got your own server one into the cloud you're probably not gonna have localhost of course you're gonna have like a domain name maybe an ipi address why not and just like points into this you could give it the routes where you want to register where you want to point the register access or points and yeah you got everything tied up into that basically so and lastly we're going to have like data valued into this now i'm going to have catch so this one is going to be error so if we got any kind of error so if error and air dot responds so we're going to hand the last and we're just going to do like console log or error so we can handle that properly otherwise if response is actually good and i think i forget about the ways in here so yeah i forget if response is good like we got a valid response we didn't get like an error in catching here so if an error happens on catching you're like if catch is going to be called with an error callback this one this variable is going to be undefined which means using an f in here won't let it go anywhere further so just make sure to always use like if with a weights in cash otherwise you can use like the try catch uh blocks which we can do in here but i think that's a much easier way to follow for now and um yeah so there's like no sense just rewriting the whole thing from scratch right now so that's that's basically what we got the response and everything and axios request now on the response in here if he gets a full value response so what we want we want to think we want to show some message saying oh thank you for registering or whatever so you have success set success which is just going to be a message i'm going to use states in here so it's going to be first it's going to be null obviously it's going to render up anything now i'm going to go inside of this one and i'm going to create another element we're just going to call um form success something like that you know i'm going to use this pen so for the color i'm going to use um green i'm going to change that slide a bit into maybe this color i'm gonna have this fun size of uh maybe 12 pixels a bit bigger and the minimum height is going to be 20 pixels i guess that should do the job now let's go ahead and import um what is that so we should go up above i guess it should go here so we should do form success and whenever we get something out of this just like anything at all so what we can do just do um so if success so we're gonna have it success sex otherwise i'm just gonna put an empty text there empty quotes now here if response is valid which means we're going to do like set success response data dot message and make sure to check for response as well okay that should that should make it work um perfectly for that so yeah if we just get any response that is good and everything we're gonna get like the good response in here we're just gonna run do it out of the box right into there so let's go ahead and test that thing we got the own submit working the data being sends user api everything we need so let's go back right here uh i'm just going to add like alex i don't know something like that alexa me dot com okay enter some dummy text into there something about is actually this trunk okay you can even type in all right so now if we try and sign up there you go we got thanks for registering and in fact this particular message is being sent back from the server so if you take a look on server code got thanks for registering our response if the user is registered successfully plus it is safe to the database and everything handled so we get that back and also if we take a look on the network tab we already got like the register that is being sent we get um the preview we got a message thanks for registering and it's being like render up really really well on top of there so we got everything into there working absolutely fine so i absolutely love that and just like one thing i can just going to make this bit to the left because i don't like this tank being centered so i guess maybe um yeah maybe is it this box container forum container not really sure what's making let me take a look so let's call the box container yeah maybe we should get rid of this align center kind of thingy and that should make it better and in fact yes it does thanks for registering maybe um it get a bit bold wait there you go that's i guess that's looking absolutely better and um yeah so that's that's looking absolutely fine and maybe we need to like clear out the forum completely whenever we got a success that is you know success registering or an area like whatever so we want to clear out the form so uh maybe in that case so formic i guess has the percent form which is a function that you do to reset form to its like original state to each initial state so i guess that should that should make it happen if you register this pretty much has been like you know um reset but i also want to just like reset whenever we got success but not an error because if you get an error we're going to lose what we did and i think we got an error already so user with email already exists and also we want to render out errors if any happens so to do so we're going to do the same thing as we did with success i'm going to do error set error so i'm going to use things and it's gonna be the same thing basically you're gonna have no here uh if you got any errors whatever right here so i'm gonna do here so it's gonna be air responds that message so i'm going to center up the error and uh yeah i guess we have to set the error for that once i'm just going to do copy this one paste it change from form success to form error and copy whatever that code is just to make it matching [Music] and that should make it work right so um i guess we need to import that manually by ourselves where is that so it's called form error and what i would check in here is actually if so if not form error and want to render up this otherwise not foreign success let's run on top from error error just gonna drop here otherwise just an empty string most likely so this should be air this should be success no from error success and hallelujah so uh yeah that should that should be looking absolutely fine and uh yeah so we got the full name email password so whenever we click on it we got this like required field and also i think i forgot about adding required fuel to um yeah i guess so confirm password please confirm your password that should make it better obviously so you click that please confirm your password if i click on it nothing's going to happen because this one is kind of disabled so it's not going to do anything for us whatsoever we can even make that disabled to just like go ahead inside like the submit button we add another css selector for disabled and make sure to do like something like filter contrast 0.7 just to make it you know lower on contracts so whenever you got like uh where is where is that button so you got submit button whenever it is disabled so we can do formic dot okay disabled or um it's not really disabled i guess it has errors or something or is valid so we got something is valid and we want it to be not valid which means we want to disable that basically so that's basically where it is it's in here is being dimmed the contracts is kind of lower and it looks like disabled so now if you enter can anything and um [Music] if you like works if the form is valid screw c becomes enabled otherwise disabled and yeah yeah yeah so yeah absolutely fine i love that and it's working absolutely fine if you get like an error if you remember rights i think it put alex hendricks experts me example if we sign up yeah we get thanks for registering because that's not what we put before but uh i can go ahead and put that again just testing so let me add example again so we can go ahead uh sign up again and that should be pumping out an arrow user with email already exists right but uh they are saying not success here all right so you say not error so a response dot message we're sending the error message and we're doing use state right so yeah that that should make you look good now and that should make you look um kind of working [Music] so let's go ahead and do that again say that it's not being um it's a conflict and we still got the issue anyway so let me just go ahead and do a console log on the air see what's going on so we got set you're working right really not sure exactly what is going on and we got air to be undefined right and yeah that's basically because i'm not accessing data dot message because that's that's a mandatory thing to do so if we click we got an error user with email already exists so you need to change the email so if you do like me too or something you sign up and that's not working with our logic here so the simplest part of that simple example we have just to make sure that there's no success here obviously and whenever there is an error we want to clear that success anyway right so we're going to do says success to be null and here we want to clear whenever we set the success when i clear the error to be null 2 and that should make it work perfectly whenever this error success is going to be cleared out for us perfectly so we got alex hendrix i don't know me an example whatever so we got this line up here we got some error and if you just like change the email to three or something we click we got thanks for registering and the form change back into the normal state so that c is exactly working absolutely fine with the finest way we want to do it and it's gonna be like absolutely amazing so is that working the awesome way that we want to do everything from scratch so yeah that's that's looking pretty great so what you're going to jump right now and add this into the sign-in form and make it look as good as the pretty much the like the registration form and body with the api and everything so let's go and jump right into this so we go login form and we have got like to start from scratch so i'm gonna do this real quick because it's gonna be pretty similar to what we did before with used format and ad validation and all that kind of stuff so i'm gonna just like walk through this one really simply like using the same approach that i did with registration or the sign up form okay so i'm going to first do formic i'm going to do use formic and make sure to like go out and do that we got the initial values so likely for these we got only email and password and mainly for that particular parts for the login we're not going to have a lot of like validation because you don't want to tell whomever is actually logging in that you need for example a minimum a characters password that's not really a security oriented kind of thing that you want to do in your login form so you just like maybe you want to provide some like say oh email field is required or something like that uh because those are that simple but nothing more than that just for security um like cases pretty much so that's that's we're going to be needing for that particular case like the email and the password now the next thing is actually validate on blur which is true and we're going to have on submit also i'm going to do like on submit let's have um values again so i'm gonna have this one go in on submit which is pretty great now we can go in and add basic validation so i'm gonna do validation schema and this one is to be import or from objects and we need email so basically it's going to be up a string dot email that required and here please or um yeah we're not going to check if an email i'm just going to say it is required i said before this just for secure reasons you can do that but i don't advise you guys to do that anyway and password basically i'm gonna do the same thing and require so just super basic validation for that particular both of them and uh so i'm going to do passing validation schema and just pass that one in okay now we've got for making everything we need so as i said before let's go and put inside of it these ones like the you know marginer and everything that we need so uh for that one we're gonna need to put a name so email value formic values email again and on change we're going to do the handler again so i'm going to formic dot handle change right so i'm going to copy both of these come down here and this one should be password and also for the name it should be password cool also make sure to put the button as a type of submit just to make it work perfectly and also we want to do disabled if it's not formic dot is valid okay so in that case if it's not valid just gonna like you know disable the button just for better ui and user experience perspective so that that should look absolutely amazing and what i want you to do just gonna console log um values just for testing purposes to see if that is actually working fine for us so let's go ahead and do uh here we got no error so email password login and i think we already like got some form being submitted for us which we don't want to to happen any kind of submissions or anything like that so uh we have to handle this using the on submit we do formic dot handle submit okay just to get rid of that issue of like auto submission so uh let me just gonna remove this error and whatever here they're logging in and there you go we got email and password which is looking fine if you remove there's errors going on but we're not rendering them so let's go ahead and do that using so field container and make sure here to um do field oh i don't want to do this so it's going to be field error right and [Music] so for that one i'm gonna use um the formic error so i'm gonna do the same thing for mcdot touch dots email and errors dot email so if this one go to formic there's the email otherwise so yeah we got that working here and just need to push that one here i'm gonna have um the field container also going on there so uh that is that's good got fuel container and everything just change this one to password this one should be password as well because that's uh that's a pretty basic thing it should just copy paste always it will just blow up in your face okay so that's good we got a few container inputs and everything so let's see if how it goes so if you interrupt nothing like remove we're not getting anything so let me just console.log yeah i guess i know the issue which i always always forgot to add which is on blur the blur handler so formic the handle blur and um yeah this one's gonna handle up blur for us so whenever we click outside the field it's gonna just like trigger the blur effects on the format which update the stage for us so if you enter something remove it and boom we got an issue already so cannot we properly email um email off and defined all right makes sense so it shouldn't be here should be ears and errors okay maybe that's that's what's causing an issue yeah there you go so we got email is required which is good if we put something password is required and we can log in because the buying is disabled anyway so that's working fine and that's working exactly the same way with the sign up and the sign in as well now let's go ahead and bind this into our real world api and make sure to log in the user just gonna do it pretty basically just sending the email password and checking in and gets um now obviously not we're not gonna get to the message just just do that to exactly guys know how you can just bind in the login as well because if you want to do a look real world application what you want to do is actually log in him and if you do like authentication which in our case we're doing using password.json using json web tokens so you get this gwt authentication token for particularly for that particular user you grab it and you can place it on your local storage and your cookies or something then authenticate the user get him into the dashboard then whenever like you want to access a particular restricted resource particularly restricted to that particular user well we have got to just like send this dwt every single time and all that kind of stuff just checking in this video tutorial as i told you about authentication a login register system i talked about so you can understand a lot and understand exactly what i'm talking about and how authentication works so make sure to do so real quick so um yeah so let's go and jump again here and um yeah this basic stuff in here i'm gonna do so i'm gonna just convert this one to asynchronous and i'm gonna get the data so i'm gonna do response awaits i'm going to use axios post so it's going to be localhost 5000 so api v1 login just providing the values should do the job so you get a catch so if any kind of errors happens and make sure to check if error and error dot responds so i'm going to set an error so let's go and use an error value in here as i did before so it's going to start up now again so it says error so error response.data message that's how we access this one and if response goes through like if the response is valid it's not undefined or something um i don't know we can um we can do some just i can do an alert will come back in authenticating so you can redirect him to the dashboard or whatever do this kind of you know in a scenario i talked about just a bit so yeah that's that's basically what we need to do for that and for phone container what we need is actually to render up this error so we want to form air so if we're going to just like do error otherwise nothing that should make it pretty straightforward and also i want to clear out the error so whenever we send a new like login request we're going to make sure that the error goes to null so we can send the proper request and we can clear out the error for just for better user experience of course so that should make it look better let's go ahead and do this one i'm going to use um a wrong email that doesn't exist okay so i'm going to use this one password whatever click login we got email password does not match if you take a look on the network tab if you like go ahead and inspect this one and seriously we got message email password does not work and we got 400 bad requests which means the server is actually responding with this message and we just like displaying this one so it's not allowing us to authenticate otherwise it's going to try um this email with a valid password now so we just do this one click enter and we got we'll come back in authenticating which is you know right so we got a value response take a look on the login we got headers we got 204 which means the no contents which means we basically got a valid response in a real world scenario in world war i said before this one should return something like a gwt token particularly generated for that particular user using his like credentials like email password then he can use that token for a valid amount of time like for a day two a week a month whatever then you can access your restrictive resource using that particular token and that's how like microservices like front-end and back-end applications basically make communication and just like authenticate between each others so that's basically how it works and hope you guys actually enjoyed this one because i really enjoyed like making this particular form which a lot of you guys in that case love this design and a lot of you guys asked me to do this validation kind of show yourself hopefully this is a full course validation from scratch with a binding validation just doing it everything so this one this course should take you from like a zero with like a ui form and make it a real active a live form that is bound with a logging register api that can do validation using the app that is had have been like state managers using formic and all that kind of stuff that is looking absolutely elegant so without further guys hope you guys enjoyed this one and yeah hopefully you guys enjoyed it make sure to subscribe like and push like button share with your friends why not and catch you all hopefully in the next ones [Music] [Music] [Music] you