1
00:00:00,750 --> 00:00:01,583
Instructor: In the last section,

2
00:00:01,583 --> 00:00:03,300
we add in a little helper to make sure

3
00:00:03,300 --> 00:00:06,630
that our password confirmation is actually getting validated

4
00:00:06,630 --> 00:00:09,150
against the password that the user entered.

5
00:00:09,150 --> 00:00:11,850
We're still a little bit short on validation messages though

6
00:00:11,850 --> 00:00:13,770
because our users can actually get away

7
00:00:13,770 --> 00:00:16,440
without entering an email, password,

8
00:00:16,440 --> 00:00:18,890
or password confirmation at all.

9
00:00:18,890 --> 00:00:21,270
So we need to make sure that when a user clicks Submit,

10
00:00:21,270 --> 00:00:22,928
or when they start entering text in here,

11
00:00:22,928 --> 00:00:25,260
that they actually are entering some text

12
00:00:25,260 --> 00:00:27,813
and aren't leaving these inputs blank.

13
00:00:28,710 --> 00:00:31,740
So to handle that, we'll add another validation rule

14
00:00:31,740 --> 00:00:33,630
to our validate helper down here.

15
00:00:33,630 --> 00:00:36,129
And this one's gonna be a little bit more straightforward.

16
00:00:36,129 --> 00:00:39,390
(key clacking)

17
00:00:39,390 --> 00:00:41,310
So all we want to check here is to make sure

18
00:00:41,310 --> 00:00:43,830
that the user has actually entered some text

19
00:00:43,830 --> 00:00:46,983
for each of the form props that we have available in here.

20
00:00:48,240 --> 00:00:49,920
So we can add in some simple logic

21
00:00:49,920 --> 00:00:50,940
that looks a little bit like this.

22
00:00:50,940 --> 00:00:54,393
We can say if formProps.email.

23
00:00:55,968 --> 00:00:58,590
And then we're gonna say, if this does not exist,

24
00:00:58,590 --> 00:01:03,590
then say errors.email, Please enter an email,

25
00:01:05,730 --> 00:01:08,703
and then we can repeat the process twice again.

26
00:01:10,320 --> 00:01:15,320
Password, errors.password, please enter a password.

27
00:01:17,820 --> 00:01:21,370
And finally, if formProps.passwordConfirm,

28
00:01:28,140 --> 00:01:30,543
errors.passwordConfirm,

29
00:01:33,300 --> 00:01:36,783
Please enter a password confirmation.

30
00:01:38,370 --> 00:01:40,744
So for each of our different fields that we have in here,

31
00:01:40,744 --> 00:01:44,790
if they have not, so note the exclamation here,

32
00:01:44,790 --> 00:01:46,830
if they have not provided this property, you know,

33
00:01:46,830 --> 00:01:47,983
if they haven't typed anything in,

34
00:01:47,983 --> 00:01:50,040
then give them the error message

35
00:01:50,040 --> 00:01:52,640
that says you need to actually enter some text here.

36
00:01:54,450 --> 00:01:55,650
Now this is definitely,

37
00:01:55,650 --> 00:01:59,430
we've got some pretty repetitive code here,

38
00:01:59,430 --> 00:02:01,860
and so this can definitely be condensed up a little bit,

39
00:02:01,860 --> 00:02:05,310
or use a little bit of a recur, or excuse me,

40
00:02:05,310 --> 00:02:07,890
iteration to check each of these different properties,

41
00:02:07,890 --> 00:02:09,210
and make sure they actually exist.

42
00:02:09,210 --> 00:02:12,570
But I'm gonna leave that kinda as an exercise to you.

43
00:02:12,570 --> 00:02:14,910
This would be a great use of the, for each helper,

44
00:02:14,910 --> 00:02:17,670
over the object, or you can map over it, or reduce,

45
00:02:17,670 --> 00:02:20,760
or whatever you'd like to do, just to check each field here,

46
00:02:20,760 --> 00:02:23,340
and if the field or property name does not exist,

47
00:02:23,340 --> 00:02:24,990
just assign an error message to it.

48
00:02:24,990 --> 00:02:28,740
So definitely something that can be done to kind

49
00:02:28,740 --> 00:02:31,293
of dry up this validation logic here a little bit.

50
00:02:32,850 --> 00:02:34,680
Now we're validating each of these fields,

51
00:02:34,680 --> 00:02:37,590
but we still have to display an error message.

52
00:02:37,590 --> 00:02:40,080
So for each of our different field sets,

53
00:02:40,080 --> 00:02:43,710
for our email, password, and password confirm,

54
00:02:43,710 --> 00:02:46,530
we're gonna make sure that we duplicate the same logic here

55
00:02:46,530 --> 00:02:48,900
to say if the field has been touched,

56
00:02:48,900 --> 00:02:51,963
and it has an error, then display that error to the user.

57
00:02:52,980 --> 00:02:56,040
So I'm gonna duplicate it up to the email field set.

58
00:02:56,040 --> 00:03:00,730
I'll say email.touched && email.error

