Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
In this video we are going to demonstrate how to alert the user to which fields are required and make sure our form validation is checking those fields.
-
0:00
Now that we have a form collecting all the information we want,
-
0:03
which fields do we want to be required before the form is processed?
-
0:06
And which fields do we want to be optional?
-
0:09
Let's take a look at which fields we have.
-
0:11
Name, email, category, title,
-
0:14
format, genre, year, and additional details.
-
0:20
First, we want to make sure we know who is sending this suggestion.
-
0:24
So we will want name and email to be required.
-
0:28
Next, the two main details we need to know are category and title.
-
0:34
If we don't actually have this item yet but want to suggest to ourselves that we
-
0:38
purchase this item in the future, we don't need to worry about any of the other
-
0:42
details until we actually purchased the item and add it to our library.
-
0:46
To keep it simple as possible, the sender sets a suggestion,
-
0:50
let's keep the rest of this fields optional.
-
0:53
Now, how do we let our users know which fields are required before they
-
0:57
push the submit button and see an error?
-
1:01
There are many different ways to accomplish this, and
-
1:04
it really boils down to design.
-
1:06
The only requirement is that we signify to the user
-
1:09
which fields we require be filled out before the form will process.
-
1:14
For this project, I'm going to make it really simple and straightforward.
-
1:18
I'm going to add the word, required, to each required element.
-
1:22
Back in suggest.php, let's find our field label for name.
-
1:33
Let's add parenthesis with the word required.
-
1:42
Now let's copy and paste this to email category and title.
-
1:57
Now let's preview this page in the browser.
-
2:01
We see a required after each of the labels on our require fields.
-
2:05
Great, now our users know which fields are required to be filled out.
-
2:10
Next, we need to make sure that our form is processing all these new fields we
-
2:14
added and requiring the fields that should be required.
-
2:18
Let's go back to the top of our suggest.php file.
-
2:22
First off, we need to setup variables for all the new fields we added.
-
2:27
So let's copy the line with our name variable and
-
2:30
place it below our email address.
-
2:34
We'll need category, title, format, genre, and year
-
2:50
Title, Format,
-
3:02
Genre, And year.
-
3:15
A year is actually a number, so let's change our filter.
-
3:19
FILTER_SANITIZE, NUMBER_INT.
-
3:26
Next, our first conditional here checks that name, email, and
-
3:31
details have been filled out.
-
3:33
Let's remove details and add category and title to this conditional.
-
3:48
We also wanna change our error message.
-
3:56
The last thing we need to do is add these additional fields to our email.
-
4:01
So let's go down to the email body.
-
4:07
Before details, let's add a header.
-
4:11
We'll duplicate the email line.
-
4:15
We'll add a couple line breaks and we'll say, Suggested Item.
-
4:24
Now we can add a couple line breaks on that side too.
-
4:27
We'll duplicate the details line for category, title, format, genre, and year.
-
4:35
So let's try category,
-
4:41
Title, Format,
-
4:51
Genre, And year.
-
5:01
And we'll leave details at the end.
-
5:04
Now let's preview our form once again.
-
5:07
It looks the same as it did last time with our required fields.
-
5:11
Now let's try submitting our form.
-
5:13
The four required form fields need to be filled in before the form will actually
-
5:18
submit.
-
5:34
Let's check our email.
-
5:36
The new email that comes in shows name and email filled in.
-
5:41
And below our suggested item, we see category and title filled in.
-
5:46
We still see, format, genre, year, and details, but
-
5:48
nothing is filled in for those.
-
5:51
Now let's go back to the form and fill out all the fields.
-
6:15
Once again, let's check our email.
-
6:17
This time, we see that all our fields are filled out.
-
6:22
Awesome job.
-
6:23
We now have all the extra form fields validating and
-
6:26
sending in the email as well.
-
6:29
Since format, genre, year, and details are all optional, we could do another
-
6:34
conditional to test if those variables are set before including them in the email.
-
6:40
I'm going to leave them there for now, because I'll be using them a little later.
-
6:44
Next, we're ready to display those errors in a much nicer format
-
6:49
that doesn't require the user to press their back button.
You need to sign up for Treehouse in order to download course files.
Sign up