Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,080 --> 00:00:04,560
To add some basic validation
2
00:00:04,560 --> 00:00:06,800
we can manage more state.
3
00:00:06,800 --> 00:00:09,793
We can add enteredNameIsValid state
4
00:00:12,550 --> 00:00:17,550
and a setEnteredNameIsValid state updating function
5
00:00:17,930 --> 00:00:19,343
which we get from useState.
6
00:00:20,700 --> 00:00:24,220
And, here, we now want to start with false
7
00:00:24,220 --> 00:00:27,563
so that initially the entered name is not valid.
8
00:00:28,470 --> 00:00:30,570
And we can then set this to true
9
00:00:30,570 --> 00:00:33,280
if the entered name is a valid.
10
00:00:33,280 --> 00:00:36,580
So therefore here in the form submission handler,
11
00:00:36,580 --> 00:00:40,440
if the input is invalid, then I want to set,
12
00:00:40,440 --> 00:00:45,440
setEnteredNameIsValid to false because it is not valid here.
13
00:00:46,500 --> 00:00:48,720
If we make it past this if check,
14
00:00:48,720 --> 00:00:52,200
we can set enteredNameIsValid to true
15
00:00:52,200 --> 00:00:54,390
because if we make it past this if check,
16
00:00:54,390 --> 00:00:55,993
the value is valid.
17
00:00:57,210 --> 00:00:59,540
And now we could use enteredNameIsValid
18
00:00:59,540 --> 00:01:01,500
to show an error message.
19
00:01:01,500 --> 00:01:03,700
Here below this input,
20
00:01:03,700 --> 00:01:05,600
inside this form control div,
21
00:01:05,600 --> 00:01:09,170
we could add a paragraph where we, for example,
22
00:01:09,170 --> 00:01:12,687
say, "Name must not be empty."
23
00:01:13,640 --> 00:01:15,990
And I only want to show this paragraph
24
00:01:15,990 --> 00:01:18,940
if enteredNameIsValid is false.
25
00:01:18,940 --> 00:01:20,253
So if it's not valid.
26
00:01:21,250 --> 00:01:22,510
Now we of course learned
27
00:01:22,510 --> 00:01:25,400
how we can show content conditionally in React.
28
00:01:25,400 --> 00:01:27,930
And hence, here we can apply what we learned.
29
00:01:27,930 --> 00:01:29,710
We can check if not,
30
00:01:29,710 --> 00:01:32,860
hence the exclamation mark, enteredNameIsValid.
31
00:01:33,730 --> 00:01:36,310
And if that's the case, we output this paragraph.
32
00:01:36,310 --> 00:01:38,830
Otherwise we don't do anything.
33
00:01:38,830 --> 00:01:41,000
And we can give this paragraph a class name
34
00:01:41,000 --> 00:01:44,140
of error-text because that's one
35
00:01:44,140 --> 00:01:48,610
of the predefined CSS classes I added here in index CSS
36
00:01:48,610 --> 00:01:50,003
for some basic styling.
37
00:01:51,290 --> 00:01:53,600
With that, I get this error
38
00:01:53,600 --> 00:01:57,223
but now I also get this error before I even start typing.
39
00:01:58,260 --> 00:02:00,390
So maybe we instead want to start
40
00:02:00,390 --> 00:02:03,700
with setting this to true initially.
41
00:02:03,700 --> 00:02:06,483
So that enteredNameIsValid is true initially.
42
00:02:07,510 --> 00:02:08,949
With that, if I save here
43
00:02:08,949 --> 00:02:11,300
we don't see the error message initially,
44
00:02:11,300 --> 00:02:14,530
but if I click submit, it now shows up.
45
00:02:14,530 --> 00:02:15,800
So this would be one way
46
00:02:15,800 --> 00:02:20,120
of adding basic validation to this form and of making sure
47
00:02:20,120 --> 00:02:24,270
that we give the users some feedback if things go wrong.
48
00:02:24,270 --> 00:02:27,230
Now I actually prepared more validation feedback
49
00:02:27,230 --> 00:02:28,150
which we can add
50
00:02:28,150 --> 00:02:30,910
and that affects this CSS class
51
00:02:30,910 --> 00:02:35,090
which is added on that div, that form control clause.
52
00:02:35,090 --> 00:02:37,030
I'm not using CSS modules here
53
00:02:37,030 --> 00:02:41,490
but old-school CSS classes which are set up globally
54
00:02:41,490 --> 00:02:43,660
and then simply used here.
55
00:02:43,660 --> 00:02:48,660
I did prepare a special invalid CSS class
56
00:02:49,030 --> 00:02:51,470
which affects the input look, and therefore
57
00:02:51,470 --> 00:02:56,470
I want to swap form control for form control and invalid,
58
00:02:56,660 --> 00:02:58,900
if this input is invalid.
59
00:02:58,900 --> 00:03:01,250
So here I could add a const nameInputClasses
60
00:03:05,360 --> 00:03:09,617
and that depends on whether the enteredNameIsValid.
61
00:03:10,760 --> 00:03:14,740
If that's true, then I want to add just form control
62
00:03:14,740 --> 00:03:16,130
as a class.
63
00:03:16,130 --> 00:03:18,360
Otherwise I want to add form-control
64
00:03:18,360 --> 00:03:20,590
and invalid as classes.
65
00:03:20,590 --> 00:03:23,820
And now a class name here is dynamic
66
00:03:23,820 --> 00:03:26,160
and points at nameInputClasses.
67
00:03:27,319 --> 00:03:30,520
NameInputClasses.
68
00:03:30,520 --> 00:03:33,173
So these classes, which we're deriving here.
69
00:03:34,230 --> 00:03:36,670
And with that, if I save this,
70
00:03:36,670 --> 00:03:38,500
if I reload, we got this look.
71
00:03:38,500 --> 00:03:41,100
If I submit this empty form, I got this look
72
00:03:41,100 --> 00:03:42,583
which looks a bit better.
73
00:03:43,450 --> 00:03:46,900
Now that is some perfectly fine validation
74
00:03:46,900 --> 00:03:50,080
which you could add, but it has some downsides
75
00:03:50,080 --> 00:03:52,323
at which I now want to take a closer look.
5683
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.