How to improve form validation and process a form

Welcome to Part II of Understanding Forms where we build a form with plain HTML and PHP to prepare you for understanding why the Drupal form API is so great. Okay. In part I, we covered creating a form, and then we looked at formatting the form giving the forms some look and feel.

We then took a look at validating the form; in particular, how we grab the Variables that are Submitted when our form is Submitted. Then we started looking at Validating the form, some basic validation, to make sure people are inputting the correct data into our form. In this video, Part II, we're going to continue that and move on from there.

Okay. Let's go ahead and get started. In our next example, as I scroll back down to it, you can see we have the opening and closing PHP tags.

Inside of that we have a bunch of Code, and let's work through this line by line. First of all, we have a Comment, so a Comment isn't processed by PHP because it has these two forward slashes in front of it. That makes it so that we can make Comments to our Code so that later on we know what we we're doing.

The next line starts with an If Statement, so an If Statement allows us to say 'if this conditioning exists, then do this. If not, then do something else'. In this case, what we're going to do is check to see if the form has been Submitted, and we're going to do that by using the 'isset' Function for PHP.

What this does is checks to see if the Variable exists; the Variable doesn't have to have anything in it, but it just had to be defined at some point. When you Submit a form, all of your inputs are Submitted whether they have content or not; so, in this case, we're checking to see if the Submit button exists. What I've done in the Code is added a Value for a Submit button so when in our previous example you didn't see it as part of the 'var dump, but that's because it didn't have a Value, but now it does have Value, so you would see something in that var dump for Submit.

Scroll back up here. If the Post Variable Submit exists, then we want to continue on; so we'll continue on, you can see that this is indented, and it's indented to indicate that its part of this condition, so if this exists then we're going to start a new 'if' Statement which checks to see if there's any Value for the Name. Here is another 'if' Statement to check to see if there's been anything input for the Name.

We can't use the 'isset' Function because all of our Post Variables will exist even if they're empty. So we need to do a different check; in this case, what we're doing is checking to see if the Name Variable in the Post Array equals blank. The reason why there's two equals signs is because we want to check to make sure that it actually equals this; whereas in PHP, a single equal sign indicates that we want to set the Variable.

So this is a single equal we would be saying 'we want the Name Variable to equal nothing', which we don't. We just want to check to see if it's nothing; so that's why there are two equal signs there. Then there's this curly bracket that indicates that 'whatever comes next is going to happen if this condition is true.

' What we're doing here is setting a Variable on this next line, we're setting it, we're creating a Variable called fail and we're setting it to true, which means that it basically exists; that Variable exists. So later, we can use this 'isset' Function to check to see if it exists. The next line is the ending of your curly brackets, so that says that this 'if' Statement is done.

The next three lines are almost identical to the previous three lines except we're checking the Post E-mail Variable; everything else is the same. We're just setting the fail Variable to true, if it equals nothing. Following that is another 'if' Statement which checks to see if our fail is true, if it is true, then we're going to echo 'Submission failed', and the echo Statement is a way to print something to our screen.

So, if this condition doesn't exist and fail doesn't exist as a Variable even yet, then we're going to set the Code to continue by using this 'else' Statement. So you see the ending curly bracket here, and then else, and then a beginning curly bracket which means that everything after this will happen if this bit up here is false. So in this case, we want to save it 'Submission succeeded! Woot!'.

Let's sort of describe this in English here, so it's saying if the form has been Submitted and Name Variable is set to blank, then it fails. If the E-mail is set to blank, then it also fails. If it fails, if the form fails, then we want to go ahead and print out something to the screen that indicates such; so a little error message that says 'Submission failed!' , or if it didn't fail then we want to say it succeeded, and that's it.

So, we're not doing anything real complex here, but that gives us an idea of some basic Validation. Let's go ahead and take a look at that one more time. So I'm going to go ahead and refresh this page where we have a blank and I'm going to go ahead click Submit.

