Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,100 --> 00:00:03,290
One downside
2
00:00:03,290 --> 00:00:07,440
of the validation we added thus far is our code.
3
00:00:07,440 --> 00:00:09,520
Specifically, this line
4
00:00:09,520 --> 00:00:12,700
we have this entered name is valid state.
5
00:00:12,700 --> 00:00:16,190
And we start with true here, which implies
6
00:00:16,190 --> 00:00:19,630
that initially we treat this as valid
7
00:00:19,630 --> 00:00:22,750
and it turns out that that's not really the case.
8
00:00:22,750 --> 00:00:24,570
We just set it to true
9
00:00:24,570 --> 00:00:28,633
to not show does error state here ahead of time.
10
00:00:29,840 --> 00:00:31,770
But actually we're cheating a bit here.
11
00:00:31,770 --> 00:00:34,020
We're setting this state to avail you.
12
00:00:34,020 --> 00:00:37,840
That's not correct because we know that we're not
13
00:00:37,840 --> 00:00:41,434
going to really need that state for anything else.
14
00:00:41,434 --> 00:00:45,103
Then outputting, whether it is this valid or not.
15
00:00:47,150 --> 00:00:49,610
Now, why could this be a problem?
16
00:00:49,610 --> 00:00:53,230
Well, imagine you had some useEffect
17
00:00:53,230 --> 00:00:57,143
call in there where you do something.
18
00:00:58,210 --> 00:01:01,920
Whenever entered name is valid changes
19
00:01:01,920 --> 00:01:03,750
and specifically you do something.
20
00:01:03,750 --> 00:01:06,473
If entered name is valid is true.
21
00:01:07,490 --> 00:01:09,620
So if it's true, you wanna do something you wanna
22
00:01:09,620 --> 00:01:12,940
in this case, log name input
23
00:01:12,940 --> 00:01:15,640
is valid in a real application.
24
00:01:15,640 --> 00:01:19,480
You might want to send an HTTP request here.
25
00:01:19,480 --> 00:01:20,910
So let's say we add this.
26
00:01:20,910 --> 00:01:23,700
And for this, I import useEffect.
27
00:01:23,700 --> 00:01:26,400
If I do have that an open the developer tools
28
00:01:26,400 --> 00:01:28,970
you see that this gets locked right at the beginning
29
00:01:28,970 --> 00:01:33,050
before I did anything because of what I just explained
30
00:01:33,050 --> 00:01:37,130
we incorrectly set this state here to true
31
00:01:37,130 --> 00:01:38,890
and it isn't valid at the beginning.
32
00:01:38,890 --> 00:01:40,270
That's just not correct.
33
00:01:40,270 --> 00:01:42,430
We just did this as a work around,
34
00:01:42,430 --> 00:01:45,550
to correctly show the error feedback.
35
00:01:45,550 --> 00:01:48,140
Now, if you don't have, this useEffect case here,
36
00:01:48,140 --> 00:01:50,010
you of course might be good with that
37
00:01:50,010 --> 00:01:52,320
because then you have no real disadvantage
38
00:01:52,320 --> 00:01:53,510
of using this trick.
39
00:01:53,510 --> 00:01:57,210
But even then, I don't think this code reads nicely,
40
00:01:57,210 --> 00:01:59,520
entered name is valid, is true.
41
00:01:59,520 --> 00:02:01,670
Really? At the beginning,
42
00:02:01,670 --> 00:02:02,690
it might be nitpicking,
43
00:02:02,690 --> 00:02:04,520
but I'm not too happy with that.
44
00:02:04,520 --> 00:02:07,820
I think it makes more sense to set this to false initially
45
00:02:07,820 --> 00:02:10,600
because the input is invalid initially,
46
00:02:10,600 --> 00:02:14,030
hence, we might want to add a third state here.
47
00:02:14,030 --> 00:02:18,120
The entered name touched state maybe
48
00:02:18,120 --> 00:02:19,910
and set entered name
49
00:02:19,910 --> 00:02:21,170
touched
50
00:02:21,170 --> 00:02:23,250
where we basically control
51
00:02:23,250 --> 00:02:27,160
whether the user already did added the entered name,
52
00:02:27,160 --> 00:02:28,710
input field.
53
00:02:28,710 --> 00:02:30,730
And this all's is false initially
54
00:02:30,730 --> 00:02:33,580
because initially this input field is untouched.
55
00:02:33,580 --> 00:02:36,260
The user didn't do anything with it.
56
00:02:36,260 --> 00:02:39,100
So now, we can use entered name touched
57
00:02:39,100 --> 00:02:42,270
in combination with entered name as valid
58
00:02:42,270 --> 00:02:43,920
to show this error message
59
00:02:43,920 --> 00:02:47,130
and to add is invalid class.
60
00:02:47,130 --> 00:02:49,330
Because now we don't just care about
61
00:02:49,330 --> 00:02:52,000
whether the input is invalid or not.
62
00:02:52,000 --> 00:02:53,660
But we also care about whether
63
00:02:53,660 --> 00:02:55,930
the user had a chance of editing it
64
00:02:55,930 --> 00:02:58,650
because if the user didn't have a chance yet
65
00:02:58,650 --> 00:03:01,350
because the user didn't touch any input yet,
66
00:03:01,350 --> 00:03:03,640
then of course there is no reason to present
67
00:03:03,640 --> 00:03:04,830
this error.
68
00:03:04,830 --> 00:03:07,500
For this. I'll add a new constant here.
69
00:03:07,500 --> 00:03:10,810
Name input is invalid.
70
00:03:10,810 --> 00:03:11,860
And for this all check,
71
00:03:11,860 --> 00:03:15,010
if not entered, name is valid.
72
00:03:15,010 --> 00:03:17,303
So that's the check we also have down there,
73
00:03:18,360 --> 00:03:20,480
but I'll combine this with checking.
74
00:03:20,480 --> 00:03:24,220
If entered name touched is true
75
00:03:24,220 --> 00:03:26,400
because only if it was touched
76
00:03:26,400 --> 00:03:28,260
and it's then is invalid.
77
00:03:28,260 --> 00:03:31,430
I wanna treat it as invalid.
78
00:03:31,430 --> 00:03:34,660
And now it's this name input is invalid Boolean
79
00:03:34,660 --> 00:03:38,740
which you can use in this condition here
80
00:03:38,740 --> 00:03:40,513
and also down here.
81
00:03:41,970 --> 00:03:44,210
Though, now we have to be careful
82
00:03:44,210 --> 00:03:48,660
since this is now name, input is invalid.
83
00:03:48,660 --> 00:03:51,260
We of course need to invert,
84
00:03:51,260 --> 00:03:52,450
our logic here.
85
00:03:52,450 --> 00:03:55,140
Here, we don't check if it's not invalid,
86
00:03:55,140 --> 00:03:56,940
but if it is invalid,
87
00:03:56,940 --> 00:03:59,950
hence I removed the exclamation mark
88
00:03:59,950 --> 00:04:04,950
and here I of course want to set this invalid class.
89
00:04:05,090 --> 00:04:07,210
If name input is invalid
90
00:04:07,210 --> 00:04:10,913
and not set it otherwise like this,
91
00:04:12,110 --> 00:04:14,550
with that, if we go back and we reload,
92
00:04:14,550 --> 00:04:19,110
initially, this is not showing this error state
93
00:04:19,110 --> 00:04:23,180
but if I click submit, it's also not doing that.
94
00:04:23,180 --> 00:04:24,540
And of course it's not doing that
95
00:04:24,540 --> 00:04:26,860
because we never changed his touched state.
96
00:04:26,860 --> 00:04:28,660
We now need to do that.
97
00:04:28,660 --> 00:04:32,020
And it's now up to us how we want to change this.
98
00:04:32,020 --> 00:04:36,230
And one change definitely is the form submission.
99
00:04:36,230 --> 00:04:38,230
If the form is submitted,
100
00:04:38,230 --> 00:04:40,960
all inputs are treated as touched.
101
00:04:40,960 --> 00:04:43,300
Even if the user didn't type into them,
102
00:04:43,300 --> 00:04:45,470
the user submitted to the overall form.
103
00:04:45,470 --> 00:04:49,000
Which basically means the user confirms the overall form.
104
00:04:49,000 --> 00:04:52,650
So we could treat all inputs as touched in this case.
105
00:04:52,650 --> 00:04:54,650
So whenever the form is submitted
106
00:04:54,650 --> 00:04:56,600
before checking the validity
107
00:04:56,600 --> 00:04:57,827
just when it's submitted,
108
00:04:57,827 --> 00:05:01,750
I will set entered, named touched to true
109
00:05:03,540 --> 00:05:05,100
because all the inputs
110
00:05:05,100 --> 00:05:07,520
and in this case we just have one input
111
00:05:07,520 --> 00:05:10,520
are touched, are confirmed by the user.
112
00:05:10,520 --> 00:05:12,700
When the form is submitted.
113
00:05:12,700 --> 00:05:15,550
With this additive, we now click submit.
114
00:05:15,550 --> 00:05:18,550
We get this error state once we submit.
115
00:05:18,550 --> 00:05:22,690
And this is now a little bit of a better code.
116
00:05:22,690 --> 00:05:25,930
It's more code arguably, but it's cleaner.
117
00:05:25,930 --> 00:05:28,930
And it allows us to handle more use cases.
118
00:05:28,930 --> 00:05:32,220
And it also allows us to ensure that code like this here
119
00:05:32,220 --> 00:05:35,730
works correctly and doesn't run unexpectedly
120
00:05:35,730 --> 00:05:38,703
just because of some strange work around.
9045
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.