Скачать или смотреть Section 10 (React Intermediate): Lesson 4 - Form validation

Hey you.

And welcome.

In a previous video, we had created a form component.

In this video we will use that form component to start working with form validation and also adding

contacts into our contact app.

So let's dive right into it.

In order to work with that, I have my Firefox already open to a documentation by chakra UI about using

React hook form at the time of this recording.

React Hook form is one of the best solutions that you can work with with form validation.

So that's the one that I'll be working with.

In order to work with that, I need to install React hook form library into my project.

So I'll head over to my CLI and just do NPM install, react hook form enter and that should install

that for me.

I'll hide my terminal and then let's go back to documentation and let's read the code a little bit to

first make sure what are we supposed to copy?

Because I'm not going to copy paste the whole thing.

I think there may be some things that I don't need here.

So after the imports we have hook form component so we can see that we are first going to start using

the use form hook from react hook form, and that's going to allow us to work with some of the API's.

That hook form comes with.

One of them would be handlesubmit.

So when the submission happens, what should the form do?

Register What form inputs are you trying to work with?

So you have to register them to make sure the validation works and then the form state so we can check

all the things like which form component, which, which input is valid, which one input is not it?

Did somebody touch it?

Did did the validation actually happen?

So there's tons of options to work with.

Form State keeps track of the entire state of the form.

Then we have a function which is the onsubmit function, and here they're just mimicking a three second

delay.

That's what this new promise line is doing, is just mimicking a three second delay to say that maybe

it went to server and is receiving a response back and just shows you alert right after that.

So it doesn't really do anything.

But notice that in the onsubmit we receive values from the form react, hook, form, callback so we

can get the values here and do whatever we want on submit when the onsubmit function is called.

So that's one of those things that we'll probably copy over and then next portion of it and the return,

the whole form element is being used here.

So we are using the built in HTML form element and we're passing the onsubmit function and we'll providing

it with the handle submit that was provided by React hook form right there and we're using the handle

submit.

And this is a curry function, so we're calling it and it will return us a function that will be called

on on submit.

So it's two functions.

So in handle submit, we pass our our callback, which is called on submit and it will be called when

the submission actually happens.

And a few few more things that they have used here such as form message.

So right now if the form is invalid, if the name was not provided and we try to submit, nothing really

happens.

So this would be useful to say when the form submission happens, error message should show in this

area versus that area.

So we'll be utilizing this as well.

And then for the submission in the button, we're passing it.

Nothing is just making it a type of submit and that will trigger the form submission for us.

Okay.

Let's take it step by step.

First thing I will copy over the use form hook into my VS code.

So let's do that under contact form and auto import that from react hook form and that's done perfect.

Next thing would be let's start utilizing it in the return.

So I will wrap the whole thing in a form component HTML form component and move this up one line.

That should work.

All right, great.

So now we have the form component there as well.

And remember, it was using on submit function.

So I'll pass that and we will get the handle submit from React hook form.

And remember, it takes a callback.

So we have to create another function that will be our handle submit.

Oops like this.

Great.

And Handlesubmit will receive values.

Values will be type of any.

For now we may start typing it later, but for now I'll just call it any and oh, I cannot call it Handlesubmit.

Let's call it Onsubmit.

There was two variables with handles.

I mean, that's why.

There we go.

So no complaints from TypeScript and our form is looking good.

Now we do have to start utilizing register.

Without that, the react hook form won't know what it needs to keep track of.

So let's start looking at the documentation for that.