1 00:00:00,690 --> 00:00:03,470 We've got the basics of validation put together for our form. 2 00:00:03,480 --> 00:00:06,960 But we still have to validate the emails that a user provides. 3 00:00:06,960 --> 00:00:11,370 Now we haven't really spoken a whole bunch about this email list right here and it probably makes sense 4 00:00:11,370 --> 00:00:16,380 to lay out some ground rules so that we're on the same page on exactly how this e-mail list is going 5 00:00:16,380 --> 00:00:17,400 to work. 6 00:00:17,400 --> 00:00:23,780 Remember the recipient list right here is a list of e-mails that our user wants to send a survey to. 7 00:00:24,030 --> 00:00:30,110 So presumably this might be a list of very public or like customer e-mails or whatever it might be. 8 00:00:30,360 --> 00:00:36,600 And it's up to us to do some at least small amount of validation on each of them and say hey maybe this 9 00:00:36,600 --> 00:00:37,860 e-mail doesn't quite look so good. 10 00:00:37,860 --> 00:00:41,010 You might want to fix this one up and then submit your list again. 11 00:00:41,010 --> 00:00:46,260 So really we're going to be doing our the validation right here as kind of a service to our users so 12 00:00:46,260 --> 00:00:50,520 that when we go to send each of these e-mails it doesn't just start mysteriously failing and our user 13 00:00:50,520 --> 00:00:53,080 sits there thinking that our service is awful. 14 00:00:53,100 --> 00:00:53,630 Right. 15 00:00:53,670 --> 00:00:56,550 We want to tell the user that their e-mail is a problem. 16 00:00:56,550 --> 00:01:00,560 As soon as possible and give them the opportunity to fix it. 17 00:01:00,570 --> 00:01:06,340 So first off we need to figure out exactly how we're going to receive the list of e-mails and we'll 18 00:01:06,390 --> 00:01:08,670 think about how we're going to validate it. 19 00:01:08,760 --> 00:01:09,370 Now I see. 20 00:01:09,410 --> 00:01:10,170 Receive. 21 00:01:10,170 --> 00:01:16,470 I mean are we going to let users just like you know entery involved the Watcom and then a space and 22 00:01:16,470 --> 00:01:23,880 then dot com and then another space or should we say that there should be like a comma or a semi-colon 23 00:01:24,240 --> 00:01:25,890 poor slash or what. 24 00:01:25,890 --> 00:01:29,990 There's really got to be something in there to differentiate each individual email. 25 00:01:30,000 --> 00:01:31,950 So here's what I suggest. 26 00:01:32,040 --> 00:01:37,140 I think that we should say that every single e-mail that gets entered into our application should take 27 00:01:37,200 --> 00:01:40,680 a comma and a space between each email. 28 00:01:40,680 --> 00:01:45,810 Now we won't necessarily say that each one has to have a space but will say that there has to be a comma 29 00:01:46,060 --> 00:01:47,750 in between each email. 30 00:01:47,820 --> 00:01:55,890 So if a user entered in this string right here like e-mail comma space e-mail comma space e-mail we 31 00:01:55,890 --> 00:01:58,970 should be able to with great precision. 32 00:01:59,040 --> 00:02:04,650 This list down to three separate emails that we're really happy with and we feel like is working correctly. 33 00:02:04,650 --> 00:02:09,950 In addition I want to remind you that if any one individual e-mail is invalid. 34 00:02:10,230 --> 00:02:16,980 So like if a user submits blah blah blah at example and no domain on there then I want to somehow notify 35 00:02:16,980 --> 00:02:22,800 the user that this very particular e-mail right here was invalid and they need to go ahead and fix it 36 00:02:22,830 --> 00:02:24,240 before we accept this thing. 37 00:02:25,240 --> 00:02:25,460 OK. 38 00:02:25,470 --> 00:02:29,800 So that's definitely you know a pretty good pretty harsh little validation rule. 39 00:02:29,810 --> 00:02:33,420 There's definitely some heavy lifting here in putting all of this stuff together. 40 00:02:33,690 --> 00:02:36,450 So let's think about exactly how we're going to pull this off. 41 00:02:38,130 --> 00:02:42,310 Right now we've located all of our validation logic inside the validate function. 42 00:02:42,320 --> 00:02:47,970 And so this is definitely gonna be a fantastic location to at least do the e-mail validation. 43 00:02:47,970 --> 00:02:52,410 But I'm definitely kind of wondering whether or not we want to put all this detailed code that's going 44 00:02:52,410 --> 00:02:55,790 to examine the list of emails directly in here. 45 00:02:55,830 --> 00:03:00,660 I can definitely Magin a case in which we might want to have another component somewhere inside of our 46 00:03:00,660 --> 00:03:05,990 application that also has the ability to validate e-mails or validate an e-mail list. 47 00:03:06,030 --> 00:03:12,420 So maybe we shouldn't really centralize all that e-mail validation logic right inside of this very particular 48 00:03:12,420 --> 00:03:17,640 validate function because what I'm trying to say is we might need to make access you might need to do 49 00:03:17,640 --> 00:03:19,620 is validation somewhere else again. 50 00:03:19,620 --> 00:03:25,410 So I'm really thinking maybe we should put together a separate file to Howze a function that will take 51 00:03:25,440 --> 00:03:31,030 a list of emails and then validate them in some fashion and return the result. 52 00:03:31,030 --> 00:03:31,500 OK. 53 00:03:31,530 --> 00:03:35,320 So we can easily reuse that in the future if we want to. 54 00:03:35,340 --> 00:03:40,950 So let's do that let's make a separate file that will house a single function whose purpose is to validate 55 00:03:41,010 --> 00:03:46,320 a list of emails since this function that we're about to create this file that we're about to create 56 00:03:46,620 --> 00:03:51,480 is kind of like you know a utility of sorts that we might use anywhere throughout our application. 57 00:03:51,480 --> 00:03:55,020 It really doesn't fit into any of our existing folders right now. 58 00:03:55,200 --> 00:04:02,580 Some kind of thinking we should make a new folder inside of our SIRC directory called you utils and 59 00:04:02,580 --> 00:04:08,990 then inside of there we'll make a file called validate e-mails dodginess. 60 00:04:09,000 --> 00:04:14,760 So now we've got kind of a central location inside of our project where we could put any till or utility 61 00:04:15,150 --> 00:04:20,280 function or object or anything like that that we might want to use throughout our application. 62 00:04:20,280 --> 00:04:24,080 And then we've got the single file right now validate e-mails by the way. 63 00:04:24,120 --> 00:04:25,000 One quick note. 64 00:04:25,170 --> 00:04:30,570 You may have noticed that I kind of use slightly different capitalization between our components and 65 00:04:30,660 --> 00:04:32,630 this validate function right here. 66 00:04:32,670 --> 00:04:39,180 So the idea here is that components return objects or classes which are traditionally labeled with capital 67 00:04:39,180 --> 00:04:41,110 letters like capital H. 68 00:04:41,130 --> 00:04:42,040 Header. 69 00:04:42,060 --> 00:04:46,110 On the other hand this file validate e-mails is returning a function. 70 00:04:46,110 --> 00:04:52,320 And so I would really choose to use a lowercase V because traditionally functions are labeled with lowercase 71 00:04:53,250 --> 00:04:54,510 leading characters. 72 00:04:54,510 --> 00:04:58,920 So just you know that's why I'm using the slightly different capitalization. 73 00:04:59,110 --> 00:05:03,280 And yes I know that index doesn't really follow that rule but you know whatever. 74 00:05:03,630 --> 00:05:03,950 OK. 75 00:05:03,960 --> 00:05:09,360 So inside of your we need to write a function that's going to do our validation of our e-mails. 76 00:05:09,660 --> 00:05:15,230 So we'll definitely start off by declaring a function and immediately exporting it. 77 00:05:15,330 --> 00:05:20,160 Now I think it's reasonable to assume that this function will be called with a string containing all 78 00:05:20,160 --> 00:05:22,780 the emails that are provided by the user. 79 00:05:22,920 --> 00:05:28,920 So we receive that as an argument called about the recipients you know what. 80 00:05:28,920 --> 00:05:31,640 That's kind of a tough one to spell really easy to make a typo. 81 00:05:31,800 --> 00:05:33,930 Let's just say e-mails keep it simple. 82 00:05:35,880 --> 00:05:36,190 OK. 83 00:05:36,210 --> 00:05:39,900 So let's think about kind of like the steps for doing this validation. 84 00:05:39,900 --> 00:05:46,200 I think that probably the first thing we want to do is to take that list or that string of emails and 85 00:05:46,200 --> 00:05:49,130 split the string on the comma character. 86 00:05:49,220 --> 00:05:54,720 Valerie turn back to us an array of a bunch of different e-mails and we can then follow up throughout 87 00:05:54,720 --> 00:05:58,250 that array and do some you know one by one validation. 88 00:05:58,770 --> 00:06:02,600 So we'll take our e-mails. 89 00:06:03,080 --> 00:06:04,580 Let's let's just do the split first. 90 00:06:04,590 --> 00:06:11,090 We'll say e-mails dot split on the comma character. 91 00:06:11,100 --> 00:06:14,830 We're going to assign the result of that to how about e-mails array. 92 00:06:15,170 --> 00:06:16,270 So be really clear. 93 00:06:17,160 --> 00:06:19,550 So we've now split on the comma. 94 00:06:19,590 --> 00:06:22,190 So we've now got an array of e-mails. 95 00:06:22,230 --> 00:06:27,450 Now keep in mind that a user might accidentally or I say accidentally but really the rules we've set 96 00:06:27,450 --> 00:06:28,100 out for them. 97 00:06:28,200 --> 00:06:32,710 We've said that it's OK if they've put spaces in between in between each of these emails. 98 00:06:32,790 --> 00:06:38,760 So we need to make sure that once we split on the comma we kind of take care of that extra space that's 99 00:06:38,760 --> 00:06:40,710 in there like we don't really want to leave that space in there. 100 00:06:40,710 --> 00:06:45,370 We want to just deal with that here email with no spaces on either side. 101 00:06:45,780 --> 00:06:51,840 So to take care of that space we can use a function that belongs to any type of string that we work 102 00:06:51,840 --> 00:06:54,370 with in javascript called Daut trim. 103 00:06:54,630 --> 00:06:59,040 Let's see what that dot trim function does in practice. 104 00:06:59,070 --> 00:07:02,400 So over my javascript terminal we'll just do a quick demo of this. 105 00:07:02,490 --> 00:07:03,230 I'll say Konst. 106 00:07:03,240 --> 00:07:05,730 Email is Spaceways space. 107 00:07:05,940 --> 00:07:10,040 And then whatever at whatever dot com space space space. 108 00:07:10,270 --> 00:07:10,700 And. 109 00:07:10,770 --> 00:07:13,330 Now when I print out e-mail I see all the spaces in there. 110 00:07:13,680 --> 00:07:21,480 But if I call it email Daut trim it automatically takes care of any spaces on either side of the e-mail. 111 00:07:21,650 --> 00:07:23,990 And so that really suits us pretty darn well. 112 00:07:24,150 --> 00:07:30,420 If there's any spaces inside of any of these e-mails after we split on that comma then the trim function 113 00:07:30,420 --> 00:07:33,450 will automatically remove them for us. 114 00:07:33,450 --> 00:07:38,100 Now the reason I'm kind of making a big deal about this is because the logic to make this trim occur 115 00:07:38,160 --> 00:07:39,670 is kind of confusing. 116 00:07:39,690 --> 00:07:47,040 So we're going to map over every single string that's inside of this now e-mails array and we'll say 117 00:07:47,040 --> 00:07:52,630 that for every individual email I want to run email trim. 118 00:07:52,630 --> 00:07:55,230 And I remember how the map function works. 119 00:07:55,230 --> 00:08:00,930 It takes a string or takes a value out of the array that we're working with and then whatever we return 120 00:08:00,930 --> 00:08:06,330 from this function will be added to a new array and then that new array is eventually what gets returned 121 00:08:06,330 --> 00:08:07,140 from that. 122 00:08:07,500 --> 00:08:13,380 So essentially for every single email we trim it we return the trimmed string all those trimmed e-mails 123 00:08:13,410 --> 00:08:17,300 are assembled together and then returned from this entire function call. 124 00:08:17,550 --> 00:08:23,010 And so the end result ends up on the e-mails array OK. 125 00:08:23,430 --> 00:08:26,400 I don't want this all this validation stuff to run on too long. 126 00:08:26,400 --> 00:08:30,900 So I think we should probably take a quick break right now and we'll continue in the next section and 127 00:08:30,900 --> 00:08:32,830 finish up all this validation logic. 128 00:08:32,940 --> 00:08:34,910 So we'll see in just a second.