out. And for each field here, we are doing two-way data binding. So we bind the value to the piece of state here, and on change, so as the user types, we are updating that piece of state. So you can see we do this for every form field here. We also have our on submit handler for the form right here called submitForm. I am doing some client-side validation here. So very basic stuff. I'm just checking if these fields exist, and also checking if the password is the same. If not, then alert something. But if they're all okay, it will reach this point, and all it does is output these fields. And of course, you can use browser-side validation if you like. That's probably the easiest way to do validation. For example, we can just add a required field here. But if you want a more consistent look for your validation, you probably want to make use of client-side validation, which we'll take a look at using an external library called Yup, which integrates with Formik. Now

consistent look for your validation, you probably want to make use of client-side validation, which we'll take a look at using an external library called Yup, which integrates with Formik. Now again, for simple forms, this is fine. If this is all you're doing, and you find this to be maintainable, then there's no need to pull in the library. However, like I said, as you add more things like more fields or client-side validation, your code can start to get quite messy. So let's pull in Formik and see how this can help us. So let's go to the docs here. Let's grab the npm install. Let's copy this. Okay. And I will stop my server. Let's install that. And let's restart our server. Go back to the docs here. Let's go to the tutorial and scroll down a bit. You can see we have this useFormik hook, which gives us access to this Formik object, which we can make use of. So let's grab these. Let's grab the import. Let's put it in here, up here.

if you take a look at the example here, we no longer have to do the two-way data binding ourselves. Formik will handle that for us. So if you go down here for the on change handlers, we can just use, what is it? Formik.handleChange here. So let's grab this. Let's use this instead. And for the value, it is now going to be Formik.values.fieldName. In this case, Formik.values.name. And we'll grab this so we can just paste it into the rest. So this one here will be handleChange and Formik.values.email. And I'll just add it in the rest. Okay. So let me save that. So we already cleaned up our code a bit with this handleChange. So Formik is doing all of that for us. And now for the submit handler, before we were calling our own method here. But now if you take a look at the example, we are calling Formik.handleSubmit and handleSubmit will be handled by this on submit handler that's defined in here.

calling our own method here. But now if you take a look at the example, we are calling formik.handleSubmit and handleSubmit will be handled by this onSubmit handler that's defined in here. So let's grab this. Let's put it in here. And we can move the logic over for registering. So again, I have this generic validation, which we'll replace in a second, but we'll grab it anyways. And we no longer need to do the preventDefault; formik will do that for us. And instead of this, I'll just keep what they have in here, which is just stringifying the values of the form. So let me just paste in that validation here. Okay, let's get rid of our submitForm here. Okay. And hopefully I did that correctly. Let's see if our form still works. So if we go back to our form here, let's just refresh. Let's see if the validation is still there. It is. Let's fill this out. And let's see if we get the JSON.stringify.

see if our form still works. So if we go back to our form here, let's just refresh. Let's see if the validation is still there. It is. Let's fill this out. And let's see if we get the JSON.stringify. And we don't looks like I did something wrong here. Oh, yeah. So we have to update these here to use values instead. Let me just do that quickly. values.name. Okay. And let's try that one more time. Okay, so I'm going to hit register here. Let's see if we get the JSON.stringify. And it does work. Cool. And let's make sure our validation still works. Let me change the password here. And passwords do not match. Okay. And oftentimes, you want to reset the form after you're done with it. So you can actually grab a resetForm method from here. So let's say values. And then we can destructure resetForm from here. Okay, let's try that out. So after we're done, we want to reset the form.

from here. So let's say values. And then we can destructure resetForm from here. Okay, let's try that out. So after we're done, we want to reset the form. Okay, let's give that a try. Let me just fill this out again. Let's hit register. And let's see if it resets the form. And it does. Cool. Now let's take a look at client side validation with Yup. So Yup integrates nicely with Formik. So let's go ahead and make use of it. You can see the repo here if you want more details. But this tutorial should be enough for us. So let me stop this again. Actually, let me get rid of useState since we no longer need that. So back to our code, we no longer need our useState calls. Everything is within Formik. And we can get rid of the useState up here as well for this whole line. Okay, so let me save that. Let's stop our server. Let's install Yup. Let's restart our server here.

three characters. And let's say name must be at least three characters. And for the required error message, we can say name is required. And for email, let's keep the email field here. And for required, let's just say email is required. Okay, save that. For password, it's pretty much the same as name here. So let me just grab this. Let's paste that in. It is a password field. It's a string minimum, let's say five characters. The string minimum, let's say five characters, say password must be at least five characters. And password is required. And password_confirmation is not that straightforward, but not too difficult. So it's password_confirmation. It's a string as well. But we have to use the oneOf method and then we provide another field that has to have the same value. So in this case, we want to make sure it has the same value.

It's a string as well. But we have to use the oneOf method one of and then we provide another field that has to have the same value. So in this case, we want to make sure it has the same value as the password field. So to grab that we can say Yup.ref('password'). And then the second parameter is the error message. Your passwords do not match. Okay, save that. And now on the formik object here, we should have access to formik.errors, which will have errors for each field if they exist. So let me just console.log(formik.errors) down here so you can see it. Let's just say formik.errors. Okay, so let me save that. Let's go into our app. Let's open up DevTools here. And as I type into the field here, you'll see that there are errors for each field. So they must be three characters, email is required and password is required. So we can make use of this in our JSX and output the error anywhere we like. So I'll