We have 'Submission failed!' that's because one of these is blank, so if I filled our Name but didn't' fill out E-mail and click Submit, it would fail. If I filled out E-mail and click Submit, it would also fail. But if I filled out both, then it will say that it succeeded.

So that's what we want there; that's some basic Validation. Now, let's go to the next step which is improving the usability of our form. So in this form when something doesn't work, submission failed, we're not getting the User any indication of what went wrong with their form.

So, if we wanted this to be an ideal form we would do several things to give the User some more information. First of all, we want to put some information at the top of the page which indicates what inputs weren't Validated properly, so if the Name and the E-mail weren't validated properly, we want to specify that in some text at the top of the screen, so that as soon as the User sees the page they know that something went wrong and where they need to look for it. To make it even easier, we should add some styling to the input that indicates that that input has an error in it somehow.

So we'll do that by adding it two pixel, red border, around the inputs. Finally, we should indicate which elements we require before they even Submit it. So, a typical convention for that is a little asterisk next to the label of the input.

So let's go ahead and take a look at how we're going to do that with our Code. Let's start out by taking a look at our Validation Script. So, we have something very similar to what we have before, so you can see the basic elements from our last examples, so if the form is Submitted and then if the Name does not exist, if the E-mail doesn't exist, if it fails or if it doesn't fail do this.

So, you see the same sort of basic scaffolding is there for our Validation, but we need to add a few more things. Here is our first line of difference which is, we're setting a Variable to a Class Name, so this Class will be added to the input for the Name if it doesn't validate properly. Now I added spaces to either side of the Class so that when it gets added in the PHP that we make sure that we have at least one space between the Classes so they don't look like they're right next to each other; this is just one way I found to prevent errors.

After that, we have a new Variable called the errors and what we're doing is adding some content to it, which gives the User information about where their validation went wrong. So in this case, you're adding a Div which says 'Please supply Name'; the dot equal sign is a way to add additional information to a String Variable so in this case, this could be rewritten errors equals errors and then a period and then the Div that we see right here. But this is just short hand.

So you can see that these two items are pretty much duplicated here; here we're creating Variable called E-mail error Class, and then we're adding some content to the errors Variable by using the dot equals sign. The only difference is that the Name of the Variable is different, and the content is slightly different as well. We continue on and in the first line has changed slightly; it says 'Submission failed' and here's why, and then we input the errors using the dot operator.

Now the dot just brings two Strings together into one. So, instead of having to use the Echo Statement twice, we just use it once, and then use the dot. On the next lines, what we're doing is creating new Variables and assigning to them the Value of the forms submission that was just made; the reason we do this is because we want to set the default Value of the form to be what we submitted.

You may have noticed from previous submission that the form input go blank whenever we Submit, so let me go ahead and go back to our previous example and show you what I mean. So if I put in some information for Name but not for E-mail and click Submit, it says that the 'Submission Failed!', but there's no content in this Name input. And that's a usability problem, because that means that I have to input that information again, and it gives me more chances to make a mistake.

What we're doing here is we're setting the Value of these different inputs, saving it to it, so that we can use them later as default Values if the form fails. If it succeeds, we want them to clear out again, because the User may want to submit something else. So, that's what we're doing up here; let's go ahead and see how we use that content in our Code.

At the start we have our label but we've added a new bit to it which is the Spn Class equals required and then an asterisk and then the back slash 'spn'. What we're doing here is using a common convention of using an asterisk to indicate that this input is required and if we scroll up here between the style tags you can see a new Class called required; we're giving it a color of red, and we're giving it a little padding on the right, so it's not right bumped up next to label. If we move on to the next sign, we can see that this Div wrapped around an input so we have the beginning the Div tag and the end of the Div tag and this isn't different from our previous example, but what is that we're using PHP here to add that error Class that we created, so we have the PHP opening tag, the echo Statement and the Variable that gives this an error Class if it didn't validate properly.

So if we scroll back up here to Name here error Class, we can see here that it only gets set to error if the Post Name equals blank; otherwise, nothing will get printed there, and that's totally fine. If we go to the next line, we see that the onl ...

Read the last half of the transcript