1
00:00:00,480 --> 00:00:05,880
In the last section we started validating the list of emails that a user provides to us in between the

2
00:00:05,880 --> 00:00:06,900
last few in this one.

3
00:00:06,900 --> 00:00:11,760
I realized that trying to explain with words what's going on with all these steps with like map and

4
00:00:11,760 --> 00:00:17,880
split is probably not super clear like it's a lot easier to communicate this with pictures or diagrams.

5
00:00:17,880 --> 00:00:19,560
So I figured hey let's just make a diagram.

6
00:00:19,560 --> 00:00:23,330
So I apologize if the last section and talking about this stuff is not clear.

7
00:00:23,400 --> 00:00:27,300
I put together a diagram hopefully I'll be a little bit more obvious what's going on with this logic

8
00:00:27,300 --> 00:00:28,060
now.

9
00:00:28,540 --> 00:00:28,880
OK.

10
00:00:28,900 --> 00:00:30,280
So let's walk through this flow.

11
00:00:30,510 --> 00:00:34,410
We start off with our string at the very top and then we finally walk down to the result that we're

12
00:00:34,410 --> 00:00:36,610
trying to get to at the very bottom.

13
00:00:36,660 --> 00:00:38,040
So here's where we're going to do.

14
00:00:38,160 --> 00:00:39,800
We've got our string at the top.

15
00:00:39,870 --> 00:00:47,800
It has a good e-mail a comma a space an invalid email a comma a space and then another good one.

16
00:00:47,820 --> 00:00:53,280
So at the end of the day we want to somehow extract this invalid e-mail right here and send it back

17
00:00:53,280 --> 00:00:54,580
to our validate function.

18
00:00:54,690 --> 00:00:59,270
So we can tell our user exactly which emails are invalid.

19
00:00:59,310 --> 00:01:05,020
So we've already gone ahead and ran the split operation the split operation takes a string.

20
00:01:05,160 --> 00:01:11,480
It's removes all the commas and then it splits all the elements remaining into separate elements and

21
00:01:11,490 --> 00:01:12,140
array.

22
00:01:12,450 --> 00:01:18,290
So after running split we can kind of imagine that we have an array that looks like this right here.

23
00:01:18,300 --> 00:01:21,860
Now remember split does not take care of any spaces.

24
00:01:22,140 --> 00:01:28,170
Now we certainly could change the split statement and say like oh yeah do split on comma and space but

25
00:01:28,170 --> 00:01:33,930
again we don't really know if the user's going to be providing one space between each email or many

26
00:01:33,930 --> 00:01:35,140
spaces or what.

27
00:01:35,190 --> 00:01:40,680
So it's really just safer to say we're going to require you to have commas between everything but if

28
00:01:40,680 --> 00:01:45,720
you provide some variable number of spaces in there that's totally fine because the next step is going

29
00:01:45,720 --> 00:01:49,330
to be to trim the email address.

30
00:01:49,440 --> 00:01:56,050
So this step right here I put on the underscores to indicate any remaining spaces that would be here.

31
00:01:56,280 --> 00:02:02,490
So when we split invalid an email will have a space in front of it and the same thing with good too

32
00:02:02,520 --> 00:02:03,280
as well.

33
00:02:03,570 --> 00:02:08,970
So we run through the trim function and then everything comes out just nicely trimmed no spaces on either

34
00:02:08,970 --> 00:02:10,950
side.

35
00:02:10,950 --> 00:02:16,980
Now the last step which we have not yet done to extract the invalid emails inside this list right here.

36
00:02:17,040 --> 00:02:22,550
We're going to run the list or the array through a filter function inside the filter function.

37
00:02:22,560 --> 00:02:27,240
We're going to look at every individual e-mail and we're going to check to see whether or not it is

38
00:02:27,240 --> 00:02:27,860
valid.

39
00:02:28,200 --> 00:02:32,950
If it's not valid then we're going to keep that email inside the list.

40
00:02:33,030 --> 00:02:38,100
But if it is valid then we're going to dump it out of the list because remember our goal here is not

41
00:02:38,100 --> 00:02:40,230
to get a list of the good e-mails.

