Maximilian: 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.