are errors for each field. So they must be three characters, emails required and password is required. So we can make use of this in our JSX and output the error anywhere we like. So I'll just put it underneath the input. So if you take a look at the docs, I believe they have an example for that as well. You can see that they're doing a ternary here. It's checking for the error here. We'll take a look at this touched field in a second. And if there is an error, show it. If not, show nothing. So let's grab this. Let's put it underneath our input fields. So we have to do it four times in our case. So right here. And I do have a class for an error field. It just makes the text red. So let me just show you that actually say p.error. This is error. Just to show you how it renders in the form. There it is. Okay, so let's paste that in. And let's make use of this class name error. Okay, don't worry about touched for now. Let's remove that. And for us, it's just

you how it renders in the form. There it is. Okay, so let's paste that in. And let's make use of this class name error. Okay, don't worry about touched for now. Let's remove that. And for us, it's just name. So we can replace this. Let's see if that works for name here. I forgot to put the class name. So let's say class name equals error. Okay, save that. And it does work. And as I type, it should go away because it's now more than three characters. Okay, so let me just add this to the rest of the fields here. So for email, right here. And let's just change it to email here. Okay, see if that shows for email does. So I'll just add it to the other two as well. Okay, everything's in place. Let's see if the validation works. And it does. But the other validation messages are showing when we didn't even visit the field yet. So we only want to show

Okay, everything's in place. Let's see if the validation works. And it does. But the other validation messages are showing when we didn't even visit the field yet. So we only want to show after we visited the field here. And if you take a look at the documentation, there is a section for that. So we do not want to show the error unless we already interacted with this field. So just like errors, there is a touched field that formik has, which by default is false. So for example, when I refresh, we haven't touched any of these fields yet. So for example, formik.touched.name should be false until I click on it and then focus off of it. So this is also known as blurring off of it. So we can make use of an onBlur event. So if you look down here, where is it? We're using formik.handleBlur. And this will update the touched field. So we have to add this on all of our fields. So let's go ahead and

on blur event. So if you look down here, where is it? We're using formik.handleBlur. And this will update the touched field. So we have to add this on all of our fields. So let's go ahead and do that. I'll just put it at the end here. One here, it's the same for each one. And there's a way to clean this up as well, which I'll show you after we do this second one, third one, and this one. OK. And now in our console.log, which I had earlier where they put that console.log, it's console.log the touched fields. And hopefully you'll see what I mean. So back here. So I'm in my app here. Let's open up DevTools. And you'll see by default, the object is empty because none of these fields have been touched yet. So if I focus on name, blur off of it, you'll see that name is now true because the name field has been touched. So same for the other fields. So email, blur off, email is true. So now we can make use of this in our check to show the

you'll see that name is now true because the name field has been touched. So same for the other fields. So email, blur off, email is true. So now we can make use of this in our check to show the errors. So, for example, for name right here, we can add another condition here. We can say, sorry, not here, here. And formik.touched.name. So only show the error if there is one and if it's been touched already. So we can do the same for the other fields. Let me just do that behind the scenes. OK, so I added them to the rest of the fields. And let's see if this works now. So let me close this. Let's refresh. So now if I start typing in here, you can see the other errors don't show up until I blur off of this, or at least this one won't show until I blur off of it. So it's under three characters. So if I blur off of it, it should show the error. And it does. Cool. So as I type, this error should go away. And it does. Same for email. So if it's not a

Right here. Say passwordConfirm is required. So let's try that one more time. Or maybe that should work now. And it does. Cool. Let's try it with an incorrect password. That doesn't match the password field. Passwords do not match. But if everything matches, this should work. And it does. Cool. And if I hit OK, this should reset the form. And one more cleanup we can do here. As you can see, this error should go away. As you can see, this is pretty much the same for each field. onChange and onBlur are exactly the same. And the value just depends on the current field. So if you want to reduce this boilerplate, you can. If you take a look at the docs, you'll see getFieldProps. And we can use this method to get rid of that. So we just have to do this, formik.getFieldProps and give it the field. And that will essentially get rid of these three lines here.

this method to get rid of that. So we just have to do this, formic.getFieldProps and give it the field. And that will essentially get rid of these three lines here. So let me just comment it out so you can see it in the final code. We can do this. This is the name field. And we can do the same for the others as well. So these three is replaced by this code. This is the email. This one is the password. And we have confirmPassword or passwordConfirm. Okay. One more final test to make sure everything is working. Back here, our validation works. Let me just fill this out. And let's make sure everything still works. Register. And it does. And let's make sure everything still works. Register. And it does. Cool. So as you can see, formic can help clean up your code, especially as your forms start to get more complex with

And let's make sure everything still works. Register. And it does. Cool. So as you can see, formic can help clean up your code, especially as your forms start to get more complex with more fields and things like client-side validation. So if you feel like your form code can benefit from a library like this, definitely check out formic.