In the last section we put together our validate function and added a validator around our title property
coming out of our form.
Remember this title property right here is intended to be the title of this survey that we're about
to send out.
Right now we're just checking to make sure that a user provided an actual title and if they did not
we add a property to the heirs object.
Now again we're going to come back and take care of validation on a couple a couple of the other values
in here.
But right now I want to figure out how to get the error that we returned from right here to somehow
appear on the screen.
So this is another one of the areas of redux form that's you know kind of hard to lead into in a natural
way.
I'll be honest with you.
So we're going to kind of just jump right to the chase when we return this heir's object redux form
looks at the properties on it which you know we had said that we've been over this.
But what's more important is that if any of the errors on this object like the air title or air property
name which in this case is title matches up with one of the fields that we are attempting to render.
And remember it is for us we have a name of title right here and we're passing that to the field with
the name name right here.
Then redux form will automatically take the air that we set in there and pass it as a prop to our custom
field component.
So again because we have a name of title being passed to our field property right here.
And because the air that we set on our air object is title redux form will automatically connect the
dots and pass this error message to just the instance of the field that is controlling the property
or the input that's controlling the name.
So in other words long story short you know again this is kind of hard to explain naturally but long
story short redux form automatically matches up the errors are returning from that function to the different
fields you're rendering.
So let's just see what this looks like in practice.
I'm going to flip over to my survey field component inside of the survey field components prop's we
get passed along a property called Mehta and we saw that just a moment ago when we canceled out some
of the props inside the same.
But let's count log that met a property right now and see what we're working with.
So I'm going to change back over to my application.
We'll wait for the reload to hit.
And you'll notice that we instantly get a bunch of console logs right now for them one for each of the
fields.
Now I'm going to clear out the log by click in little clear console right there and then without putting
any input into the form whatsoever I'm going to click Submit or next.
In this case now we instantly see our four console logs one from each field.
Right now we only have validation around the survey title.
And so I suspect that the console log that came up first right here is being generated by the first
field that we're rendering.
So if I expand this thing right here number we are currently Konst logging the meta object.
You'll notice that it has an air property that says you must provide a title.
So that's pretty much it.
Like that's a whole ballgame right there.
If we just match up the property names on the air object to match the proper name that we pass to our
field object the heirs will automatically be sent along to the appropriate field.
So this is the console log for the survey title.
If we look at the next one you'll notice that we have an air of undefined here.
So we haven't added any validation around the subject line field just yet.
And that's why we don't see an error here.
And then it's the same thing for the third one and the fourth one.
OK so then mind it's going to make our job of putting these validation errors on the screen just a little
bit easier.
So back inside the survey field component we're canceling out the Mehta property right here.
Now there's one other property that I want to show you really quick.
That's also very relevant on the metal object and that is the Touched property right here.
The touch property means that a user has like clicked into it and then clicked out so it would be like
I have now touched this field.
I'm going to mention that right now because that's going to be pretty relevant in just one second.
So again I really want to do right now is get the error message contained in the meta object to appear
on the screen.
So I'm going to remove the council log and then directly beneath the input I'm going to reference Medha
dot err like so.
So now let's refresh our application and see if we can get this air to print up on the screen.
Now this is kind of interesting.
The instant our application renders it looks like the air is already showing up.
So here's the catch.
Behind redux form when you first render the form like the user hasn't touched at all when you first
render it the validation function automatically runs.
And so the instant the form renders redux form automatically it considers everything in here to be invalid.
And so clearly you know that's not really the best approach.
I don't really want to show a validation message to the user before they've even touched the form at
all.
So to solve this we're going to use that touched property that we just saw a second ago on the meta
object.
So we're going to say until a user touches the field do not attempt to show the validation message.
Now the validation is still going be running in the background.
But again the entire point here is I don't want to show a nasty message to my user so now off my metal
object I now want not only the air property but also that touch property as well.
So rather than referencing like metadata air and metadata touched we can do a little bit more yes six
destructuring to get those two properties out of the meta object.
Now you'll notice that we are already destructuring the property off of our prop's object but we can
use yes six nested destructuring to now reach into the meta object and pull a property out of there.
So this is kind of like two levels deep destructuring that we're about to do.
So we're going to say look into the metal object and give me the air and touched properties out of there.
OK.
Again a little bit of ESX right here.
So now inside of our little block down here we can say if touched is true and the air exists then show
the air.
Now we're kind of abusing javascript here again in a similar way to me and the way that we did previously
in one of our reducers touch straight here is going to be a boolean if touched is true then our javascript's
interpreter will evaluate the entire statement right here.
And if air contains a string that string will be returned.
However if touched is false then the javascript interpreter will just automatically stop executing the
entire boolean statement.
So we're kind of abusing the way in which the javascript interpreter runs or executes boolean statements
right here.
In practice it's a lot easier to observe what's going on.
So let's just save this.
We'll flip backwards the application.
Now at present touched is false.
And so even though there still isn't air because the validation is still running touch is false.
So the entire statement is not executed.
However once I clicked into the field touched will be true.
So the entire boolean statement will be executed and air will be returned.
OK so let's give this a shot.
Once I click on and then clicked out touched is now true.
The Boullion statement returns a value that is inside of air which is the string you must provide a
title.
OK.
So that's pretty much it.
That's handling validation in a nutshell really at the end of the day it all comes down to writing your
validate function right here.
Make sure that you look at the Values property and then whatever property you're looking at right here
make sure that you're adding the identical property name to the heirs object and then in your respective
fields you're going to look at your property pull off the air and touch property and then use those
inside the component to get something to actually appear on the screen at the appropriate time.
So this is looking pretty good.
We're getting the validation to appear.
However it still looks pretty nasty right.
Like validation.
Usually we want to appear as read text to say like hey draw your attention up here.
And the spacing all over this thing still looks real nasty as well.
So we saw a little bit of work to do above both of those items.
We also have to make sure we wire validation for all the other fields as well.
So we still got a little bit of work cut out for us.
Let's take a quick break and then tackle those tasks in the next section.