We've got the basics of validation put together for our form.
But we still have to validate the emails that a user provides.
Now we haven't really spoken a whole bunch about this email list right here and it probably makes sense
to lay out some ground rules so that we're on the same page on exactly how this e-mail list is going
to work.
Remember the recipient list right here is a list of e-mails that our user wants to send a survey to.
So presumably this might be a list of very public or like customer e-mails or whatever it might be.
And it's up to us to do some at least small amount of validation on each of them and say hey maybe this
e-mail doesn't quite look so good.
You might want to fix this one up and then submit your list again.
So really we're going to be doing our the validation right here as kind of a service to our users so
that when we go to send each of these e-mails it doesn't just start mysteriously failing and our user
sits there thinking that our service is awful.
Right.
We want to tell the user that their e-mail is a problem.
As soon as possible and give them the opportunity to fix it.
So first off we need to figure out exactly how we're going to receive the list of e-mails and we'll
think about how we're going to validate it.
Now I see.
Receive.
I mean are we going to let users just like you know entery involved the Watcom and then a space and
then dot com and then another space or should we say that there should be like a comma or a semi-colon
poor slash or what.
There's really got to be something in there to differentiate each individual email.
So here's what I suggest.
I think that we should say that every single e-mail that gets entered into our application should take
a comma and a space between each email.
Now we won't necessarily say that each one has to have a space but will say that there has to be a comma
in between each email.
So if a user entered in this string right here like e-mail comma space e-mail comma space e-mail we
should be able to with great precision.
This list down to three separate emails that we're really happy with and we feel like is working correctly.
In addition I want to remind you that if any one individual e-mail is invalid.
So like if a user submits blah blah blah at example and no domain on there then I want to somehow notify
the user that this very particular e-mail right here was invalid and they need to go ahead and fix it
before we accept this thing.
OK.
So that's definitely you know a pretty good pretty harsh little validation rule.
There's definitely some heavy lifting here in putting all of this stuff together.
So let's think about exactly how we're going to pull this off.
Right now we've located all of our validation logic inside the validate function.
And so this is definitely gonna be a fantastic location to at least do the e-mail validation.
But I'm definitely kind of wondering whether or not we want to put all this detailed code that's going
to examine the list of emails directly in here.
I can definitely Magin a case in which we might want to have another component somewhere inside of our
application that also has the ability to validate e-mails or validate an e-mail list.
So maybe we shouldn't really centralize all that e-mail validation logic right inside of this very particular
validate function because what I'm trying to say is we might need to make access you might need to do
is validation somewhere else again.
So I'm really thinking maybe we should put together a separate file to Howze a function that will take
a list of emails and then validate them in some fashion and return the result.
OK.
So we can easily reuse that in the future if we want to.
So let's do that let's make a separate file that will house a single function whose purpose is to validate
a list of emails since this function that we're about to create this file that we're about to create
is kind of like you know a utility of sorts that we might use anywhere throughout our application.
It really doesn't fit into any of our existing folders right now.
Some kind of thinking we should make a new folder inside of our SIRC directory called you utils and
then inside of there we'll make a file called validate e-mails dodginess.
So now we've got kind of a central location inside of our project where we could put any till or utility
function or object or anything like that that we might want to use throughout our application.
And then we've got the single file right now validate e-mails by the way.
One quick note.
You may have noticed that I kind of use slightly different capitalization between our components and
this validate function right here.
So the idea here is that components return objects or classes which are traditionally labeled with capital
letters like capital H.
Header.
On the other hand this file validate e-mails is returning a function.
And so I would really choose to use a lowercase V because traditionally functions are labeled with lowercase
leading characters.
So just you know that's why I'm using the slightly different capitalization.
And yes I know that index doesn't really follow that rule but you know whatever.
OK.
So inside of your we need to write a function that's going to do our validation of our e-mails.
So we'll definitely start off by declaring a function and immediately exporting it.
Now I think it's reasonable to assume that this function will be called with a string containing all
the emails that are provided by the user.
So we receive that as an argument called about the recipients you know what.
That's kind of a tough one to spell really easy to make a typo.
Let's just say e-mails keep it simple.
OK.
So let's think about kind of like the steps for doing this validation.
I think that probably the first thing we want to do is to take that list or that string of emails and
split the string on the comma character.
Valerie turn back to us an array of a bunch of different e-mails and we can then follow up throughout
that array and do some you know one by one validation.
So we'll take our e-mails.
Let's let's just do the split first.
We'll say e-mails dot split on the comma character.
We're going to assign the result of that to how about e-mails array.
So be really clear.
So we've now split on the comma.
So we've now got an array of e-mails.
Now keep in mind that a user might accidentally or I say accidentally but really the rules we've set
out for them.
We've said that it's OK if they've put spaces in between in between each of these emails.
So we need to make sure that once we split on the comma we kind of take care of that extra space that's
in there like we don't really want to leave that space in there.
We want to just deal with that here email with no spaces on either side.
So to take care of that space we can use a function that belongs to any type of string that we work
with in javascript called Daut trim.
Let's see what that dot trim function does in practice.
So over my javascript terminal we'll just do a quick demo of this.
I'll say Konst.
Email is Spaceways space.
And then whatever at whatever dot com space space space.
And.
Now when I print out e-mail I see all the spaces in there.
But if I call it email Daut trim it automatically takes care of any spaces on either side of the e-mail.
And so that really suits us pretty darn well.
If there's any spaces inside of any of these e-mails after we split on that comma then the trim function
will automatically remove them for us.
Now the reason I'm kind of making a big deal about this is because the logic to make this trim occur
is kind of confusing.
So we're going to map over every single string that's inside of this now e-mails array and we'll say
that for every individual email I want to run email trim.
And I remember how the map function works.
It takes a string or takes a value out of the array that we're working with and then whatever we return
from this function will be added to a new array and then that new array is eventually what gets returned
from that.
So essentially for every single email we trim it we return the trimmed string all those trimmed e-mails
are assembled together and then returned from this entire function call.
And so the end result ends up on the e-mails array OK.
I don't want this all this validation stuff to run on too long.
So I think we should probably take a quick break right now and we'll continue in the next section and
finish up all this validation logic.
So we'll see in just a second.