In the last section we added on one field for each different property of a blog post we'll now continue
by making sure that we handle a user submitting the form and also make sure that we validate the input
that a user submits.
One thing that I want to do a quick aside here for I want to mention that I've been referring to tags
here incorrectly the property that we're working with is not called tags.
It is called category's.
I have definitely been misspeaking there.
I apologize for that so I'm going to replace label and name with categories here so hopefully that alleviates
some confusion.
I probably introduce there.
Again my mistake.
OK.
So our goal right now is to make sure that we can handle some middle of the form and also handle validation
of the form as well.
Looking back at the form inside the browser I really want to make sure that a user has entered some
input for every single one of these fields whenever they attempt to submit it.
So for example if a user enters in some categories and some post content but not a title I want to not
submit the form to the back end.
I want to stop the submission and I want to show an error message to the user directly underneath this
input right here.
So that's the end goal.
I want to show some validation on an individual input if that input is not correct or not invalid.
Validation of our form is part of what redux forum handles automatically for us.
So we don't need to inspect any values manually inside of here or add in any custom GSX per se.
We're going to hook into the redux form system validation that's going to make validation a lot easier
for us.
So let's get to it.
I'm going to first start off by defining a helper function underneath my component so underneath the
component I'll define a function that I'm going to call validate on then going to take this validate
function and pass it to the redux form helper right underneath it as a configuration option called validate.
Now of course the key and the value here are identical.
So all condensed down to just be validate by itself.
The validate function will be called automatically for us at certain points during the form's lifecycle.
Most notably when ever the user tries to submit the form.
So whenever the user presses the enter key or presses some button that's labeled Samit or something
like that the validate function will be called automatically for us the validate function is given a
single argument which we by convention referred to as values values is an object that contains all the
different values that enter the or excuse me that a user has entered into the form.
So if we were to cancel log this thing and I'm not going to actually cancel log it I'm going to show
you an example.
I would expect to get back an object that contains a property's title categories and content and then
the values for each of these three different properties would be whatever the user had entered into
the form itself.
So I'm saying hey maybe they have values of a SDF right here that would correspond to me going into
the form and putting in SDF on all three and then clicking some submit button in here in order to validate
these inputs and then communicate any possible errors back to redux form.
We have to return an object that we create from the validate function.
So this is part of redirects form where I think that it's a very simple thing but it can be a little
bit challenging to grasp exactly what we're doing inside the validate function right here.
So let me give you a very clear example.
OK let's do a very clear example of what we're supposed to do inside this function.
We're always going to start off by creating an errors object.
So we're going to say Konst errors.
That is an empty object.
Then we'll do some logic to validate the inputs from the values object.
And then at the very bottom of the function we will return the errors object like so.
So where does the validation happen per say like where do we actually communicate.
Validation errors.
Back to redux form.
Well it's all through this heir's object right here.
If we return an empty object from the validate function which is exactly what we're doing right now
redux form assumes that there is absolutely nothing wrong with our form.
So if errors I'm going to put a comment on here just to make sure it's really clear if Ayer's is empty
the form is fine to submit.
However if that object has any properties assigned to it whatsoever redux form will assume that in fact
there is an issue with the form and that it fails validation and that it should not submit the form
at all.
So will say if heir's has any properties redux form assumes form is invalid.
So in practice to do validation of forms managed by redux form we define this object.
We expect our values object and then if there is anything wrong with the form we append some properties
to that object.
So let's walk through this and practice and see exactly what it looks like.
Remember that for us we really just care about making sure that a user has entered some valid input
for each of the different properties.
Title categories and content.
So for us we'll say if a user did not provide values not title The not going to add on a property to
my ears object.
So I say errors.
Title is enter a username are not user usernames season but enter a title
OK.
So a lot of this is I know this code right here is very simple but I feel as though it's really really
nuanced.
So I want to walk through this very closely.
The object started out as completely empty.
We then looked at some particular value on the values object and we said if this is not valid.
So if a user did not pass in the title here then I'm going to add a property to the heirs object of
title.
And I'm going to assign it a message that will be displayed to the user because the object now has a
property assigned to it.
So because it's no longer empty when we return it from this function redux form is going to look at
the arrows object.
It's going to see Dot title.
It's going to say oh well there's a string here that means the form is not valid and I'm not going to
submit it to the back and are not going to submit it at all.
So no further submission the form must not be valid.
So if nothing else if all this doesn't quite make sense I can tell you that all you really need to be
worried about here is putting together some if statements and then assigning a property to the errors
object.
In practice that's really all we're doing all this extra explanation I'm giving you here is just to
tell you a little bit about what relaxed form is doing internally.
So again in practice we really can just repeat these statements for each additional property inside
of our heir's object.
So I can say if a user did not provide values dot categories then errors dot categories is enter some
categories.
And finally if the user did not provide values Dom content then ersatz content is enter some content
please.
Now you can easily imagine how we might expand the validation on here.
We might also put in a rule and say well maybe it's high last we like three characters long.
So maybe if there is no title or if values Dom title dot length is less than you know three characters
well then maybe you want to say Please enter a title that is at least three characters like so.
So we can easily kind of add on additional validation checks in here by manipulating the if statements
to check additional properties much more explicitly than just making sure that they exist.
Now do note that we could also as well we don't have to combine these validation checks into a single
if statement.
I can easily also add on here.
I could break out this less than 3 so I could say if length is less than 3 then aerostat title should
be tyle must be at least 3 characters and then for the other checks that I did down here I could say
just enter a title.
So I don't have to combine all I'm trying to say there is I don't have to do all my validation inside
of a single if statement.
I can break it out into multiple if statements and then customize the title or the air that's shown
to the user inside each of those different if statements.
Now for my application I really don't care about the length the titles so personally I am going to delete
the extra check in here because I really don't care about it.
OK so in this section we defined our validate function and passed it to the redux form helper at the
bottom as an option called validate the validate function will be called automatically by redux form
whenever a user attempts to submit the form inside of here.
We created an empty air object.
We then inspected the value of each input out out of the form and then we appended some properties to
the heirs object.
If the object comes back from the validate function as empty then that means that the form must be valid.
If there are any properties assigned to it then read X form assumes that the form is not valid and that
it should not submit the form.
OK so I know this is when a lot of talking over what might seem like a very simple subject but to me
this is something that is very nuanced and I really want to make sure that everything was very very
clear as to what was going on.
So now we've got some validation added in here.
We need to somehow think about how we are going to reflect these different error messages to the user.
So let's take care of that in the next section.