42
00:02:40,230 --> 00:02:42,230
Our goal is to validate the email list.

43
00:02:42,240 --> 00:02:44,560
We want to figure out the ones that are bad.

44
00:02:44,700 --> 00:02:50,560
So we're going to keep around any invalid e-mails or any poorly formatted e-mails that we have.

45
00:02:51,250 --> 00:02:51,560
OK.

46
00:02:51,570 --> 00:02:52,770
So let's give this a shot.

47
00:02:52,800 --> 00:02:54,460
We've taken care of split and trim.

48
00:02:54,480 --> 00:02:56,500
Now we need to do the filter.

49
00:02:57,390 --> 00:03:05,670
So here's our e-mails Auray I'm going to put my new lines back in here just to kind of make this thing

50
00:03:05,670 --> 00:03:10,080
a little bit more legible and do take note that remove the semi colon on the end here because we're

51
00:03:10,080 --> 00:03:12,440
going to add in one more step as well.

52
00:03:12,930 --> 00:03:17,850
So we're going to add on our filter function the filter function works somewhat like the way that the

53
00:03:17,850 --> 00:03:20,790
map function does inside a filter.

54
00:03:20,790 --> 00:03:28,350
We're going to be past each individual email inside of the email function that we're passing right here.

55
00:03:28,350 --> 00:03:31,070
We're going to check to see whether or not this e-mail is valid.

56
00:03:31,170 --> 00:03:36,440
Now if it is valid we are going to return false if it is valid.

57
00:03:36,460 --> 00:03:44,040
Susie if it is valid return false if it's invalid return true if you return true inside of a filter

58
00:03:44,040 --> 00:03:47,910
function that value will be kept inside the array.

59
00:03:47,910 --> 00:03:49,510
Otherwise the value will be dumped.

60
00:03:49,510 --> 00:03:52,740
And so again we want to keep around the invalid e-mails.

61
00:03:52,770 --> 00:03:57,840
So we want to make sure that we capture the case in which the saying is not valid.

62
00:03:58,410 --> 00:03:58,830
OK.

63
00:03:58,980 --> 00:04:03,840
So the question very quickly becomes how are we going to check to see if the e-mail is valid or not.

64
00:04:03,840 --> 00:04:06,590
Well that one's pretty straightforward inside my browser.

65
00:04:06,590 --> 00:04:13,440
I can open up a new tab and I'm going to navigate directly to e-mail reg ex dot com.

66
00:04:13,920 --> 00:04:20,550
So e-mail dot com is a fantastic little Web site that provides regular expressions to validate e-mail

67
00:04:20,550 --> 00:04:21,750
addresses.

68
00:04:21,820 --> 00:04:27,930
And you know that at the end of the day there's really no perfect e-mail reg ex but the reg X's that

69
00:04:27,930 --> 00:04:31,510
are provided here really take care of the job as they say.

70
00:04:31,530 --> 00:04:33,730
Ninety nine point nine nine percent of the time.

71
00:04:35,530 --> 00:04:35,990
OK.

72
00:04:36,000 --> 00:04:41,790
So we'll scroll down a little bit and you'll notice that they've got different Reg X's for a bunch of

73
00:04:41,790 --> 00:04:48,780
different languages so we can make use of either the javascript Reg X right here or we can use the email

74
00:04:48,810 --> 00:04:51,150

75
5:01 that's listed right here.

76
00:04:51,150 --> 00:04:57,360
So just to be clear this is a javascript specific Reg X that works with javascript but they are telling

77
00:04:57,360 --> 00:05:02,300
you here if you want to use this other alternate one that's a little bit less restrictive.

78
00:05:02,340 --> 00:05:04,090
That's really fine you can do that as well.

79
00:05:04,320 --> 00:05:06,720
For us we want to go with a more strict case.

80
00:05:06,750 --> 00:05:08,960
So we're going to pick up this reg X right here.

81
00:05:09,260 --> 00:05:16,170
So I'm going to copy it the entire thing will change back over to our validate e-mails function and

82
00:05:16,170 --> 00:05:21,840
then I'm going to assign this to a variable at the top of the file and say Konst party which is short

83
00:05:21,840 --> 00:05:23,630
for a regular expression.

