In the last section we've basically finished up our form.
So you got one last really big thing that we have to be worried about.
A user can enter stuff in right now but we're not really doing any validation of their inputs.
And so I think that would be really nice to make sure that whenever the user enters in a list of email
addresses right here to send this e-mail to to collect some feedback we should probably as soon as possible
validate the emails that were provided and make sure that they're all at least somewhat valid.
Because if the user submits a list of invalid e-mails right here.
Well we're not going to send those e-mails out to anyone.
And then our users are going to be like well what the heck where where's my recipients like where's
my e-mails Where's my survey results.
So it's really gonna be up to us to make sure that we tell our tell our users whether or not they're
providing valid data here.
So again this is really getting into the topic of validation with redux form.
I'm going to flip back over to my code editor inside of my survey form component.
So again I'm inside of survey form inside of survey form.
We added in that redux forum help or at the very bottom we added to it the survey form name right here.
And again we will talk about exactly what this form is doing for us in just a little bit.
Right now I want to talk about one other possible option that we can provide to this object and that
option is called validate.
If we pass in a function under the key validate right here that function will be automatically ran.
Any time the user attempts to submit the form and so we can use that as our opportunity to kind of validate
the different inputs so the user has added and provide feedback to the user to tell them whether or
not they have done basically the right thing.
So right about the redux form tag we're going to define a function called validate.
We're then going to take that function and just like I said we're going to pass it right into the redux
form option object right here.
Now notice that the validate key and value are the same.
So we'll use a little bit of E-6 to condense down to just validate like so and do remember Make sure
to get your sense your comma at the end here.
OK.
So a little bit more on validate now the ability function is kind of interesting in how it works.
It takes a single argument of values and this values thing right here is the object containing all the
different values that are coming off of our form.
So in other words basically an object that looks identical to the object we see when we submit the form
right now.
So that values object looks just like this.
It has the name of each field.
And then the value that is contained inside that field.
So it's pretty easy for us to look inside this object inspect each and every one of these values and
say whether or not they are valid.
Now to communicate back to redux form whether or not these values are valid or not we have to return
an object from this validate function.
So you know is the API here.
Let me just like a quick side note.
The API here is conceptually or like I should say in practice easy but I feel like it's kind of conceptually
difficult to understand what's going on.
So let's slow down a little bit of code and hopefully that will help us understand what's going on.
So at the top of the valley function I'm going to make a object called errors like so.
And at the very bottom I can return that object.
Now if redux form gets that Ayres object back and it is empty redux form assumes that the entire form
is valid and everything is ready and good to go.
So if we just create an empty object and return it right away.
Relax form says fantastic Nowhere's.
Everything is ready to go.
However if the heirs object has any properties or values inside of it then redux form will see those
properties and values and it will assume that the form values must be somehow invalid and so it will
stop the submission process.
So for us in practice what that means is we have to look at this values object very closely.
If the values object has any invalid values inside of it we will then added a value to the heirs object
so that redux form knows that something is wrong here.
So once you see the code here I think life is going to be a lot more straightforward.
So let's just write out the code and hopefully we'll get a better sense of what's going on.
We're going to say we're going to look at the Values object which remember it contains like the body
emails subject and title and we'll start off by looking at the title propertyless to start with title
values title.
We're going to say if a user did not provide a title in the form so if there is no value title then
look at the heirs object.
In on the title property out the text you must provide a title like so.
So this is what we do to validate just one single property.
We look at the heirs objectively and we look at the Values object.
We write some validation around it where we say hey you have to provide a title here if the user did
not provide the title.
Then we add the same property name to the heirs object and assigns that a string that we want to send
back to the user.
So now heir's has a property assigned to it when it gets returned from the validate function redux form
is going to see that property and it's going to say oh this thing must not be valid.
I am not going to allow that form to be submitted.
Now before we go dislike full bore and add in a bunch of additional rules on all the other properties
inside of here I want to take a second to take advantage of this little validation error here.
You know we just wire it in or this little validation rule and I want to figure out how we can communicate
this air back to our user because obviously we want to tell our user what's going wrong.
So I want to figure out how we can communicate this fact to our user.
Now this stuff can sometimes be a little bit complicated.
So you know that's why we're going to take care of this right now right away before we go back and try
to write validation rules around every value.
Now since this is going to be a little bit more of a you know complicated step how will we take a short
break.
When we come back we'll figure out how to get this validation air to show up on the title field in our
form.
Okay.
So I'll see in just a second.