In this lesson we're going to add additional validation to our form.
We're going to make it so that users must fill in their name and web site in order to submit the form
if they leave the fields empty.
An error message will be displayed to do this.
We'll be using the empty function so let's get started.
Our error messages will be displayed in red.
So first we need to create a style sheet with a class that will change the font color to red
create this block of code in your head.
Basically a style sheet with the Iraq class which will change the font color to red.
Now we can create our validation.
We need the validation statements to execute as soon as the form is submitted.
We also want the data output.
Only if the required fields are completed so remember this is our output section and we only want the
values output ID.
If the Field's name and web site are not empty so that's the objective view.
So first begin by inserting the following block of code inside your first if statement.
So we're nesting one if the statement into another and I'll explain what this means in just a sec.
Formatted so it looks a bit cleaner
so we've inserted an if statement.
And before I explain what each statement does I'm just going to make sure I close this statement.
Otherwise the script won't work.
So always remember to close all your open if statements
OK.
So we've created our first line here states that if the first name field is left empty to echo an error
message stating that the first name is required there's a second condition.
If the website field is left empty then echo another error message stating that the website is required
if both the name and the website field have been filled in by the user.
Then the code inside the else statement will be executed and that basically means that the data that
the user input it will be output it in our web page.
And so that's it.
We have to we've added two additional validation components to the script.
Now let's go ahead and test the file.
So I'm purposely going to leave everything empty and press the submit button so you can see that now
none of the information has been output.
Because validation has failed and an error has been output.
The error is that the first name is required so if we enter a first name let's see what happens if we
submit.
Now it's stating that the Web site is required and I'll just change the formatting of this error so
it matches the first one
OK so now it past the first test the first name was included but it failed the second test.
The website is required so if we enter the first name and a website
and then press submit then validation checks out and all the data is output it
and you'll notice that the comments field was left empty.
And that's that's fine because we didn't add any validation onto the comments field only the name in
Web site.
Add additional validation.