84
00:05:23,810 --> 00:05:27,080
I'm going to paste the entire thing and put a semicolon at the end.

85
00:05:27,660 --> 00:05:31,960
So it's a pretty long regular expression you know it's span's on quite a bit.

86
00:05:31,980 --> 00:05:35,920
But again it's going to work out pretty well for what we are attempting to do.

87
00:05:36,450 --> 00:05:43,110
So now that we have the regular expression for every e-mail that exists inside of our array of e-mails

88
00:05:43,230 --> 00:05:48,880
we're going to call our E dot test with the e-mail address.

89
00:05:49,020 --> 00:05:50,940
So this takes e-mail.

90
00:05:51,060 --> 00:05:55,410
It then validates it against our regular expression.

91
00:05:55,410 --> 00:05:57,800
If the email matches the regular expression.

92
00:05:57,810 --> 00:06:02,520
So if the email is valid then this Stephen right here will return true.

93
00:06:02,530 --> 00:06:04,500
Otherwise the email is invalid.

94
00:06:04,500 --> 00:06:06,660
It's going to return false.

95
00:06:06,660 --> 00:06:11,520
Now that's kind of a problem for us because remember we want to keep around the e-mails that are invalid.

96
00:06:11,610 --> 00:06:17,640
So specifically we want to keep around the cases where something fails this test or this expression

97
00:06:17,640 --> 00:06:20,010
right here returns false.

98
00:06:20,190 --> 00:06:24,780
So we can either write out equals equals equals false if we want to be just really clear on what's going

99
00:06:24,780 --> 00:06:25,720
on here.

100
00:06:25,740 --> 00:06:30,680
Alternatively we can always put an exclamation mark to capture this as well.

101
00:06:30,690 --> 00:06:35,820
Now in this case I'm kind of happy to just leave that equals equals equals false because it's just really

102
00:06:35,820 --> 00:06:37,190
clear what's going on here.

103
00:06:37,200 --> 00:06:43,110
I want to capture the e-mails that will fail this test so I'm going to leave it as this right here.

104
00:06:44,010 --> 00:06:44,530
OK.

105
00:06:44,910 --> 00:06:49,780
So now that we have a list of our e-mails that are not valid and now that I'm looking at this variable

106
00:06:49,840 --> 00:06:53,940
name I'm kind of thinking maybe we should change it to something that's a little bit more clear let's

107
00:06:53,940 --> 00:06:56,550
say Invalid e-mails.

108
00:06:56,580 --> 00:06:59,020
So now it's really clear to anyone else who looks at this file.

109
00:06:59,130 --> 00:07:01,730
Yeah this is a list of the bad stuff.

110
00:07:01,800 --> 00:07:04,490
So now at the bottom we'll look at that.

111
00:07:04,530 --> 00:07:05,620
Invalid e-mails.

112
00:07:05,640 --> 00:07:06,150
Right.

113
00:07:06,630 --> 00:07:16,470
So if this thing has any e-mails inside of it we're going to return the these e-mails are invalid.

114
00:07:16,650 --> 00:07:21,590
It's invalid and we're going to use an six template string.

115
00:07:21,930 --> 00:07:28,530
So I'm going to put down dollar sign curly race invalid e-mails and then along with the template string

116
00:07:28,620 --> 00:07:29,970
I used back ticks right here.

117
00:07:29,970 --> 00:07:32,030
So these are not single quotes.

118
00:07:32,100 --> 00:07:32,930
They're back ticks.

119
00:07:32,940 --> 00:07:36,740
Make sure you get back to X because that's how we'd write template strings.

120
00:07:36,750 --> 00:07:36,980
OK.

121
00:07:36,990 --> 00:07:40,470
So if we have any invalid e-mails return this error message.

122
00:07:40,470 --> 00:07:45,450
Otherwise we can just return nil or we could just return without anything at all.

123
00:07:45,450 --> 00:07:47,230
Either one is totally fine.

124
00:07:48,000 --> 00:07:48,350
OK.

125
00:07:48,360 --> 00:07:51,420
So I think we're ready to test this out inside of our component.

