Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that we understand the basics of validations and some of the pitfalls that we can run into. I want us to talk about how we can display validation errors back to the user in a little bit better way than what we've been doing. So when we had our validation.php file you can see that we were just echoing out validation failed. That's all we were doing is just putting validation failed to the screen. That's not particularly useful. It was great for testing but it doesn't really allow us to have something that's user friendly when we start building a full web application. So, let's take that file, and let's just do Save As on it, and let's do validation errors.php.
We'll keep these same validation errors in here, but what we're going to do is start changing the messages. And what we want to do when someone submits a form is we want to find out all the errors in that data, in other words, we want to let the errors accumulate. We don't want to just let Return back to the user when we find our first error. If they made a mistake in the first name field, we don't want to go back and say, hey fix the first name. And they submit it and we say, oops, gotta fix the last name, then submit it again, right? We don't want to keep that back and forth ping pong going. We want to find out all of the errors, send them back to the user and say, okay, here are the five errors that were with your form, fix them all and send them all back to me again.
That's the better user experience. Best way to do that is to have errors equal an array, and then we can put our errors in this array and let them accumulate. And then once we're done running all of our validations, we can decide what we want to do with it. Just change this up here to validation, errors too just to match alright, so, the way that we'll add an error then, is that if this is not here, if value doesn't have a presence. Let's instead change this line to be errors and then we could just add to the end of it a new message, value can't be blank.
That's it. Now we've added a validation to it. Now in a real form, that wouldn't be value, that would be first name, that would be last name, city state zip. That kind of thing. Right? We've just been working with value here. But let's go ahead and think about this from the point of view of the application that we're eventually going to build. It's very useful instead of just saying that we're going to add to the end a single message that we tie it to the attribute. And we do that by just providing a key for it, so value here is equal to this, so we've now assigned a key and a value pair and made an associative array.
Value is the key, and then this is the message that goes with it. That's great, because then we know what fields these all tie to. We can see the sum total of the errors, see all of the messages. We also know what the errors were related to. So, let's just try that. Let's go back and let's make this not empty for a second. Let's say that it's going to fail validations by having an empty string here. And let me also just jump down here to the bottom where I was doing this with preg-match. And let's just remove that, that code. So, that's not there anymore.
Alright, there we go. So, now let's go back and instead of validations, let's validation errors. Okay. I got no errors here, because I didn't display anything. That's just at the very end here. Let's just do a print r of dollar sign errors, and let's see what we get back. And there it is, value, value can't be blank. So, this raises the issue though, what do we do after we have our errors? Well, we could redirect the user, we could have some PHP code. I'll drop down here. And let's say, if it's not empty then we have a problem. So, if our array is not empty, then we know that we need to do something. So, that could be redirect, redirect two, first page, PHP for example. The only problem with this is that our errors that we just set here would get lost.
They don't survive the redirect. Remember, the redirect makes a new request to the web server. So, this variable will be unset at that point, unless we put them in the get string, for example, on the redirect, put question mark and then errors equal. That's pretty ugly, really don't want to do that. We could store them in cookies or sessions, we haven't talked about that yet, we'll get to that in the next chapter. That is a possibility, but I think instead of doing that, we have a couple of other options. We could instead include the form again, if we're on a two page setup, so we're submitting to another page, well we could include the form again. And that would then have access to our errors variable to display or then if not, we could include success.php.
So, that would show two different pages, from this form processing page. That would work. The other possibility is that we could it on a single page. That's the approach that I'm going to use. I'm just going to take all of this, and let's just comment it out. There we go. And here we go. If, on the same page, if it's not empty, then let's display some stuff. Let's display div class error. Please fix the following errors. And then I use a UL for an un-ordered list. And all the list will list each of the error messages. Key and the error, it's an associative array.
So I'm listing all the messages out, one after another. Let's try that. I'm going to take this print r away. Let's just see how that works. Come back, reload our page. There we go. Please fix the following errors. Value can't be blank. Much more user friendly right? And this can be turned into a function, that's not hard to do. You might want to pause the movie and try it on your own just to see if you can do it. Let's call it form errors and we'll pass it in errors. And the default will be a empty array. And then all of this code will go inside of there. I'll get my indentation right.
But instead of echoing out, I've told you that that's a bad idea. It's much better to do output equals and then output. We'll add that to our output each time. And every time we have an echo, I'm just going to take that output, put that in there instead. And then once it's all done, then we're going to return our output. Turn dollar sign output. Now I see a problem here in my logic, which is the output might not get set. So, I want to start out with an empty $Output, to make sure that it has an initial value of just an empty string.
Okay? So there we go. Now it'll take all that, it'll add it all up, and I can now call it by saying echo form errors, and I'll pass it in my errors string. Try that, go back and reload it. And there we go. So, now I've got a function that's reusable. I can put that in my functions file. And then include it or require it on all different pages. And I'll be able to call for all my form errors. It'll loop through each and every one of the errors, one after another, and report them back to the user. And this is the process that we'll go through when we build a web application. Now you could go even further with this.
You could have the array key exists function, to find out if a key exists in that errors array. So, if for example the name field had a problem, we could look for that key. If there's a message associated with it, we'll find a key there. So, if we find that the key for name inside the errors, then we could output something, maybe it puts little arrows, that's what I've done here. Little arrows that might go next to the field, showing that there's an error there or maybe it adds a class to the field itself, so that it can be displayed. And read, or have a red border around it, something like that.
This level is customization really is up to you. The main thing is that I want you to understand the basic idea of how we're letting these errors accumulate. And then we want to display them all back to the user at the same time, in a nice, user friendly way.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101341 Viewers
61 Video lessons · 88099 Viewers
71 Video lessons · 71950 Viewers
56 Video lessons · 103769 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.