In the last section we started validating the list of emails that a user provides to us in between the
last few in this one.
I realized that trying to explain with words what's going on with all these steps with like map and
split is probably not super clear like it's a lot easier to communicate this with pictures or diagrams.
So I figured hey let's just make a diagram.
So I apologize if the last section and talking about this stuff is not clear.
I put together a diagram hopefully I'll be a little bit more obvious what's going on with this logic
now.
OK.
So let's walk through this flow.
We start off with our string at the very top and then we finally walk down to the result that we're
trying to get to at the very bottom.
So here's where we're going to do.
We've got our string at the top.
It has a good e-mail a comma a space an invalid email a comma a space and then another good one.
So at the end of the day we want to somehow extract this invalid e-mail right here and send it back
to our validate function.
So we can tell our user exactly which emails are invalid.
So we've already gone ahead and ran the split operation the split operation takes a string.
It's removes all the commas and then it splits all the elements remaining into separate elements and
array.
So after running split we can kind of imagine that we have an array that looks like this right here.
Now remember split does not take care of any spaces.
Now we certainly could change the split statement and say like oh yeah do split on comma and space but
again we don't really know if the user's going to be providing one space between each email or many
spaces or what.
So it's really just safer to say we're going to require you to have commas between everything but if
you provide some variable number of spaces in there that's totally fine because the next step is going
to be to trim the email address.
So this step right here I put on the underscores to indicate any remaining spaces that would be here.
So when we split invalid an email will have a space in front of it and the same thing with good too
as well.
So we run through the trim function and then everything comes out just nicely trimmed no spaces on either
side.
Now the last step which we have not yet done to extract the invalid emails inside this list right here.
We're going to run the list or the array through a filter function inside the filter function.
We're going to look at every individual e-mail and we're going to check to see whether or not it is
valid.
If it's not valid then we're going to keep that email inside the list.
But if it is valid then we're going to dump it out of the list because remember our goal here is not
to get a list of the good e-mails.
Our goal is to validate the email list.
We want to figure out the ones that are bad.
So we're going to keep around any invalid e-mails or any poorly formatted e-mails that we have.
OK.
So let's give this a shot.
We've taken care of split and trim.
Now we need to do the filter.
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
a little bit more legible and do take note that remove the semi colon on the end here because we're
going to add in one more step as well.
So we're going to add on our filter function the filter function works somewhat like the way that the
map function does inside a filter.
We're going to be past each individual email inside of the email function that we're passing right here.
We're going to check to see whether or not this e-mail is valid.
Now if it is valid we are going to return false if it is valid.
Susie if it is valid return false if it's invalid return true if you return true inside of a filter
function that value will be kept inside the array.
Otherwise the value will be dumped.
And so again we want to keep around the invalid e-mails.
So we want to make sure that we capture the case in which the saying is not valid.
OK.
So the question very quickly becomes how are we going to check to see if the e-mail is valid or not.
Well that one's pretty straightforward inside my browser.
I can open up a new tab and I'm going to navigate directly to e-mail reg ex dot com.
So e-mail dot com is a fantastic little Web site that provides regular expressions to validate e-mail
addresses.
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
are provided here really take care of the job as they say.
Ninety nine point nine nine percent of the time.
OK.
So we'll scroll down a little bit and you'll notice that they've got different Reg X's for a bunch of
different languages so we can make use of either the javascript Reg X right here or we can use the email
75 5:01 that's listed right here.
So just to be clear this is a javascript specific Reg X that works with javascript but they are telling
you here if you want to use this other alternate one that's a little bit less restrictive.
That's really fine you can do that as well.
For us we want to go with a more strict case.
So we're going to pick up this reg X right here.
So I'm going to copy it the entire thing will change back over to our validate e-mails function and
then I'm going to assign this to a variable at the top of the file and say Konst party which is short
for a regular expression.
I'm going to paste the entire thing and put a semicolon at the end.
So it's a pretty long regular expression you know it's span's on quite a bit.
But again it's going to work out pretty well for what we are attempting to do.
So now that we have the regular expression for every e-mail that exists inside of our array of e-mails
we're going to call our E dot test with the e-mail address.
So this takes e-mail.
It then validates it against our regular expression.
If the email matches the regular expression.
So if the email is valid then this Stephen right here will return true.
Otherwise the email is invalid.
It's going to return false.
Now that's kind of a problem for us because remember we want to keep around the e-mails that are invalid.
So specifically we want to keep around the cases where something fails this test or this expression
right here returns false.
So we can either write out equals equals equals false if we want to be just really clear on what's going
on here.
Alternatively we can always put an exclamation mark to capture this as well.
Now in this case I'm kind of happy to just leave that equals equals equals false because it's just really
clear what's going on here.
I want to capture the e-mails that will fail this test so I'm going to leave it as this right here.
OK.
So now that we have a list of our e-mails that are not valid and now that I'm looking at this variable
name I'm kind of thinking maybe we should change it to something that's a little bit more clear let's
say Invalid e-mails.
So now it's really clear to anyone else who looks at this file.
Yeah this is a list of the bad stuff.
So now at the bottom we'll look at that.
Invalid e-mails.
Right.
So if this thing has any e-mails inside of it we're going to return the these e-mails are invalid.
It's invalid and we're going to use an six template string.
So I'm going to put down dollar sign curly race invalid e-mails and then along with the template string
I used back ticks right here.
So these are not single quotes.
They're back ticks.
Make sure you get back to X because that's how we'd write template strings.
OK.
So if we have any invalid e-mails return this error message.
Otherwise we can just return nil or we could just return without anything at all.
Either one is totally fine.
OK.
So I think we're ready to test this out inside of our component.
I'm going to change back over to our survey form.
We're going to go up to the top of the file and import the validate e-mails function from one directory
up in another up another directory into tills and then validate e-mails and you know I call this thing
valid emails it really should be validate.
So let's call it validate e-mails.
That's better.
So now down inside of our validation function underneath the component
we don't really have to do any test or any specific special test in here we can just say you know errors
dot recipients do we call it recipients or do we call it emails.
We call it e-mails.
So errors dot e-mails equals values Daut e-mails.
And we're going to take this big old string right here containing all the different e-mails and pass
it into the validate e-mails function like so.
So now when validate e-mails runs if there's anything invalid inside that array we will return that
string that says the following e-mails are invalid.
Otherwise we will return undefined from this.
And so remember the heirs object only cares about properties that have a value assigned to it.
It doesn't care about properties that have undefined assigned to it.
Now there's one last thing I want to point out here.
The way in which restructuring our validation logic right now we're first checking to see if a value
like an e-mail is provided at all and then we check to see if there's any invalid or valid emails.
So this logic right here doesn't quite work out because really we want to first see if there's any invalid
e-mails.
And then if there are not or if this thing just fails catastrophic.
That's totally fine.
But what I really want to make sure happens.
I really want to make sure that a user will see the error message of you must provide a value and then
after they provide e-mail then we'll take care of the e-mail validation.
And you know what let's just run this thing as is for you what I just said.
Let's run it.
I want you to see stuff behaving badly.
And then what I'm talking about here will probably make a little bit more sense.
So will change back over to our out when we do so it looks like we get a little bit of air.
Let's check this thing out.
So it cannot read split of undefined.
OK.
So this was a little mistake on my part.
Remember that when our application first boots up like when this validation or assuming the form is
first built by redux form validation automatically runs one time.
And so right now we're attempting to validate e-mails on an empty string or something undefined because
we have not yet provided any value in here whatsoever.
So it's just to clear that we're going to make sure that if no e-mails have been entered then we will
instead provide an empty string to validate e-mails function and they'll get that little crash to go
away.
So let's try this again.
OK I'm going to zoom out again so I can see the whole form.
And if I click NEXT right now.
So this is what I was talking about.
If we put that e-mail validation last inside of our form we're going to get this message.
These emails are invalid because validate e-mails runs.
It sees that something is probably wrong with the list of emails and returns the message of Hey you've
got to provide the e-mails.
And so it overrides the previous value of you must provide a value.
We can fix this entirely by just moving this validation statement above this one like so.
So first try to validate that thing.
Then what do you know who cares what's in there.
But if the user did not provide an e-mail at all just override whatever we're turned right here with
you must provide a value so let's not give this a shot.
So will refresh
when I click next.
We get you must provide a value.
OK.
So that's definitely work in the way we expect.
If I just provide a value.
However now it's still invalid.
So we get these emails are invalid.
Here's what's invalid.
I can do and at biolab law dot com.
OK.
Now it's valid.
If I put on the comma it gets a little bit unhappy because it thinks that there is an extra empty email
right there.
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
cool looks like everything's good to go.
So besides the fact that it doesn't really like any trailing commas I think that the recipient list
is behaving really the way we expect right now.
For the purposes of this course I'm going to say that you know you have to provide no ending comma in
here and I'm going to tell you that it would be a good little project for you to take a quick pause
before you watch the next video and maybe fix up or validate function or the validate e-mails function
to function correctly whenever there is a trailing comma at the end.
That'll be a good little project to tackle.
OK.
So I think that we've got all of our validation hooked up correctly at this point.
We're now ready to allow the user to progress on to some type of like revues screen.
So let's take a quick break.
We're going to come back in the next section and start tackling that review screen.