Hello, in this video, we are going to continue with PHP forms. And we're going to be displaying error messages. So far what we have is these error messages display, but they are literally displayed in PHP just right at the top where all the check in occurs. And the problem with that is, it's fine. if let's say we don't have this reload, click Submit, it looks like it's next to the form because it is because there's nothing else on the page. But you might have something like this and sort of tight or you might have some sort of navigation bar at the top, which is very common.

So if you were to run that now, from what we know friend or something else that would, you know, produce an error, we would get basically this and you know, mine is two pages long and the errors are on the top. You don't know what it is related to. So we want to put these errors here. So we basically what we want to do is, you know a couple of different ways that you can do it. You can either put all the arrows after form. So like here, for example, you could put literally, like after every single part so we could put one here, I'm gonna put a span here.

And I'm actually gonna put a div because we want it to be an inline element, I mean the block level element and this will be arrow one. And for this what we are actually going to do, we are going to print out echo to some PHP and what we're going to echo out is an error. So what we are going to do is saying dollar diff will be the username, error, and by default it will be empty. And this will be password error. Again, by default we will be empty and this instead of doing all this, what we are going to do is say that username Mirror equals this now, go over that. And instead of doing this, we're going to say password ever equals this now.

Yeah, I guess we don't we need to reprint out the username. don't really need to do that. And yeah, the last thing we need to do is just printed out here for eka dollar username error, and we literally just need to do the same for password. So if we rerun that if I click Submit, as you can see using a empty password is empty. It's a lot better. It's a long, you know it's in line with everything else.

And if the arrow something different, maybe your username has to be between six and 52 cards, Maybe the user has tried to put in a username that's three characters, for example, then you could a username too short or not have the right length should be between six and a two. And all you will need to do is change the username error, and you'll get printed out. But at the moment, it's all there just had a quick glance, everything's just blending together. So what we're going to do is add a class to this, add a class and let's say era. class. And this is going to equal era.

And what we'll basically do is what are the head tag, so head and note head should not be in body, they should be separate. should be more like this. And in here, we're going to style so we're just doing you know style on the same page. Usually we're separating obviously feel To do that, let's do an exclusive a bit quicker and see dot error. And I'm literally just gonna say, color red. So it's going to change the text color to red.

Now, as you can see, we can immediately see that this stand out Sorry, no error, for example. And you can even make this italic, you can make it bold, you can make it bigger or smaller text probably a little smaller if we do font size. And let's see if we make this tempting. So this should be slightly smaller. As you can see, it's a little smaller, but you can see a lot that you can do and you can just reuse this error class for anywhere else that you could be poor in and error. And that's basically how you display error messages.

Feel free to style it and position it however you want. But that's it. If you have any questions, feel free to pop me a message and I want what I want you to do as an extra task is that we've checked if it's Basically empty. But beyond that not much more validation on each individual piece of data that we are getting on to, you know, check for lamp for example, but we're going to be looking at a bit more validation over the next few videos so feel free to check them out and yeah, I look forward to seeing you soon.