All language subtitles for 014 Applying Our Hook & Knowledge To A New Form_en

Were are you successful?

I really recommend that you have a look

at those last lectures again

to fully understand how you manage entered values, validity

and touched state,

and combine that all with different event handlers,

to make sure that you deliver the user experience

you wanna deliver.

Now, here in this case,

I will continue with that finished custom hook,

which we built already.

I will not build up that entire logic again from scratch

because I feel like I would basically

just be wasting your time if I did that

because it's just what we did in the previous lectures

but I do want to apply to custom hook here one more time

to really show you how you could do that

in a brand new empty form.

And therefore, if we start by importing user input from

going up one level hooks/use-input

and we then of course call useInput here.

And we call it free times because we have free inputs here.

Now, the validation logic for these free inputs

is up to you.

I didn't give you any restrictions or guidance there

but it makes sense to ensure that these inputs aren't empty

and that the email address is an email address.

So for that, for the first two inputs,

I'll check if the value we're getting is not empty,

if we trim it.

And since I'll use the same function here,

wrap it and copy and pasting it like this,

I will create a new function

outside of the component function

because that's not a function that needs to be rebuilt

if the component is rebuilt

and I will name it isNotEmpty,

store my function in this constant

and then just pass this constant here

which holds this function in the end.

So this is really just the function outsourced

into a separate constant

and I can do something similar for the email

isEmail and here I get a value

and check that this includes an @ symbol.

And then I pass his email to the third user input call.

Now the custom hook returns an object as we learned

and that object is full of data which we can use.

For example, it contains the value

and we might wanna use the value here

to be able to reset it once the form is submitted.

So here, this is for my first input,

I'll have the first name value,

then we get IsValid.

So this is firstNameIsValid

and I'm assigning these aliases here

because I'm going to extract the same keys two more times.

So we need aliases to avoid name clashes.

And here we also get to the value change handler

which I'll alias with firstNameChangeHandler.

I get the inputBlurHandler, which I pulled out

which I alias with firstNameBlurHandler

and the reset function,

which I'll alias with resetFirstName like this.

And then I'll copy this here this code

and repeats these here for the second user input call.

But of course here it's the last name value

and the last name is valid

and here it's there for all his lastNameChangeHandler

and lastNameBlurHandler and resetlastName

and then copy and paste it one more time

for the last input and that's the email value

and the emailIsValid

and here it's the emailChangeHandler

and the emailBlurHandler and here is resetEmail.

And now with that all done,

we can go down to the JSX code

and on the first input,

for example bind our firstNameValue,

for onChange we bind firstNameChangeHandler,

and for on blur, we bind the firstNameBlurHandler like this.

Then for the second input,

we bind value to lastNameValue onChange

to lastNameChangeHandler

and on blur unsurprisingly to lastNameBlurHandler.

And then here for this input,

I bind my value to emailValue onChange

to the emailChangeHandler

and onBlur to the emailBlurHandler.

Now, I also wanna show error messages if appropriate

and I wanna show different class names

or add different class names.

And I also want to disable the submit button

if the form is invalid.

So let's start with the class names and the error texts.

For this there's one other field we can extract

and that's the hasError field,

which I'll store in firstNameHasError alias,

and here on the second use input called

its last name has error

and here on the third custom hook you search

it's emailHasError.

And it's this HasError field, which we can now use

because now we can infer those class names for example.

Here I have my firstNameClasses

and for that I'll take my firstNameHasError key.

And if I have an error,

I'll add a class of form-control invalid,

otherwise just form-control

and all I will repeat this error for lastNameClasses

and emailClasses.

And here we then have to lastNameHasError

and emailHasError.

And then here we bind our firstNameClasses

and we'll the second div, we bind the lastNameClasses

and on that last div we bind the emailClasses.

Now for the error messages,

we simply go to the first input

where we might need an error message like,

Please enter first name.

And here we check if firstNameHasError

and if that's the case we showed as paragraph otherwise not.

And I then copied that logic to the second input

where I say, Please enter a last name

and I checked for lastNameHasError

and we copied one more time to the email address

where I check for emailHasError

and I said, Please enter a valid email address.

So now that's all wired up.

Now for the overall foreign validity,

we can again derive that state,

we can add a formIsValid state, which initially is false.

And then we check if the firstNameIsValid

and the lastNameIsValid

and the emailIsValid and all three have to be valid.

And only if they are all free valid,

I'll set formIsValid to true.

If at least one of them is not valid,

the form will stay invalid.

So now we have the formIsValid state

we can use that to disable the button for example,

to set disabled to not formIsValid.

If the form is not valid, the button is disabled.

Last but not least for the form submission

which I also wanna add here,

I'll add the onSubmitHandler

and then simply add a new function here,

submitHandler could be the name where I get an event.

And as you learned, we call event.preventDefault here

to prevent that browser default of sending a request.

And then I check if the form is not valid

and if it's not valid, I return

and that's by the way new,

in simple input I didn't do that,

in the form submission handler

there I was still checking for the entered name only

and that was an oversight from my side

but of course we can't even reach that handler

since the button is disabled anyways.

Nonetheless, adding that extra check here might make sense

because the user could theoretically enable the button

with the def tools,

which of course is not really what the user should do,

but it could be done.

So having the extra validation step in here

still also could make sense.

And then they're after if the form is valid

and we made it past to this check,

I will console.log Submitted

and then all the console.log my values.

So the firstNameValue

the lastNameValue and the emailValue.

And then I will call resetFirstName,

resetLastName and resetEmail.

Now we can wire up the submit handler here

and we should be good to go.

If we save everything and go back here,

the button is grayed out by default.

If I click in there, I get this error

and this error and this error

and the errors are not red

because I forgot to assign the right CSS class here.

On these paragraphs we should add a CSS class of error-text.

So make sure you add this on the firstNameError paragraph

and the lastName paragraph and the emailError paragraph.

Now they are red.

And of course if I enter valid values here,

then this becomes submittable

and if you open the def tools and I click Submit

I see Submitted, I see the entered values and its reset.

And again, it's working as before now.

So this is looking good now

and now we applied our custom hook

and what we learned to this new form as well.