Instructor: Now up to this point
we're still on the left side
of this slide.
We are always validating
when a form is submitted.
We're not validating
when an input lost focus
or on every keystroke.
Now, of course, that could be fine.
That could be exactly
the behavior you want
but let's now explore
why we still might want
to tweak that behavior
in regards to certain aspects.
We have the entered name,
is valid state,
the entered name, value state
so to say
and the entered name, touch state
and still this behavior
isn't fully there
where I want it to be.
It's good that on submission
it now shows us this error
but for example,
it doesn't show as an error
if I click in there,
maybe type something
but then remove everything
and click out of there.
We know that this is invalid
because an empty input is not allowed
but we only show the user
this error message
when submit is clicked
and that might be too late.
That might not be
the best possible user experience.
I think it's better
to show the user this error
when the user had a chance
of working on this.
So if I click in there
and click out of there
and I leave it empty
I wanna see that error
that tells me that this
is then not allowed
because I had a chance of editing it,
I didn't do that.
Now I should probably get that error
that tells me,
hey you need to enter something here.
So therefore we might want to also
validate on blur as it's called,
which means when the input loses focus
and that's not too difficult
besides the on change handler
we can also add the on blur handler
and that's a built in event
which fires whenever
this input loses focus.
Hence we can add a new function here.
Let's say the name input blur handler
where we also get the default event
and then I wanna bind this
name input blur handler
to my input here.
Now in the name input blur handler,
I wanna do two things
for one, I wanna set
entered name touch to true
because if our input loses focus,
it definitely was touched.
The user had a chance of working on it
but in addition,
we might want to start validation here.
So we might wanna run this logic again
so we can copy this code here
and add that in the name
and put blur handler.
So did we check the entered name
which we update
with every keystroke still
and we set entered name
is valid, false
if that name is invalid.
Now we do have code duplication here
and we'll take care about that
in a second
but for the moment
let's take this approach here.
Let's duplicate the code.
It's fine for a second.
So now with that,
if I click in there
and click out of there,
I also get my warning here
which I would say
is a better user experience
but now we maybe want to
give the user a chance
of fixing this error
and if I now start typing here
it would be great
if this error disappears
as soon as I entered a valid value.
So that I as a user know,
once I did reach a valid value,
once I can stop typing for example
and that's why we also
might want to validate
on every keystroke now
but only in combination with
the other validation steps
we integrated before
because just validating
on every keystroke alone
would probably not be good.
We would be (indistinct) errors
at users without them having a chance
of providing something valid first
but now that we do actually
allow the user to provide
a valid value first,
by listening to the lost focus
and the form submission.
Now that we're doing that,
we also wanna give the user
a chance of getting immediate feedback,
direct feedback on every keystroke
when it comes to fixing
that invalid value
so that's what we're going to do now.