Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,150 --> 00:00:05,610
So I'm happy with my form behavior here
2
00:00:05,610 --> 00:00:08,450
or with the behavior of this input,
3
00:00:08,450 --> 00:00:11,100
but there's one thing which we must not forget.
4
00:00:11,100 --> 00:00:14,160
This is one input of an overall form.
5
00:00:14,160 --> 00:00:16,890
And in this case, of course, it's the only input,
6
00:00:16,890 --> 00:00:19,170
but often you would have more than one input
7
00:00:19,170 --> 00:00:20,930
as we're also soon going to see
8
00:00:20,930 --> 00:00:23,580
in the basic form JavaScript file.
9
00:00:23,580 --> 00:00:27,520
And for such scenarios, of course, it would be good
10
00:00:27,520 --> 00:00:32,110
if we also could find out if the overall form is valid.
11
00:00:32,110 --> 00:00:36,750
In the one input case, the overall form is always valid
12
00:00:36,750 --> 00:00:40,040
if the one input is valid. But if it's a form
13
00:00:40,040 --> 00:00:42,980
with multiple inputs, that's of course not the case
14
00:00:42,980 --> 00:00:46,620
then, three of four inputs might be valid,
15
00:00:46,620 --> 00:00:48,600
one input might be invalid
16
00:00:48,600 --> 00:00:51,840
and the overall form then also would be invalid.
17
00:00:51,840 --> 00:00:55,090
Because the overall form is only valid
18
00:00:55,090 --> 00:00:57,940
if all form inputs are valid.
19
00:00:57,940 --> 00:01:02,150
And as soon as at least one form input is invalid,
20
00:01:02,150 --> 00:01:06,700
the overall form is invalid. And that's therefore something
21
00:01:06,700 --> 00:01:08,900
we should take into account
22
00:01:08,900 --> 00:01:12,480
and also incorporate into our logic.
23
00:01:12,480 --> 00:01:14,770
But how can we do that now?
24
00:01:14,770 --> 00:01:18,290
Well here's one way of doing that. We can add a new state
25
00:01:18,290 --> 00:01:21,000
which is form is valid,
26
00:01:21,000 --> 00:01:24,923
and it has a set form is valid state updating function.
27
00:01:26,670 --> 00:01:28,600
And initially that's false
28
00:01:28,600 --> 00:01:31,073
because initially that form isn't valid.
29
00:01:32,080 --> 00:01:35,900
Now I wanna update this overall form is valid
30
00:01:35,900 --> 00:01:40,900
updating function whenever one of the forum inputs changes.
31
00:01:41,440 --> 00:01:44,509
And for that we could again use useEffect.
32
00:01:44,509 --> 00:01:46,680
So I'll bring back that input
33
00:01:46,680 --> 00:01:51,150
and I'll then add a useEffect call here,
34
00:01:51,150 --> 00:01:55,360
below those, two constants here.
35
00:01:55,360 --> 00:01:57,713
And in this useEffect call here,
36
00:02:01,400 --> 00:02:04,423
I want to set the overall form validity.
37
00:02:05,690 --> 00:02:10,690
For this I'm interested in the validity of my form inputs
38
00:02:11,550 --> 00:02:15,350
and hence I'll add all the form input validities I have
39
00:02:15,350 --> 00:02:16,910
in this form here.
40
00:02:16,910 --> 00:02:21,070
So for example, the entered name is valid constant.
41
00:02:21,070 --> 00:02:23,460
If we had two form inputs here,
42
00:02:23,460 --> 00:02:25,210
we would have another constant.
43
00:02:25,210 --> 00:02:28,700
For example, for the entered age is valid.
44
00:02:28,700 --> 00:02:32,590
And then I would enter entered age is valid
45
00:02:32,590 --> 00:02:35,830
as another dependency here. But we don't have that here
46
00:02:35,830 --> 00:02:38,210
hence it's only one entry.
47
00:02:38,210 --> 00:02:41,190
Now that's the dependency of useEffect and as you learned,
48
00:02:41,190 --> 00:02:44,160
whenever the value in such a dependency changes,
49
00:02:44,160 --> 00:02:47,120
this effect runs again. And it also runs
50
00:02:47,120 --> 00:02:51,083
for the very first time this component is evaluated.
51
00:02:51,920 --> 00:02:55,710
So in this useEffect call, I then basically wanna combine
52
00:02:55,710 --> 00:02:59,690
all my dependencies and check if they are all valid
53
00:02:59,690 --> 00:03:03,610
and if they are, I wanna set the overall form to valid.
54
00:03:03,610 --> 00:03:08,460
So here I'll check if entered name is valid
55
00:03:09,370 --> 00:03:12,490
and I would add other validities if we had them
56
00:03:12,490 --> 00:03:16,350
like entered age is valid and check if that's true as well,
57
00:03:16,350 --> 00:03:20,060
but we don't have that here. And if it is valid,
58
00:03:20,060 --> 00:03:23,663
then I'll set my overall form as valid.
59
00:03:24,570 --> 00:03:27,900
Else, if at least one of my inputs is invalid,
60
00:03:27,900 --> 00:03:31,530
I'll set my overall form to invalid.
61
00:03:31,530 --> 00:03:34,790
So I'll set form is valid to false.
62
00:03:34,790 --> 00:03:37,150
And then we could use this value as well.
63
00:03:37,150 --> 00:03:41,870
For example, if we wanted to disable this button.
64
00:03:41,870 --> 00:03:46,870
Here we could set disabled equal to, not form is valid.
65
00:03:47,790 --> 00:03:51,503
So the button is disabled if the form is not valid.
66
00:03:54,120 --> 00:03:57,180
And for this I'll quickly add a style for this.
67
00:03:57,180 --> 00:04:02,180
So on the button here, I'll just set a disabled style
68
00:04:02,390 --> 00:04:04,500
which also should apply if the button
69
00:04:04,500 --> 00:04:08,150
is then hovered or set as active.
70
00:04:08,150 --> 00:04:11,823
And I'll simply add a background color of a light gray here,
71
00:04:12,830 --> 00:04:17,829
and the text color of a slightly darker gray like this,
72
00:04:20,089 --> 00:04:25,090
and a border, color of that light gray as well.
73
00:04:29,440 --> 00:04:32,313
And I'll set the cursor to not allowed.
74
00:04:34,130 --> 00:04:36,623
But that's just some C.S.S styling for this.
75
00:04:37,920 --> 00:04:41,370
With that edit though and with disabled being set,
76
00:04:41,370 --> 00:04:44,113
you see this button is disabled at the start.
77
00:04:45,200 --> 00:04:47,170
It also stays disabled but if I enter
78
00:04:47,170 --> 00:04:49,793
at least one valid character it becomes enabled.
79
00:04:51,200 --> 00:04:55,640
If I invalidate again, it's now disabled again.
80
00:04:55,640 --> 00:04:58,770
Now also the form can't even be submitted anymore
81
00:04:58,770 --> 00:05:01,330
if it's invalid. Now it's up to you
82
00:05:01,330 --> 00:05:03,840
whether you want to disable the button or not
83
00:05:03,840 --> 00:05:05,880
you'll find opinions in both directions
84
00:05:05,880 --> 00:05:08,700
out there in the web. There are all the people which argue
85
00:05:08,700 --> 00:05:12,570
that you should allow your users to submit an invalid form
86
00:05:12,570 --> 00:05:15,010
to not restrict them without them knowing
87
00:05:15,010 --> 00:05:17,770
what they have to enter but that is up to you.
88
00:05:17,770 --> 00:05:19,020
I just want to show you
89
00:05:19,020 --> 00:05:21,290
how you could build something like this
90
00:05:21,290 --> 00:05:25,230
and how you could manage the overall form validity
91
00:05:25,230 --> 00:05:29,550
in addition to the validity of the individual inputs
92
00:05:29,550 --> 00:05:31,633
because that can also matter.
93
00:05:32,480 --> 00:05:35,060
Of course, if we take a closer look
94
00:05:35,060 --> 00:05:38,930
at this useEffect function here though,
95
00:05:38,930 --> 00:05:41,030
we don't even need useEffect.
96
00:05:41,030 --> 00:05:43,720
We're not performing any side effect in there.
97
00:05:43,720 --> 00:05:46,460
We're doing nothing that would be a problem
98
00:05:46,460 --> 00:05:49,720
if we would do it without using useEffect.
99
00:05:49,720 --> 00:05:53,590
All we're doing is deriving a new value
100
00:05:53,590 --> 00:05:57,300
just as we're already doing it in lines seven and eight
101
00:05:57,300 --> 00:06:01,560
with entered name is valid and name input is invalid.
102
00:06:01,560 --> 00:06:03,090
So we're basically doing the same here
103
00:06:03,090 --> 00:06:06,470
just for deriving the overall form validity.
104
00:06:06,470 --> 00:06:07,890
And of course there is no reason
105
00:06:07,890 --> 00:06:10,160
to use useEffect here for that.
106
00:06:10,160 --> 00:06:13,040
We can, but it really doesn't add anything
107
00:06:13,040 --> 00:06:17,210
it just adds extra component re-evaluation cycles.
108
00:06:17,210 --> 00:06:20,260
And that's of course not an advantage.
109
00:06:20,260 --> 00:06:24,360
Instead, we can get rid of that form is valid state
110
00:06:24,360 --> 00:06:27,130
and we can get rid of useEffect
111
00:06:27,130 --> 00:06:29,810
and just check if entered name is valid
112
00:06:30,700 --> 00:06:34,470
and any other properties we might have here
113
00:06:34,470 --> 00:06:36,403
like entered age if we have that.
114
00:06:37,350 --> 00:06:42,240
And then we simply add a new variable here, form is valid
115
00:06:42,240 --> 00:06:44,940
which by default is false let's say.
116
00:06:44,940 --> 00:06:49,390
Which we then set to true here in this if case
117
00:06:49,390 --> 00:06:53,400
and which we set to false here in the else case.
118
00:06:53,400 --> 00:06:56,250
And actually we don't even need the else case now
119
00:06:56,250 --> 00:06:59,580
because that is our default and we only override this
120
00:06:59,580 --> 00:07:03,350
with true if all our input states are valid.
121
00:07:03,350 --> 00:07:07,320
So this again allows us to slim this down even further.
122
00:07:07,320 --> 00:07:08,930
And I'm showing this because
123
00:07:08,930 --> 00:07:13,380
thinking about possibilities like this, is also worth it
124
00:07:13,380 --> 00:07:16,970
and is a good thing to do because it allows you
125
00:07:16,970 --> 00:07:21,850
to write slimmer code and maybe even more performance code.
126
00:07:21,850 --> 00:07:26,560
So with that, we still got the same behavior as before,
127
00:07:26,560 --> 00:07:28,253
but now with less code.
10481
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.