All language subtitles for 008 React To Lost Focus_en

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.