Original subtitles

So in this input here,

we might want to add some validation

so that, for example,

I can't submit this form when the input is empty.

Because then I would get two empty logs here,

and whilst we only have logs here, in most cases,

we would probably send that data to a server

and we don't wanna send empty data to the server.

Though I also already wanna say the client-side validation,

which we're doing here, where we validate in the browser,

isn't everything you should be doing.

If you have a real website, a real web application

which you're building, then validating in the browser

as we are about to add it here is great

for the user experience

because you give the user a direct feedback,

but you also always should validates the input

on the server, because this code here on the browser,

this can all be edited by your users.

I can dive into the source code

and changed this raw JavaScript code.

So this is not reliable.

It's just there for providing a good user experience.

It's not a security mechanism or anything like that.

And I have an article and video on that,

which you'll find attached,

which also might be helpful when it comes to JavaScript

in the browser and the security implications

of doing things in JavaScript in the browser.

But that's a side note.

Let's come back to how we could validate this.

How could we make sure that we, for example, show an error

and don't log the values to the console

if we try to submit an empty field?

Well, of course, we can go to the formSubmissionHandler,

and there we can add an if-check.

Here we can add an if-check and we can then simply check

if the enteredName,

and here I'll go with that state value now,

if that enteredName is empty maybe.

We also might want to call trim on that enteredName string

to remove any excess white space

at the beginning and end.

Now, of course, the exact validation logic you need

depends on the form input value you are expecting.

If it's just some name, you might be fine

with just checking that it's not empty;

for an email address,

you might wanna validate that it's a valid email.

But I wanna keep it simple here,

so I'm just checking for it being empty or not.

Now, if it is empty, if we have an empty string here,

then I don't want to continue with the next lines

of code.

Because here we are using the entered value,

and I don't want to do that if that value is empty.

Hence here, I wanna return,

which returns from this overall function

and therefore cancels the function execution.

Now, the rest of this function will not be executed.

So if we saved this and I reload to clear my log,

if I now hit Submit here, you see nothing gets added here,

not even empty console logs.

There's nothing here.

If I do enter something, though, we still see that,

so that's working.

But what we're not doing is

we're not showing the user feedback.

We're not showing the user that something went wrong.

Of course, users don't have the developer tools open.

So if I'm a user visiting this page and I click Submit,

I don't know if anything happened

or if my input here is invalid.

I might be able to guess that an empty input is invalid,

but I get no feedback from the app.

So that's why we might want to show some error feedback.

And we can, of course, implement such a functionality

with React as well.