How do we deal with that?
Well, here we're saying if there is no success message and we use that with that exclamation mark,
if our response object does not have this success, then we want to deal in this block of code.
Let's deal first with the username error.
Let's look if the response,
remember this response is going to have the errors object.
In this errors object,
if we go to our file here, we are going to give a key of username.
So on this object, if there is a username, then we know we are in an error state for a username.
Before we do anything crazy, let's just console log "username error".
And we can do the same thing now when it comes to, not username, but food,
food error.
If the response object has this errors array
and in here we've got a key called favFood.
If that exists, then we want to console log "food error".
Is this making sense?
Let's go back to our browser.
Let's go to the console.
Let's actually access localhost:8000.
Let's now not include anything in here.
Let's send the details.
Success.
The data has been submitted.
Why is it doing that?
(sound effect: well, this is awkward)
Oh, I think I've actually spelled errors wrong.
That's my whole issue here.
Error should be ... let's just highlight everything here.
Error.
I think that's error.
Oh.
Okay.
So now let's refresh, clear the browser, and send ... username error.
Cannot read property favFood.
Okay.
So let's go here to our index file.
This will be very easy to fix.
Errors.
There we go.
Let's go back to our browser, refresh, send.
We get a username error and a food error.
Simple misspelling has caused so many issues. Anyway,
okay.
So now we know that our failure cases are working, which is really, really cool.
But now I want to start adding error messages.
So let's just finish this off very, very quickly.
We are almost done.
We don't just want to console it out to
the console, we actually want to code and affect some CSS.
So why don't we say in this case we know that we've got an error on the username, we access our username
input, which is the element itself.
We access the ClassList API, which you've seen before in this course and we want to add a class and
let's add a class of main, or
errorMain.
Let's scroll up to our CSS.
Let's define a class of errorMain and our errorMain class can just have a border
of 1 pixel solid red.
Very, very simple.
Save this.
Go to our browser, refresh everything, clear the console.
Send the data and there we go.
We've applied styling to that input element.
Right.
That red border.
Can you see it?
And we can do exactly the same thing with the food.
So let's scroll down, remove the console(),
we can grab our food input, access the classList API, add a class called errorMain.
If we save this, go to our browser refresh, try and send everything,
and now we get errors on both.
How awesome.
It's very, very quick, very intuitive, but I want to do more.
I also want to add a error message.
So why don't we add an error message?
Let's go here.
And in order to add an error message, if we look at our HTML,
we've only got an input
right?
But why don't we add dynamically a span element and within that span element we can have our error message.
Okay, so now let's create our error message.
All I want to do is I want to define a span element and we can dynamically create it by accessing the
createElement() method on the document itself.
And the element we want to create is a span.
I then want to put in our error message.
All we have to do is access our span, affect its innerHTML property, and we can use template literals
here.
If you don't know what they are,
please check out my JavaScript Course, but it's basically just a way that we can write text and variables
very easily.
The variables have to all be within this dollar curly braces format.
So we want to now access our response object.
And on here we've got our errors object, and we want to access our username because remember, if we
go to our file, we are basically accessing this - our errors "username" key and that's going to return us our
message.
Do you know what?
Because we are not even including text, we don't need template literals.
I just realized that now.
So we can just do this - very, very simple.
Before I continue
why don't we look at the browser and see this error message?
Well, let me ask you this.
Do you think the error message will display in its current form?
It won't. Because we've created the span element, but we haven't put it anywhere.
It's floating in space.
We haven't told it where it belongs.
So if we go to the browser and submit now, we still don't see an error message.
In order for us to see the error message, we have to attach the span to something.
And if we look at our HTML code, why don't we append it to this main usernameWrapper div?
It's super, super easy.
All we have to do is we grab our divName element and we access this property called appendChild().
It really, really is this easy.
And all we want to do is we want to append our span to that div.
So if we go to the browser now, send, sorry, let's refresh and send.
We are now getting an error message.
"Your funky username is required."
Of course the styling is terrible, so why don't we add some styling?
Why don't we add a class?
We can access our span, access the classList API and we can add a class called error.
Why don't we do exactly the same thing but add another class called input.
So let's go to our browser.
Well, before I actually submit again, let's define these classes and you'll see why I'm doing two
classes in a second.
So the first class I want to define here is error.
We can display inline.
And we can give it a color of red.
How's that?
Let's go
here.
Refresh.
Send.
There we go.
"Your funky username is required."
Let's do exactly the same thing now
for our food.
Let's define a span element,
createElement(),
the element we want to create is a span.
You're just going through the same process.
The span.innerHTML can be our response object. On here,
we've got our errors object with the favFood key.
Very, very simple.
Then we want to access the classList API,
we want to add an error class to this.
And an input class to this.
And of course we don't want to access our divName.
We want to access our divFood wrapper now, and we want to append this span element to it.
So now if we go to the browser, we send, we're getting two error messages
now! How awesome is this, my dear students?
But you'll notice a problem now because the problem is if the user clicks again, we just duplicating
our messages and it's going to start getting very, very messy.
Well, actually, let me show you the problem in another way.
Let's say the user first fills in his username but forgets the food.
Clicks send.
We've got an error.
If the user now deletes username, includes food and clicks send, we are still getting that invalid state on
the food input and it shouldn't be like that.
So in a way we need to tell the browser to refresh everything every time the user clicks on send.
As it turns out, it's very, very easy.
And this is why I put ... if you scroll up in our HTML ... this is why I put the class of "input" on all of these
inputs, and it's the reason we added a class of input to these spans, because this is the issue I'm
going to be dealing with right now.
Right.
So before we start dealing with the success cases and the failure cases, let's reformat the form every
time it's submitted, right?
We want to almost start from scratch again.
So in order to do that, let's grab all of our inputs and we can do that by document
getElementsByClassName(), and the class name we've given them all is input, right?
And this returns a collection so we can use the for...of loop, which is very, very intuitive.
We just grabbing every item in that collection and then through each iteration we get access to each
item and we put that item in a variable called item.
Let me show you what I mean.
So we're going to grab each item in the collection.
We're going to access the classList API, but this time I want to remove all errors, right?
All error messages.
So I'm going to remove the errorMain class and we're going to remove the error class.
We save this, we go to the browser,
let's refresh.
In order to test this, let's send this.
We get our first error message, which is fine.
Let's send it again.
Now we've got another problem because that span is still showing, right, "Your funky username is required."
We've removed the styling, the red is gone, but the actual span is still there.
So what we need to do is actually, in our CSS file here, we need to grab our span and set its display
property to none.
Let's save this.
Now we can refresh again.
Let's send.
Let's click send again.
And there we go.
We still an error state, but we're not duplicating the spans.
Let's now fill in the first item, send, and it's entirely fixed.
We've removed the red border.
We've removed the error message entirely.
And now the user can send, and we've got a success.
But, you know what we haven't done? We haven't styled the success message in any way.
Can you figure out how to style that?
Well, it's very simple.
All we have to do is create a class.
Let's just call it success.
Uh, we've done text-align, width, margin here.
Why don't we just copy/paste?
Right.
We can give it a color of green.
It should be width.
And all we have to do ... it should work, is in the success case
we want to access our form, access our classList API, and we want to add a class of, you guessed
it, success.
Let's save this, go to the browser,
go back.
Refresh, click send.
And there we go.
"Success.
The data has been submitted to the server." And what's really cool, we can even scroll up here.
You know, you can play around with it, give it a nice background color of light green.
Padding 20 pixels.
Let's submit random text.
Send.
And there we go.
It's even a much more bolder success message.
Don't even have to make it that wide.
Why don't we do it
50%.
Let's go to the browser, send.
How awesome is this
my dear students. I know, I know this has been a very long lecture, but I want you to at least get
a feel for how server side code works, how you can start creating error messages, checking data on
the server side,
sending back a response, and the browser takes that response,
manipulating JavaScript, displaying things to the screen - it really has been an interesting example.
I know I've had a lot of fun putting it together.
I love coding but don't get lost in all the detail.
Let's just walk through it very, very quickly.
We've got our CSS at the top, not much there.
Then we've got a very simple HTML form.
Again, nothing complicated.
We just wrap each widget in a div.
We gave a few class names and IDs.
We then have our script and we use the script tag because we're using AJAX and to use AJAX we need to
use JavaScript.
We used AJAX in the form of this XHR object. And then we completed our 3 steps.
We opened up the request.
We then defined what happened on a successful request, aka we are listening for the ready state of 4
and the status of 200.
When that happens, we check whether we are in a success state or failure state, and then we obviously
do different things depending on that.
And finally, step 3 of the AJAX is to send our request to a server when the user submits the form.
Very simple. I hope
it's intuitive.
Don't worry too much about the syntax and the code and how to write it.
That comes with a lot of practice with, you know, working with server side code.
And I don't want to get complicated with server side code in this course.
I keep saying that. But this should give you enough to get started.
I hope you're having a lot of fun, and I'll see you in the next lecture because I still want to talk about server
side code in a bit more detail.
Adios. ðŸ‘‹