126
00:07:51,420 --> 00:07:55,400
I'm going to change back over to our survey form.

127
00:07:55,860 --> 00:08:04,290
We're going to go up to the top of the file and import the validate e-mails function from one directory

128
00:08:04,650 --> 00:08:14,010
up in another up another directory into tills and then validate e-mails and you know I call this thing

129
00:08:14,010 --> 00:08:16,340
valid emails it really should be validate.

130
00:08:16,350 --> 00:08:18,000
So let's call it validate e-mails.

131
00:08:18,000 --> 00:08:19,960
That's better.

132
00:08:20,120 --> 00:08:23,660
So now down inside of our validation function underneath the component

133
00:08:26,530 --> 00:08:33,220
we don't really have to do any test or any specific special test in here we can just say you know errors

134
00:08:33,850 --> 00:08:38,600
dot recipients do we call it recipients or do we call it emails.

135
00:08:39,210 --> 00:08:40,860
We call it e-mails.

136
00:08:41,620 --> 00:08:47,290
So errors dot e-mails equals values Daut e-mails.

137
00:08:47,440 --> 00:08:51,550
And we're going to take this big old string right here containing all the different e-mails and pass

138
00:08:51,550 --> 00:08:55,020
it into the validate e-mails function like so.

139
00:08:55,420 --> 00:09:01,420
So now when validate e-mails runs if there's anything invalid inside that array we will return that

140
00:09:01,420 --> 00:09:03,940
string that says the following e-mails are invalid.

141
00:09:04,270 --> 00:09:08,470
Otherwise we will return undefined from this.

142
00:09:08,470 --> 00:09:12,960
And so remember the heirs object only cares about properties that have a value assigned to it.

143
00:09:12,970 --> 00:09:16,670
It doesn't care about properties that have undefined assigned to it.

144
00:09:16,690 --> 00:09:18,470
Now there's one last thing I want to point out here.

145
00:09:18,580 --> 00:09:24,280
The way in which restructuring our validation logic right now we're first checking to see if a value

146
00:09:24,280 --> 00:09:30,400
like an e-mail is provided at all and then we check to see if there's any invalid or valid emails.

147
00:09:30,400 --> 00:09:36,930
So this logic right here doesn't quite work out because really we want to first see if there's any invalid

148
00:09:36,940 --> 00:09:37,830
e-mails.

149
00:09:38,050 --> 00:09:41,280
And then if there are not or if this thing just fails catastrophic.

150
00:09:41,290 --> 00:09:42,320
That's totally fine.

151
00:09:42,460 --> 00:09:44,390
But what I really want to make sure happens.

152
00:09:44,410 --> 00:09:49,930
I really want to make sure that a user will see the error message of you must provide a value and then

153
00:09:49,990 --> 00:09:54,890
after they provide e-mail then we'll take care of the e-mail validation.

154
00:09:55,240 --> 00:09:58,830
And you know what let's just run this thing as is for you what I just said.

155
00:09:58,840 --> 00:09:59,350
Let's run it.

156
00:09:59,350 --> 00:10:01,790
I want you to see stuff behaving badly.

157
00:10:01,930 --> 00:10:05,160
And then what I'm talking about here will probably make a little bit more sense.

158
00:10:05,220 --> 00:10:10,220
So will change back over to our out when we do so it looks like we get a little bit of air.

159
00:10:10,260 --> 00:10:12,010
Let's check this thing out.

160
00:10:12,130 --> 00:10:13,960
So it cannot read split of undefined.

161
00:10:13,960 --> 00:10:14,250
OK.

162
00:10:14,260 --> 00:10:16,840
So this was a little mistake on my part.

163
00:10:16,840 --> 00:10:22,780
Remember that when our application first boots up like when this validation or assuming the form is

164
00:10:22,780 --> 00:10:27,120
first built by redux form validation automatically runs one time.

165
00:10:27,130 --> 00:10:32,110
And so right now we're attempting to validate e-mails on an empty string or something undefined because

166
00:10:32,110 --> 00:10:36,480
we have not yet provided any value in here whatsoever.

167
00:10:36,490 --> 00:10:42,670
So it's just to clear that we're going to make sure that if no e-mails have been entered then we will

