Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,280 --> 00:00:04,110
Let's implement that resetting
2
00:00:04,110 --> 00:00:05,750
and validation logic together.
3
00:00:05,750 --> 00:00:08,029
And let's start with resetting.
4
00:00:08,029 --> 00:00:10,130
Resetting generally is easy.
5
00:00:10,130 --> 00:00:12,130
Here in add user handler,
6
00:00:12,130 --> 00:00:14,530
I just wanna call set entered username
7
00:00:14,530 --> 00:00:16,760
and set this again to an empty string,
8
00:00:16,760 --> 00:00:19,893
and do to the same also for set entered age.
9
00:00:21,070 --> 00:00:23,670
Now, with that, I reset my states to an empty string
10
00:00:23,670 --> 00:00:26,880
once I locked these states snapshot here.
11
00:00:26,880 --> 00:00:28,560
Now, what you'll see, however,
12
00:00:28,560 --> 00:00:32,119
is that if I save this and I enter max and whoops,
13
00:00:32,119 --> 00:00:34,230
max and 31,
14
00:00:34,230 --> 00:00:35,830
we get the output here
15
00:00:35,830 --> 00:00:38,590
but the inputs are actually not cleared.
16
00:00:38,590 --> 00:00:41,200
So setting our state snapshots to empty strings
17
00:00:41,200 --> 00:00:43,560
doesn't seem to work here, right?
18
00:00:43,560 --> 00:00:45,450
Well, it actually does work.
19
00:00:45,450 --> 00:00:47,030
But one problem we have
20
00:00:47,030 --> 00:00:50,603
is that we don't reflect our current state in the input.
21
00:00:50,603 --> 00:00:54,080
That's not a problem as long as we don't wanna change it
22
00:00:54,080 --> 00:00:57,140
from anywhere else than user keystrokes.
23
00:00:57,140 --> 00:01:00,313
But here I want to change it when the form is submitted.
24
00:01:01,160 --> 00:01:05,430
So I wanna feed the current state for entered username
25
00:01:05,430 --> 00:01:08,600
and entered age back into those inputs.
26
00:01:08,600 --> 00:01:10,210
And we can easily do that.
27
00:01:10,210 --> 00:01:13,290
These input elements have value props.
28
00:01:13,290 --> 00:01:15,130
And we can set them to values,
29
00:01:15,130 --> 00:01:18,110
which will then be reflected in the inputs.
30
00:01:18,110 --> 00:01:21,040
And I can set my value of that first input
31
00:01:21,040 --> 00:01:23,280
to entered username,
32
00:01:23,280 --> 00:01:28,070
and the value of the second input here to entered age.
33
00:01:28,070 --> 00:01:29,820
And now I'll reformat that.
34
00:01:29,820 --> 00:01:31,690
And with that, we'll have inputs
35
00:01:31,690 --> 00:01:34,570
which actually reflect the current state snapshot,
36
00:01:34,570 --> 00:01:37,440
even if it's not changed for a keystroke,
37
00:01:37,440 --> 00:01:39,903
but like here, up on a form submission.
38
00:01:40,840 --> 00:01:43,340
So if we now save that and try again.
39
00:01:43,340 --> 00:01:45,940
You'll see that now it's cleared.
40
00:01:45,940 --> 00:01:47,320
So that's step one.
41
00:01:47,320 --> 00:01:49,634
Now for the validation.
42
00:01:49,634 --> 00:01:52,410
For the validation here in ad user handler,
43
00:01:52,410 --> 00:01:54,573
I wanna make sure that all this code here
44
00:01:54,573 --> 00:01:58,460
only executes if we have valid inputs.
45
00:01:58,460 --> 00:02:01,400
So if neither the name nor or the age is empty,
46
00:02:01,400 --> 00:02:03,893
and the age is also not smaller than one.
47
00:02:04,900 --> 00:02:06,580
For that we can enter if check here.
48
00:02:06,580 --> 00:02:11,580
And check if entered username trimmed is actually empty
49
00:02:14,240 --> 00:02:16,420
which we can check by checking its length.
50
00:02:16,420 --> 00:02:19,280
Trim will remove any excess white space.
51
00:02:19,280 --> 00:02:21,080
And if it then has a length of zero,
52
00:02:21,080 --> 00:02:23,580
we know there is no character in that string,
53
00:02:23,580 --> 00:02:24,633
it's an empty string.
54
00:02:25,470 --> 00:02:29,487
And if that's the case or if entered age is empty,
55
00:02:33,800 --> 00:02:38,800
so if we have to same check here, then I want to return.
56
00:02:39,450 --> 00:02:40,940
For now I'll not do anything else.
57
00:02:40,940 --> 00:02:43,250
If I return here, oops, here,
58
00:02:43,250 --> 00:02:45,070
then this code is not going to execute
59
00:02:45,070 --> 00:02:49,270
because return statements finished the function execution.
60
00:02:49,270 --> 00:02:52,400
Now I also want to check for my age input value.
61
00:02:52,400 --> 00:02:55,010
Not just if it's empty, but also if it's not empty,
62
00:02:55,010 --> 00:02:57,160
if it's maybe smaller than one.
63
00:02:57,160 --> 00:02:59,010
So I'll have a number condition here.
64
00:02:59,010 --> 00:03:00,400
A number if check.
65
00:03:00,400 --> 00:03:05,183
Where I check if entered age is smaller than one.
66
00:03:06,060 --> 00:03:08,730
And if that's the case, I always want a return.
67
00:03:08,730 --> 00:03:11,200
Now here's one important thing to keep in mind,
68
00:03:11,200 --> 00:03:14,480
entered age is actually a string, not a number.
69
00:03:14,480 --> 00:03:16,830
We initialize it to a string here.
70
00:03:16,830 --> 00:03:18,802
And anything that's entered into input
71
00:03:18,802 --> 00:03:21,760
is always retrieved as a string.
72
00:03:21,760 --> 00:03:25,510
That's just how JavaScript and the dominance on works.
73
00:03:25,510 --> 00:03:27,540
So we have a string here, entered ages,
74
00:03:27,540 --> 00:03:29,550
a string not a number.
75
00:03:29,550 --> 00:03:31,560
Now I'm comparing it to a number here.
76
00:03:31,560 --> 00:03:34,630
And generally that should work in JavaScript
77
00:03:34,630 --> 00:03:37,628
but to be super safe we can force a conversion
78
00:03:37,628 --> 00:03:41,870
of entered age to a number by adding a plus here.
79
00:03:41,870 --> 00:03:45,233
And with that we ensure that well, it is a number.
80
00:03:46,770 --> 00:03:48,310
With that if I now save this,
81
00:03:48,310 --> 00:03:50,400
you will see that if I click add user
82
00:03:50,400 --> 00:03:53,640
we now got no log here on the right.
83
00:03:53,640 --> 00:03:57,610
If I enter max 31, on the other hand, we do get a log.
84
00:03:57,610 --> 00:04:01,420
If I enter max and the age is empty, I get no log.
85
00:04:01,420 --> 00:04:05,670
And if I enter a negative age, let's say I also get no log.
86
00:04:05,670 --> 00:04:10,293
So our validation, our basic validation here seems to work.
87
00:04:11,530 --> 00:04:15,140
Now we'll take care about the error modal later for now.
88
00:04:15,140 --> 00:04:16,209
Let's make sure that
89
00:04:16,209 --> 00:04:19,459
for the cases where we do get valid inputs
90
00:04:19,459 --> 00:04:21,570
we actually take those inputs
91
00:04:21,570 --> 00:04:24,420
and we store the different users in a list
92
00:04:24,420 --> 00:04:27,260
which we then render below the input field.
93
00:04:27,260 --> 00:04:29,400
Now, again, you can try this on your own.
94
00:04:29,400 --> 00:04:32,713
Otherwise we'll build this together over the next lectures.
7380
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.