Original subtitles

To add some basic validation

we can manage more state.

We can add enteredNameIsValid state

and a setEnteredNameIsValid state updating function

which we get from useState.

And, here, we now want to start with false

so that initially the entered name is not valid.

And we can then set this to true

if the entered name is a valid.

So therefore here in the form submission handler,

if the input is invalid, then I want to set,

setEnteredNameIsValid to false because it is not valid here.

If we make it past this if check,

we can set enteredNameIsValid to true

because if we make it past this if check,

the value is valid.

And now we could use enteredNameIsValid

to show an error message.

Here below this input,

inside this form control div,

we could add a paragraph where we, for example,

say, "Name must not be empty."

And I only want to show this paragraph

if enteredNameIsValid is false.

So if it's not valid.

Now we of course learned

how we can show content conditionally in React.

And hence, here we can apply what we learned.

We can check if not,

hence the exclamation mark, enteredNameIsValid.

And if that's the case, we output this paragraph.

Otherwise we don't do anything.

And we can give this paragraph a class name

of error-text because that's one

of the predefined CSS classes I added here in index CSS

for some basic styling.

With that, I get this error

but now I also get this error before I even start typing.

So maybe we instead want to start

with setting this to true initially.

So that enteredNameIsValid is true initially.

With that, if I save here

we don't see the error message initially,

but if I click submit, it now shows up.

So this would be one way

of adding basic validation to this form and of making sure

that we give the users some feedback if things go wrong.

Now I actually prepared more validation feedback

which we can add

and that affects this CSS class

which is added on that div, that form control clause.

I'm not using CSS modules here

but old-school CSS classes which are set up globally

and then simply used here.

I did prepare a special invalid CSS class

which affects the input look, and therefore

I want to swap form control for form control and invalid,

if this input is invalid.

So here I could add a const nameInputClasses

and that depends on whether the enteredNameIsValid.

If that's true, then I want to add just form control

as a class.

Otherwise I want to add form-control

and invalid as classes.

And now a class name here is dynamic

and points at nameInputClasses.

NameInputClasses.

So these classes, which we're deriving here.

And with that, if I save this,

if I reload, we got this look.

If I submit this empty form, I got this look

which looks a bit better.

Now that is some perfectly fine validation

which you could add, but it has some downsides

at which I now want to take a closer look.