59
00:03:01,568 --> 00:03:05,913
&& div className error,

60
00:03:07,050 --> 00:03:11,333
and this div should contain the text, email.error.

61
00:03:13,680 --> 00:03:15,540
And then one more time, we'll duplicate that

62
00:03:15,540 --> 00:03:17,793
down to the password confirmation as well.

63
00:03:19,057 --> 00:03:22,557
passwordConfirm and passwordConfirm.error,

64
00:03:27,480 --> 00:03:31,503
place a div, with a class name of error,

65
00:03:33,210 --> 00:03:38,210
and it should contain the text passwordConfirm.error.

66
00:03:39,900 --> 00:03:41,430
So again, this is a definitely,

67
00:03:41,430 --> 00:03:42,990
you're probably starting to see a pattern here.

68
00:03:42,990 --> 00:03:45,390
This is really another location where we've kind

69
00:03:45,390 --> 00:03:47,430
of got three of these different field sets,

70
00:03:47,430 --> 00:03:49,440
and they're completely duplicated,

71
00:03:49,440 --> 00:03:51,480
nearly completely duplicated three times over.

72
00:03:51,480 --> 00:03:52,740
The only difference between them is

73
00:03:52,740 --> 00:03:55,650
that the two password fields have a type of password here.

74
00:03:55,650 --> 00:03:57,480
And so this is definitely another location,

75
00:03:57,480 --> 00:03:58,560
where we could probably get away

76
00:03:58,560 --> 00:04:01,950
with approaching this in a much more clever fashion.

77
00:04:01,950 --> 00:04:04,050
So perhaps create an object

78
00:04:04,050 --> 00:04:05,790
to describe each of these fields,

79
00:04:05,790 --> 00:04:07,260
and then do a little bit of iteration

80
00:04:07,260 --> 00:04:10,110
over the object to produce each of these field sets.

81
00:04:10,110 --> 00:04:12,833
That's definitely something that we could work towards.

82
00:04:14,250 --> 00:04:16,380
Alright, we've got all of our validation logic in here.

83
00:04:16,380 --> 00:04:18,240
Let's now test it out inside the browser.

84
00:04:18,240 --> 00:04:19,640
So I'm gonna flip back over,

85
00:04:21,390 --> 00:04:22,590
and you'll notice that right away,

86
00:04:22,590 --> 00:04:25,530
we've got Please enter a password confirmation.

87
00:04:25,530 --> 00:04:26,790
This error message showing up here,

88
00:04:26,790 --> 00:04:30,660
which is making me think that we might have not quite

89
00:04:30,660 --> 00:04:33,030
gotten our validation logic just right.

90
00:04:33,030 --> 00:04:36,780
So we have passwordConfirm, and we did not, actually,

91
00:04:36,780 --> 00:04:37,620
I made a typo here.

92
00:04:37,620 --> 00:04:38,880
I didn't actually check to make sure

93
00:04:38,880 --> 00:04:40,740
that the passwordConfirmed was touched.

94
00:04:40,740 --> 00:04:44,553
So I'm gonna add on passwordConfirm.touched.

95
00:04:46,680 --> 00:04:49,050
Now when I refresh, okay, the error message goes away.

96
00:04:49,050 --> 00:04:50,760
It definitely shouldn't be visible right away.

97
00:04:50,760 --> 00:04:52,530
Only when a user actually clicks

98
00:04:52,530 --> 00:04:54,390
into the field, and then clicks out,

99
00:04:54,390 --> 00:04:57,090
do I wanna start showing that error message.

100
00:04:57,090 --> 00:04:59,700
So I'm gonna refresh, make it go away.

101
00:04:59,700 --> 00:05:00,720
It looks like each

102
00:05:00,720 --> 00:05:04,083
of our fields are working as far as the touch goes.

103
00:05:06,030 --> 00:05:10,980
And if I start to enter in, say an email,

104
00:05:10,980 --> 00:05:14,100
and then a password, passwords must match, there we go.

105
00:05:14,100 --> 00:05:17,190
But then if I go back and delete the email,

106
00:05:17,190 --> 00:05:19,410
all of a sudden it tells me again, Hey,

107
00:05:19,410 --> 00:05:21,000
Please enter email address here.

108
00:05:21,000 --> 00:05:22,950
So exactly the behavior that we'd wanna see

109
00:05:22,950 --> 00:05:25,020
out of a form like this.

110
00:05:25,020 --> 00:05:26,040
So this is looking pretty good.

111
00:05:26,040 --> 00:05:28,527
Definitely has the validation logic that we're looking for.

112
00:05:28,527 --> 00:05:31,500
Now, the next step inside of our signup form is to make sure

113
00:05:31,500 --> 00:05:33,990
that when a user tries to submit the form,

114
00:05:33,990 --> 00:05:35,610
we take the information from the form,

115
00:05:35,610 --> 00:05:37,260
and actually submit it to the backend.

116
00:05:37,260 --> 00:05:40,010
So let's start working on that inside the next section.