Original subtitles

So I'm happy with my form behavior here

or with the behavior of this input,

but there's one thing which we must not forget.

This is one input of an overall form.

And in this case, of course, it's the only input,

but often you would have more than one input

as we're also soon going to see

in the basic form JavaScript file.

And for such scenarios, of course, it would be good

if we also could find out if the overall form is valid.

In the one input case, the overall form is always valid

if the one input is valid. But if it's a form

with multiple inputs, that's of course not the case

then, three of four inputs might be valid,

one input might be invalid

and the overall form then also would be invalid.

Because the overall form is only valid

if all form inputs are valid.

And as soon as at least one form input is invalid,

the overall form is invalid. And that's therefore something

we should take into account

and also incorporate into our logic.

But how can we do that now?

Well here's one way of doing that. We can add a new state

which is form is valid,

and it has a set form is valid state updating function.

And initially that's false

because initially that form isn't valid.

Now I wanna update this overall form is valid

updating function whenever one of the forum inputs changes.

And for that we could again use useEffect.

So I'll bring back that input

and I'll then add a useEffect call here,

below those, two constants here.

And in this useEffect call here,

I want to set the overall form validity.

For this I'm interested in the validity of my form inputs

and hence I'll add all the form input validities I have

in this form here.

So for example, the entered name is valid constant.

If we had two form inputs here,

we would have another constant.

For example, for the entered age is valid.

And then I would enter entered age is valid

as another dependency here. But we don't have that here

hence it's only one entry.

Now that's the dependency of useEffect and as you learned,

whenever the value in such a dependency changes,

this effect runs again. And it also runs

for the very first time this component is evaluated.

So in this useEffect call, I then basically wanna combine

all my dependencies and check if they are all valid

and if they are, I wanna set the overall form to valid.

So here I'll check if entered name is valid

and I would add other validities if we had them

like entered age is valid and check if that's true as well,

but we don't have that here. And if it is valid,

then I'll set my overall form as valid.

Else, if at least one of my inputs is invalid,

I'll set my overall form to invalid.

So I'll set form is valid to false.

And then we could use this value as well.

For example, if we wanted to disable this button.

Here we could set disabled equal to, not form is valid.

So the button is disabled if the form is not valid.

And for this I'll quickly add a style for this.

So on the button here, I'll just set a disabled style

which also should apply if the button

is then hovered or set as active.

And I'll simply add a background color of a light gray here,

and the text color of a slightly darker gray like this,

and a border, color of that light gray as well.

And I'll set the cursor to not allowed.

But that's just some C.S.S styling for this.

With that edit though and with disabled being set,

you see this button is disabled at the start.

It also stays disabled but if I enter

at least one valid character it becomes enabled.

If I invalidate again, it's now disabled again.

Now also the form can't even be submitted anymore

if it's invalid. Now it's up to you

whether you want to disable the button or not

you'll find opinions in both directions

out there in the web. There are all the people which argue

that you should allow your users to submit an invalid form

to not restrict them without them knowing

what they have to enter but that is up to you.

I just want to show you

how you could build something like this

and how you could manage the overall form validity

in addition to the validity of the individual inputs

because that can also matter.

Of course, if we take a closer look

at this useEffect function here though,

we don't even need useEffect.

We're not performing any side effect in there.

We're doing nothing that would be a problem

if we would do it without using useEffect.

All we're doing is deriving a new value

just as we're already doing it in lines seven and eight

with entered name is valid and name input is invalid.

So we're basically doing the same here

just for deriving the overall form validity.

And of course there is no reason

to use useEffect here for that.

We can, but it really doesn't add anything

it just adds extra component re-evaluation cycles.

And that's of course not an advantage.

Instead, we can get rid of that form is valid state

and we can get rid of useEffect

and just check if entered name is valid

and any other properties we might have here

like entered age if we have that.

And then we simply add a new variable here, form is valid

which by default is false let's say.

Which we then set to true here in this if case

and which we set to false here in the else case.

And actually we don't even need the else case now

because that is our default and we only override this

with true if all our input states are valid.

So this again allows us to slim this down even further.

And I'm showing this because

thinking about possibilities like this, is also worth it

and is a good thing to do because it allows you

to write slimmer code and maybe even more performance code.

So with that, we still got the same behavior as before,

but now with less code.