In the last section we added on a Validate function that will inspect the form when ever it is submitted
by the user.
Now that we have some validation messages to say to the user we need to make sure that we somehow get
these displayed inside of our component.
So remember that by default redux form is really just responsible for showing or seemy for managing
the state of our form.
It's really just handling the data side of things.
It's up to us the developer to actually show some markup on the screen that represents the form.
And so that's why we created the field component in the first place.
So it's very easy to now kind of take that one step further and say that it is also our responsibility
for making sure that we show validation errors to the user as well.
So it's up to us to make sure that these error messages somehow get displayed on the screen.
So let's start real simple I just want to somehow get these air messages to show up to do so we can
reference the field object that is passed to the render field function.
Remember that this field object right here represents a single input or a single piece of state that
we are attempting to communicate to the user.
We've already seen that the field object right here can be given some arbitrary properties like we added
on a label which we specified in the field.
It also gets some automatically created properties like an input right here.
There's one more property that is automatically placed on the field object that is responsible for handling
validation as well.
To get this error message to show up I'm going to place my curly braces.
And then we will reference field dot mete dot air like so.
This method dot air property is automatically added to that field object from our validate function.
So this is where this is why I spent so much time in the last section talking about exactly what this
heir's object was doing.
I know some of your thinking guys spent so long on that but really it was for a very good reason.
Remember that we specified or we added some properties to this heir's object right here like Aerostar
title categories in content.
I didn't pick these names out at random.
These were very specific property names that I chose when we specify a property Aerostar title and then
return heirs from the validate function.
When redux form goes to render say this field right here it looks at the Name property that we provided
to that field and it says if the heirs object has a property assigned to it of title I'm going to call
render field right here and I'm going to pass along whatever error message exists on that as object
with a power under the property title.
So really this name right here of title is what connects to our validate function to the title that
is right here.
If we changed the title up here to like blog title or something like that no longer any communication
from the validate function to this particular field.
So again I'm really trying to communicate here is that this name property and the property that we use
inside that validate function must be identical for all these errors to show up correctly.
So because those two properties were identically named the field object automatically gets this field
dot metadata error message right here and this error right here is going to be the exact same string
that we assigned inside of the validate function which is enter a title OK.
So yes there is a lot of kind of I don't want to call it magic per se but there's definitely a lot of
assumptions that you are naming all these properties that you're using very consistently.
So when you're working on your own project stuff is not working correctly it's just not showing up really
do make sure you double check all your property names.
OK I think we're ready for a little bit of a test now.
I do want to say that probably everything is not going to work the way we expect.
The reason for that is that we are not really tying redux form into the middle of our form just yet.
So on second thought rather than testing anything.
Let's take a quick break.
We're going to come back and wire up the Submit of our form and then we'll be able to do the actual
test and make sure that all of our validation is working correctly.
So let's handle some middle with redux for them in the next section.