We've now got a pretty solid way of making sure that we can get access to the values out of the form
once the user has submitted it we're now going to move back to the validation side of things.
If you recall whenever we refreshed the document we immediately see some validation errors appear to
the user because our inputs are completely empty.
If we enter in some text.
Well the validation runs again with every single keystroke that we make.
And as soon as we start putting in some text we no longer feel the validation rule that checks to see
if any content exists for each of these properties.
So remember the only validation we have right now is to assert that each input has some value assigned
to it.
So clearly this is not the best user experience right now.
We really don't want to show any error message to the user until after they have entered some text and
then tabbed away.
So let's be really clear about that whenever the input first renders on the screen.
So like right now is when I really want to not show any Vitt any error message whatsoever.
It's only once the user starts typing in here and then tabs out or selects another field.
For example I want you to imagine for a second that we still had a validation rule to assert that this
character or the string in here must be at least say three characters long.
So if I start entering character 1 in character 2 like that I do not want to show an error message to
the user just because it's fewer than three characters.
I only want to show that error message once I have selected away from that input really selecting away
from the input means that the user thinks that they're kind of done with that particular input.
And so that makes it a appropriate time to actually run the validation and show an error message to
the user.
So let's review some terminology that it's going to help us figure out exactly what redux form is doing
internally.
So there's three different states of our form that we need to be aware of for each and every field that
we create.
The first state is how every single input is rendered by default.
Like when it first appears on the screen we consider that to be the pristine state so pristine meaning
no input has touched it yet and the user has not yet selected it.
The next one is what's really important for us for solving the error that we're seeing right now and
that is the touch property.
Touch means that a user has selected or focused an input and then focused out of the input.
You can imagine touched as meaning that the user has done some work on this field and now considers
it to be complete.
So for us we really want to get a better handle on when a form or a field gets put into the touch state.
So that would be the state where we render the page I enter some text and then focus away.
I would now consider this input right here to be in the Touched state finally is the invalid state.
And so that's clearly the one where we got some error message and we need to show the message to the
user in some fashion.
So for us what we really care about right now is making sure that we can get our error message display
on here only once the field has entered the Touched state.
So let's go back over to our code editor and I'm going to go up to the render field helper method.
OK so here's render field right here.
So recall that right now we are always showing the error message no matter what.
But we want to show that error message only after the user has touched the field to do so.
We're going to add a ternary expression to this line right here.
So we'll say field dot Mehta touched touched and then a question mark then feel better air than a colon
and then an empty string.
Just a reminder on Turnier expressions with a turner expression everything before the question mark
is evaluated.
If this returns a truthy value then the entire expression resolves with whatever is in between the question
mark in the colon.
If the first part resolves with a falsie value then instead it's resolved with the second or the second
element after or I should say the first element after the colon.
So in this case the empty string right here.
So in effect we're saying if the user has touched this field then show the error.
If one exists.
Otherwise just show an empty string.
The other thing is to make note of this other Mitta property.
So we've already made use of the meta property.
Err right here we're making use of another one that's being tracked internally by redux form called
Dot touched so again touched means the user has focused this input and then focused away from it.
So let's see how we're doing now.
I'm going to save this file and refresh the page.
Now I do not see the error message appear on the screen but if I enter some text in TAB way everything
still fine.
However if I now tab away from this input it will enter the touch state and I would expect to see the
error message appear.
So this is a much more reasonable user experience because we're not just showing them the error message
right away.
We're waiting for them to give us essentially their best effort and then attempt to submit the form.
You'll also notice that if we go ahead and immediately try to submit the form that also causes all the
different fields to be put into the touch state as well.
And so if we refresh the page again and then click on submit.
Cool.
Looks like we're told hey you got to take care of these different validation errors before you go any
further.
So this is looking pretty good.
The last thing I want to take care of as far as validation goes is to make sure that maybe we give this
some red text.
Maybe the error messages should appear with red text and maybe the outlines are used and the inputs
themselves should appear with the red outline as opposed to Grey that it currently has.
So essentially just a little bit of styling to give some better communication to the user and draw their
IDE to the fields that need a little bit of help.
So let's take care of that formatting in the next section.