In the last video we created a Validate function.
Remember this thing is going to be called with all the different values out of our form.
So it's our job to create an Aries object attach any error messages that we might need to show to the
user if they entered in invalid inputs and then we return that is object at the bottom.
Now we need to make sure that this ballot function gets wired up to redux form so that it knows to use
the validate function.
So we're going to take that validate function and we're going to pass it into the redux form helper
down here on a key called validate.
So I'll say validate is the validate function we just created.
Now notice how the key and the value here are identical.
So if we want to we can condense this down to be just validate.
Like so OK.
So now that that is wired up let's go take a look at our diagram one more time.
So we just put together the validate function and we wired it up to our component member.
Valerie is going to be called every single time that the form is initially rendered or the user interacts
with it in any way.
So now our validate function is going to be getting called a whole bunch if we return an object from
that validate function then redux form is going to automatically render our component.
They actually get these messages to appear on the screen redux form is going to take a look at every
field component that gets rendered.
It's going to look at each fields name property.
So remember every field we put right here has a name property it's a redux form is going to look at
this name property right here.
And then it's going to look at the heirs object that we return from validate if a field has the same
name as a property that exists inside that object then redux form is going to take that message and
pass it to or render input function for each field that gets created.
Now that last part right there that is the part that I think is really confusing.
Again the general idea here is that our heirs object has some properties on it that have an identical
name to whatever names we provided to the field properties.
So if the air object has a property name that is identical to this name right here and it contains a
string that error message will be passed down to this render input function.
Let's just try making use of the error message inside of render input and showing it on the screen.
And I think you'll get a better idea of the little connection that's going on here.
It's going to go up to render inputs.
Remember we are destructuring out of that first argument right there.
I'm going to do structure off one additional property and this one has a kind of strange name its name
is Middx.
So I'm going to take that up property and I'm going to cancel log it out any time that render input
is called.
So I'm going to save this now I will flip back over to our application OK.
I see two council logs right here.
The reason we see two is because we are calling render input twice once for each field component that
gets created to the consulate that we see right here is the Met property.
So we can now expand these.
And you'll notice that each one here is the second one has a property attached to it.
And the area is the error message that we returned from validate.
So there's the error message for description.
And here's the error message for title so now we can take these mega dot error properties and attempt
to show them on the screen underneath each text input.
Now just one last time before we do that I just want to reiterate one more time here.
Remember the big connection between the validate function and getting the message in to render input
is all about the field name right here.
So because this name is title and because we returned an object from validates with a title property
that your message shows up inside of render input that is the big connection between the two.
And I apologize for the repetition here but again I get a lot of questions about this topic so I just
want make sure it's really clear from the get go.
OK so now to show this error message on the screen we can remove the console log.
And underneath our input I'll place a div and it will print out meta dot air like so.
So now we can save this while flip back over.
And we should see our error messages appear.
All right.
So I see you must enter a title and you must enter the description member.
Our validation is going to be ran on the instant this form is rendered on the screen or anytime that
the user interacts with the form.
So in some cases we are probably not going to want to show an error message to the user right away when
they first look at the form.
Usually we only want to show an error message after they try to submit the form.
And there's something wrong with it.
We'll figure out how we do that.
Just a little bit.
But right now we're just going to try to make sure that the form air message shows up correctly.
OK.
So I see you must enter a title here but as soon as I enter some text in that your message goes away
I see the error message here as well.
So I can enter some text in and the error message goes away as well.
So once again every single time your user interacts with the form the validate function gets called
and it's going to validate all the form inputs OK.
So that's pretty much basic validation.
Now we'll take a quick pause right here when we come back the next section we're going to first make
sure that we only show these error messages to the user after they attempt to submit the form.
So again if I just refresh the page and we are essentially telling the user they're doing something
wrong right away.
That's not really helpful for a user.
So we only one show an error message after the user attempts to submit the form.
So quick pause and we'll sort of take care of that in the next video.