Now we got that entered player name,
and I'll get rid of console log,
because I'm not getting that player named to log it,
instead I now want to validate it,
I wanna check if something valid was entered,
and if that was the case,
then, I wanna set it as a player name here
for the first or the second player.
And for this we'll also need to find out
whether we're editing the first or second player,
but that will be the next step.
First of all, let's validate the input.
And for this here, when I get the player names,
so when I get the value that was entered,
I'll call another method on that string that we get back.
Get will give us a string here
because there's input element
which we're getting the value from,
will yield as a string.
And on that string that we get back,
we can call the trim method.
That is a built in method
which is available on all strings in JavaScript,
and what's trimmed does is it's trims excess white space.
If you will have a string that has a couple of blanks,
and then maybe a couple of blanks after the word itself,
then trim we'll get rid of all that white space
in front and after the actual content.
Now, if your content contains a white space,
that will be preserved, so that will not be deleted.
It's really just about white space in front
or after your content.
Trim we'll get rid of it.
And I'm doing that so that if the user entered nothing
but a bunch of blanks,
I actually get an empty string instead,
because trim does not find any content
and hence gets rid of all that white space.
And I wanna do that because player names,
of course, should not be just a bunch of white space
and they should also not be white space,
then some name and then more of white space.
So calling trim here is good.
This also means that we end up with an empty string
if the user did not enter anything
except for a bunch of blanks.
So if I just enter a bunch of blanks
by holding down the space key,
then I technically have a lot of characters
but no actual content.
After trim, it will be an empty string.
And therefore we can now add some validation
and check if we maybe wanna show an error to the user
prompting the user to enter something valid.
Now we were able to do that with HTML attributes as well.
On input, we can add required.
You might remember this attribute.
There also were a couple of other HTML attributes
that we could add.
The problem just is if I add required,
then indeed I get a warning,
if I have an empty input,
but if I enter a bunch of blanks, then I can submit this.
Now I don't get a warning.
And as I just explained,
a bunch of blanks is also not acceptable.
So we can add required here,
but I still wanna also add some extra validation
with JavaScript after trimming the input
just to double check that we have a valid value.
Now since we get an empty string,
if we trimmed this and we had only blanks in there,
we can now use a if check to run some code conditionally,
and check if not entered player name.
Now what am I doing here?
We learned about this concept
of something being truthy or falsy,
I could check if entered player name
is equal to an empty string
and then execute some code if that's the case.
That would be totally fine.
But we can write this in a shorter way
by just writing if not entered player name.
Because an empty string is considered
a falsy value in JavaScript.
Which means it yields false
if you was in a place where a Boolean is expected,
which is the case for a if statement.
So here this entered player name,
will be treated as false.
And hence here I can check if entered player name
is not true, so if it is false,
if this was an empty string and then execute some code
if that's the case.
That's why the exclamation mark is important.
If I check for just if entered player name,
then I go in there, if it's truthy.
So if it's anything but an empty string.
And of course, I don't wanna show a warning
if that's the case,
but only if it's not true, if it's falsy.
So that's why I have not entered player name,
in case that's too confusing as mentioned,
you could also just check if that is maybe empty like that.
This would also be fine.
You can also use just two equal signs here,
but it is a best practice to always use free equal signs
if checking for equality
unless you know that you are comparing different types
of values and you really just wanna check
for value equality
and you don't care about type equality.
I did talk about the difference of two and three equal signs
in the previous sections.
Now here we execute code
if the entered player name is falsy.
And what do I wanna do in here?
I wanna show an error, an error message.
And we could do that by executing this alert function,
which we used before in this course.
But I wanna show it on the page, here in that overlay,
maybe below the input field.
And therefore if we need to add an extra HTML element there
to which we can get access in JavaScript
where we can inject our error message
that we might wanna display.
And for this in index HTML,
I'll actually add a new HTML element inside of my form here.
Here between that div with my foreign control
and my div that holds my buttons,
I'll add a paragraph which is empty initially,
but where I will add an ID of config-errors.
If I saved that,
of course, we don't see that paragraph because it's empty.
We see just some empty space that was added because of it
but that doesn't hurt us here.
Now we can get access to that paragraph
by using that ID in app JS,
because that is to place where I'm gathering
all these elements.
And here, let's say here after getting access to the form,
I will get access to my errors output element
by using document get element by ID
and passing that ID that we just added to it.
Now we can use this element
to show some error message on the screen from config JS.
So here in this if block,
we can now use this brand new errors output element
that we just added
and set the text content equal to,
please enter a valid name.
Of course you can use any texts you want here.
I also then wanna do something important,
I wanna return thereafter.
Now we do return in functions
if we wanna pass a value to the place
where the function was executed.
But that's not what I wanna do here.
I'm not returning any value,
I'm just executing return like this
without passing a value thereafter.
Because return also has another function.
When you execute return,
you stop the execution of the function
in which you call it.
So lines there after which we will see when add,
will not be executed if return was executed.
And that's what I wanna achieve here.
If the user entered something invalid
and I'm showing this warning or this error to the user,
then I don't wanna execute any other code
in this function.
Because whilst at the moment we have no other code here,
we will soon write some code
that handles all that user input in case it was valid.
Since that's not the case here,
I don't wanna execute the code which will soon add,
and hence instead,
with helpful for return,
we'll stop the function execution after this line of code,
but only if we make it into the is if block.
So only if the user input is not valid.
And then with that, if you save all your code,
if you try to submit just a bunch of blanks here,
you get this please enter a valid name error message.
And that's not even all I wanna do here.
Instead, I also wanna add some styling
so that this is highlighted that we have an error here.
For this I wanna add an extra CSS class, to this div here,
to this form control div,
a extra CSS class that will then change
the look of the label and the input field
and we'll have to add that the styles for this as well.
Extra CSS class which we could name error.
And for this of course,
we need to get access to this div in this form.
Now how can we get access?
There are different ways.
I don't wanna use query selector
because we have multiple div's on this page.
And query selector would select the first one,
which would be the backdrop, that's not the correct one.
We could select by class, but even there,
we could have multiple form controls and that's different,
not necessarily a safe way of doing it.
Of course we could add an ID here and select by ID,
and that's always useful,
but here I don't wanna do that either.
Instead, I know that in this case,
I only have one form control div in that form.
And hence I wanna practice a little bit of traversing,
a little bit of DOM traversal,
and actually dive into the first child of my form here,
since that is the div I wanna add my CSS class to.
So in conflict JS,
we know that the form element is stored in event target
because the form is what's submitted.
So event target is the form element.
And I then know that the div
to which I wanna add my CSS class,
is the first element in that form.
So what I can do here is I can access event target
and then first element child to traverse the DOM
to dive into that form and select the first element
that's found in there.
So the first HTML element child that's found in there,
and that will be the div.
And on this first element child element,
I wanna add my class, my CSS class.
Now we learned before that adding and removing CSS classes
is easily done with help of the class list property,
which exists on all HTML elements,
which you use in JavaScript.
And on class list,
you have methods like add to add a CSS class.
Alternatively, we could set class name equal to the class
that we wanna add to the element,
but this will overwrite any classes
that might already be on that element.
And in this case,
I already have the form control class on that div,
and I don't wanna override that,
instead I just wanna add the brand new error class to it.
Hence, class list add,
is the better way of adding a CSS class here,
and let's say it's the error class which we wanna add.
With that if we save all of this,
if I actually opened the div tools here,
click on add it and then inspect my div here,
here it is this div,
if I enter a bunch of blanks and click confirm,
watch this div here on the right,
you see error was added.
At the moment it never disappears,
and it also doesn't change anything visually
since we haven't added any CSS styles for it,
but it's there.
And now we can use this class to add some extra styling.
But for this I'll go back to configuration CSS here
and add some extra errors style that should show up
if things go wrong.
For this let's say here after form control input,
I'll select error.
So this CSS class which we add,
and select any input elements
that we find inside of a container
that has the error class.
Because it will be that div that has the error class,
and I wanna select the input
that's inside of that container.
Hence I'm using this kind of CSS selector to select an input
inside of a container with the error class.
And then I'll set the border color to RGB136,
2, 2, which is a red color.
And I'll set the text color to the same red.
And I'll give it a background color of RGB,
two, five, three, two, one, nine, two, one, nine,
which is a light red color.
I'll also target the label like this,
and give this a color of, well, the same red basically.
With that, if I saved this,
now this is highlighted and it's a bit easier
to see that it's this input which is wrong,
of course, a bit redundant since it's the only input here,
but a good practice of how we can select elements
with DOM traversal.
So by diving into child elements
and how we can add classes conditionally.
And that's a huge step forward.
Now, I just wanna make sure that if I close this
and I then start editing again,
I reset that status and I get rid of that error class.
And that's also something we can do with JavaScript here
in the close player config function,
which executes when we do close this overlay.
In there in the end,
I wanna reset what's entered in the form
and I wanna get rid of that error class.
Now to get rid of that error class,
we can use that form element, which has defined an app JS,
which points at our form,
and here we can then again, select the first element child,
which is that div,
and use the class list to remove the error class
if it should exist there.
And if it doesn't exist there, remove bold crash,
it just won't do anything in that case,
which is fine as well.
I also wanna clear the input,
and for that, we could change the input, the button here,
button type, to reset instead of button.
If I do that, reload, enter a bunch of blanks,
click confirm and click cancel, we still close,
and this is now a reset.
We don't have the blanks in there anymore.
Alternatively, we could also do it with JavaScript,
but I think using reset as a type here, is simply easier,
so I'll stick to that.
And with that, we can now enter something there.
But if I close this with cancel and I reopen it,
that's not there anymore.
And if we had errors and I cancel and reopen
either of the two, it's also gone.
And that's there for a good except for this error message,
which is of course still showing up.
We wanna get rid of that as well.
So when we close the player config,
besides getting rid of that error class,
we also should get rid of that error message,
and we can use this errors output element for that,
which we also used for setting
the message in the first place.
Here, I simply wanna set the text content
to an empty string.
And this will now clear the message,
the error message as well.
If we save that, I added this, add a bunch of blanks,
confirm, here's the error,
if I cancel this and reopen, both is gone.
And therefore that's working,
now let's make sure we also gather the entered username.
So we really do something useful with it,
and we then set the edited player here.