168
00:10:42,670 --> 00:10:47,830
instead provide an empty string to validate e-mails function and they'll get that little crash to go

169
00:10:47,830 --> 00:10:49,450
away.

170
00:10:49,450 --> 00:10:50,770
So let's try this again.

171
00:10:56,160 --> 00:10:59,820
OK I'm going to zoom out again so I can see the whole form.

172
00:10:59,830 --> 00:11:01,740
And if I click NEXT right now.

173
00:11:01,850 --> 00:11:03,080
So this is what I was talking about.

174
00:11:03,180 --> 00:11:08,060
If we put that e-mail validation last inside of our form we're going to get this message.

175
00:11:08,070 --> 00:11:12,440
These emails are invalid because validate e-mails runs.

176
00:11:12,480 --> 00:11:17,640
It sees that something is probably wrong with the list of emails and returns the message of Hey you've

177
00:11:17,640 --> 00:11:18,890
got to provide the e-mails.

178
00:11:19,020 --> 00:11:23,440
And so it overrides the previous value of you must provide a value.

179
00:11:23,640 --> 00:11:30,080
We can fix this entirely by just moving this validation statement above this one like so.

180
00:11:30,510 --> 00:11:32,900
So first try to validate that thing.

181
00:11:33,080 --> 00:11:35,320
Then what do you know who cares what's in there.

182
00:11:35,430 --> 00:11:40,230
But if the user did not provide an e-mail at all just override whatever we're turned right here with

183
00:11:40,290 --> 00:11:43,310
you must provide a value so let's not give this a shot.

184
00:11:46,230 --> 00:11:47,070
So will refresh

185
00:11:50,150 --> 00:11:51,200
when I click next.

186
00:11:51,260 --> 00:11:52,720
We get you must provide a value.

187
00:11:52,790 --> 00:11:53,110
OK.

188
00:11:53,120 --> 00:11:55,040
So that's definitely work in the way we expect.

189
00:11:55,100 --> 00:11:56,540
If I just provide a value.

190
00:11:56,540 --> 00:11:58,790
However now it's still invalid.

191
00:11:58,790 --> 00:12:00,490
So we get these emails are invalid.

192
00:12:00,500 --> 00:12:02,020
Here's what's invalid.

193
00:12:02,120 --> 00:12:04,530
I can do and at biolab law dot com.

194
00:12:04,640 --> 00:12:05,000
OK.

195
00:12:05,030 --> 00:12:06,070
Now it's valid.

196
00:12:06,290 --> 00:12:12,110
If I put on the comma it gets a little bit unhappy because it thinks that there is an extra empty email

197
00:12:12,110 --> 00:12:12,830
right there.

198
00:12:12,830 --> 00:12:18,890
So maybe that be a little thing that we should fix up but if we add on another e-mail at a lot of calm

199
00:12:19,250 --> 00:12:21,240
cool looks like everything's good to go.

200
00:12:21,680 --> 00:12:26,120
So besides the fact that it doesn't really like any trailing commas I think that the recipient list

201
00:12:26,120 --> 00:12:28,170
is behaving really the way we expect right now.

202
00:12:28,640 --> 00:12:35,060
For the purposes of this course I'm going to say that you know you have to provide no ending comma in

203
00:12:35,060 --> 00:12:39,770
here and I'm going to tell you that it would be a good little project for you to take a quick pause

204
00:12:39,800 --> 00:12:45,050
before you watch the next video and maybe fix up or validate function or the validate e-mails function

205
00:12:45,350 --> 00:12:49,240
to function correctly whenever there is a trailing comma at the end.

206
00:12:49,310 --> 00:12:51,770
That'll be a good little project to tackle.

207
00:12:52,340 --> 00:12:52,780
OK.

208
00:12:53,030 --> 00:12:56,430
So I think that we've got all of our validation hooked up correctly at this point.

209
00:12:56,510 --> 00:13:01,250
We're now ready to allow the user to progress on to some type of like revues screen.

210
00:13:01,250 --> 00:13:02,660
So let's take a quick break.

211
00:13:02,660 --> 00:13:05,930
We're going to come back in the next section and start tackling that review screen.