7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 9Length: 53 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.3 Required vs. Optional Fields

There are several ways to make sure the required fields are filled in: you can use JavaScript on the front-end or you can handle it on the back-end. In this lesson, we'll do back-end validation using PHP.

2.3 Required vs. Optional Fields

Now that we've got some of the security stuff out of the way. We can go ahead and start to talk about the next topic, which we're actually gonna be spending most of our time throughout the rest of the course talking about and that's validations. Now, there's several different types of validations that we can do when it comes to forms. I'm gonna show you some of the more common ones to keep in mind as you're starting to add things like forms to your website. Now, I have made one small change just to make things a little bit easier to see as we go along. I've added the input names down here to our echos, so I have name, email, and comments. So that you can always see what was submitted in that form for each of those fields. So the first thing I wanna be able to do now is I want to be able to talk about Validations on a kind of required and optional basis. So, what I want to do, is I want to show the end user that a particular field is required and then enforce that. And if they don't submit something that's required, I wanna let them know. So how do we typically do that when it comes to forms on web applications is we usually put like an asterisk or something next to that input field, typically, red. So that's where we're gonna add in right now. So right now, for this example, I want to make sure that the name is required, as well as comments. And we'll just leave email as optional for now. So there's a couple of different ways we can do that. Typically, what I like to do is, I will create a span. And this span is going to have a class attached to it, which we'll go ahead and fill in in just a moment. But what I'm gonna do is I'm gonna say class is gonna be equal to, we're gonna call this error. You could call it required or something like that, that would be fine. And then inside there we're gonna put in a little asterisk, as you can see right here. Now, I'm going to save that. I'm gonna come up to the top here. And this is not very good practice, so if you were to obviously be creating a production level application, you'd probably want to create a style sheets in separate files for CSS or what have you. But in this particular case, since this is a very simple example, I'm just going to define my styles section right here in the header. And in here I'm going to define one class, which is going to be error or whatever you called it, and I'm simply going to say that the color is going to be red. Let's go ahead and save that. So if I refresh my page now, you can see I get this little red asterisks, which typically means that something is required. So I'm gonna go ahead and do the same thing for comments. So let's go ahead and copy that. And just for now, I'm gonna start to kind of try to spread these things a little bit so it's a little bit easier to read on my resolution. And I'm gonna put this also on comments. So I'll go ahead and paste this in like that. So let's go ahead and save and we'll refresh. And so now, you can kind of see that we have our name and comments as required. So how can we handle this? Well, there's several different ways that we could do this and a lot of times in web applications these days, a lot of the form validation is done on the front-end. Meaning it's using some sort of JavaScript or jQuery framework or something that's doing data validations on your form. Now, you can absolutely do that, but it's also not a bad idea to be doing those validations on the Back-End, as well. Because if somebody finds a way to skirt around your UI, you still wanna be protecting your application, protecting your data on the Back-End, as well. So let's go ahead and start to introduce one way that you could handle these data validations. So what I would like to do now is, I want to kinda modify some of our code up here at the top. And what I wanna do is I'm gonna create a couple new variables. I'm going to create a new variable that's gonna hold an error that would be associated with some of our required inputs. So I have nameError is gonna be one. And then I'm also gonna have a common error. So I'm gonna set this equal to commentError, and then I'm gonna set these both equal to empty. So both of these things are gonna be the empty string. So, basically, what's gonna happen here is, I want to validate the data for both of those fields. And if for some reason something is set improperly, then I want to set the errors here and display that to the end user. And how am I gonna display that? Well, basically, what I'm gonna do now is, in here next to this asterisks, I'm gonna put in a little bit of php. And what I wanna show in here is I'm going to echo my nameError here by the name, and I'll save that. And I'll also copy this little section here. And I will drop down and put this next to my comment, as well. Only this time this is going to be the commentError. So we'll go ahead and save that. So if I refresh the page, you're gonna see nothing happens, although, I seemed to have messed that up just a little bit. I have an extra little bracket here, so let's go ahead and save that again. We'll refresh and here we go. So now we're all good, but nothing really happens yet. So if I were to try to submit this right now it's gonna go through and I'm not showing anything. So I need to be able to assign an error to these, so I need to be able to do some sort of checking. So here's where the validation comes in now. Once again, using PHP, using any language, there's many different ways that you can do this. What I like to try to do is I like to save myself the hassle of having to do a bunch of duplicate work all over the place. And kind of condense everything down into a function. And that's what I'm gonna do right now. So I'm gonna come down into my PHP block after I get this data, and I'm gonna write a little bit of a helper function. So I'm gonna create a function here. Let's call it validate_required_input, or you could call it whatever you want. And so what I wanna do is I wanna pass some data in here and make sure that it's valid. So what I wanna pass in here is, I'm gonna pass in an input value, which is gonna be whatever I'm pulling out of here that's required. So, in this case, I'm gonna be calling this function for name and for comments. So I'm gonna pass in the input value as well as the input name. And so what is input name? Well, input name is going to be basically a human-readable display name of what this particular field that I'm getting is supposed to represent. So you'll see how this is gonna work in just a minute. So what I wanna do now is, I want to do some very basic checking. So let's go ahead and create an error string. We're gonna default it to the empty string, and let's do a little bit of a check here. So we're gonna do Error = and we want to see if the input value is equal empty which means nothing was there. It was an empty string. If that's the case, then I want to return, or I wanna set to error, I wanna set $inputName, and we'll just concatenate onto here, is required, just like that. So you can kind of see where I'm going with this. And if it is not empty, then we'll just leave it as an empty string, and then we'll do return error. So, now, what I can do is, I can use my little validate required input function on my required values. And then I can set the results of this to one of these problems here. So I'm going to come down under name, and I'll say, name error is gonna be equal to, and I can call my function here. And I'm gonna in two values, I'm going to pass in name and then this is for the name property. And let's go ahead and save that. So you can kinda see where I'm going with this. So let's come back up here to our form. Let's go back in, and let's go ahead and hit Submit. And now, you can see when I hit Submit, we're gonna come down here, we're going to validate the required input of the value that was passed in for name, for the name property. And we're gonna see that because it's equal to null or the empty string, then we're going to return this error and put it right there next to name. So let's go ahead do the same thing for comments. Now, we've already got our code right here, so I can just reuse this. So we'll say, the comment error is going to be equal to validate required input. We wanna validate comments, and this is going to be for comments. Once again, we will save that. Let's go ahead and go back to our form. We'll just refresh to make sure it's all clean. And let's go ahead and hit Submit. So, now, you can see down here that we have name is required, comment is required. And if I were to fill one of these in, let's say Derek, and hit Submit again, you're gonna see I've submitted Derek. And this one was satisfactory, but this one was not for comments. So if I were to come in here and do Derek and hello, and Submit that, you're gonna see that both of them were successfully fulfilled. They validated properly and we got that data in there. So that's kind of helping to show you how you can put a very simple function in here to do some very simple validations. Now, obviously, I'm just displaying this data at the end of the screen down here. But there's also ways that you can check the data that's being passed in. And if for some reason you're not getting the data that is passed in, you can redirect back to a different page if your form is not on the same page where you're processing it. So there's a lot of different things you can do at this point. I'm simply displaying it here, so you can see the error. But there's a whole slew of different operations you can do to help direct your end user back to where they need to go to fix whatever problems they have introduced into your form.

Back to the top