IntroductionWelcome| 00:03 |
Hello, this is Ray Villalobos, and
welcome to Validating and Processing
| | 00:07 |
Forms with JavaScript and PHP.
In this course, I'm going to show you how
| | 00:11 |
forms work, how to validate, sanitize,
and process your form input, and how to
| | 00:14 |
send information from a form to an email,
or a MySQL database.
| | 00:19 |
I'll start by showing you how to validate
input fields with HTML5, which involves
| | 00:23 |
adding required fields, placeholders,
limiting uploads by MIME type,
| | 00:27 |
restraining fields and working with
regular expressions.
| | 00:31 |
Then we'll examine how to work with
forms using JavaScript, handling focus
| | 00:35 |
changes, detecting the odd change event,
and validating in older browsers with modernizer.
| | 00:41 |
I'll show you how jQuery can make it
easier to validate forms with easy to use
| | 00:45 |
selectors plus the validation plugin.
I'll also show you how to work with PHP
| | 00:49 |
to process, validate and sanitize your
form input on the server side.
| | 00:54 |
Finally, I'll show you how to mail form
data, upload files, handle dynamic form
| | 00:58 |
input with Ajax.
How to salt passwords for encryption, and
| | 01:02 |
how to send form information into a
database.
| | 01:05 |
This course is jam packed with lots of
great info, so let's get started.
| | 01:08 |
| | 59:59 |
(music playing)
| | Collapse this transcript |
| What you should know| 00:00 |
I wanted to talk about some things that
you need to be familiar with before
| | 00:02 |
taking this course.
You should be familiar building online
| | 00:06 |
projects and know how HTML works.
A really good course to check out is HTML
| | 00:11 |
Essential Training with Bill Weinman.
You should also be familiar with
| | 00:15 |
JavaScript basics.
If you need help check out Simon
| | 00:18 |
Allardice's JavaScript Essential
Training.
| | 00:21 |
In this course, I show you how to process
a form dynamically using Ajax.
| | 00:25 |
You may also want to check out my course,
JavaScript and Ajax.
| | 00:29 |
On some of the chapters you're going to
need to have access to a web server to
| | 00:32 |
test and run the examples.
If you need help understanding FTP and
| | 00:36 |
working with a hosted server check out my
course, Managing a Hosted Web Site.
| | 00:41 |
On some of the examples I'll be working
with an online database so make sure you
| | 00:43 |
check out the chapter on reading a
database on this course.
| | 00:47 |
You should be comfortable editing with
text editors like BBEdit, Sublime Text or others.
| | 00:52 |
In this course, I'm going to use an
editor called Sublime Text, but you
| | 00:55 |
should use your favorite text editor.
With just a little bit of background
| | 00:59 |
experience, you should have no problem
taking this course.
| | 01:02 |
| | Collapse this transcript |
| Using the exercise files| 00:00 |
If you're a premium member of the
lynda.com online training library, or if
| | 00:03 |
you're watching this tutorial on a DVD
rom, you have access to the excercise
| | 00:06 |
files used throughout this title.
In the Exercise Files folder, you'll find
| | 00:12 |
folders for each video in this series.
Inside those folders you may see a single
| | 00:16 |
forms folder.
And usually I'll start the movie by
| | 00:19 |
having pulled that folder into my
desktop.
| | 00:22 |
And opened those files into my text
editor with a preview in one of my browsers.
| | 00:29 |
You may also find a folder.
That has a Finish folder and a Working folder.
| | 00:33 |
The Working folder is the version of the
files when I start the movie and the
| | 00:37 |
Finish folder is the version of the files
when I finish the movie.
| | 00:41 |
In some folders you may also see a code
snippets file.
| | 00:45 |
That file has some code that I'll copy
and paste occasionally into the text editor.
| | 00:50 |
In this movie, I'll also be working with
files from the server.
| | 00:53 |
In that case, I will have copied the
files into my FTP application and pulled
| | 00:56 |
the preview directly from the web server.
Unlike most courses, these files are not
| | 01:01 |
necessarily in sequential order.
I highly suggest that you start each
| | 01:05 |
movie by looking for the folder for that
movie, opening the Working folder, and
| | 01:09 |
copying the Forms folder onto your
desktop.
| | 01:13 |
If you're a monthly member, or an annual
member of lynda.com, you don't have
| | 01:16 |
access to the exercise files.
But you can follow along from scratch
| | 01:21 |
with your own assets.
So let's get ready to start validating
| | 01:24 |
and processing forms.
| | 01:25 |
| | Collapse this transcript |
|
|
1. Getting StartedUnderstanding forms| 00:00 |
Even though it might be obvious to some,
I wanted to take a minute to review how
| | 00:03 |
forms are used on the web, how they're
created, and what the different options
| | 00:06 |
for validating and processing them are.
So let's get started by talking about
| | 00:10 |
what forms are for.
Forms are designed to handle
| | 00:13 |
communication between the client, which
is usually a browser, and a server, which
| | 00:17 |
hosts web sites and processes requests
for information.
| | 00:21 |
It's a great way for your server to
gather data about your user and do
| | 00:24 |
something in response to user input.
Forms can let your user interact with
| | 00:28 |
data so that you can provide an
interactive or customized experience.
| | 00:32 |
So, let's talk about how they work.
You can interact with a form through a
| | 00:35 |
series of Input and Control Fields, like
Text Fields, Check Boxes, Radio buttons
| | 00:38 |
and Drop Downs.
The browser gathers the data from these
| | 00:42 |
fields and sends them to a processing
script in a language like PHP or Ruby.
| | 00:46 |
The form processor receives the data from
the form and does something with it,
| | 00:50 |
sometimes returning the data immediately
to the browser through AJAX or by calling
| | 00:54 |
a separate page.
So how does that processing work?
| | 00:58 |
Processing means taking the data that a
user enters and sending it to the server.
| | 01:02 |
Input fields send over name and value
pairs with the name of the field and one
| | 01:06 |
or more values.
This data has to be parsed, or
| | 01:09 |
translated, by the server-side language,
processed, and then usually sent to a
| | 01:12 |
database, or used to create a custom
experience for the user.
| | 01:17 |
The result of processing can then be sent
back to the user through AJAX, or by
| | 01:20 |
sending the user to a new page with the
results from the form.
| | 01:24 |
Validation is the process of verifying
that the information the user submits is
| | 01:28 |
in the right format.
You perform validation on forms to make
| | 01:31 |
sure that no harmful data is passed to
your site or database.
| | 01:35 |
Harmful data can create a security risk
on your server and harm your user's information.
| | 01:40 |
Validation can be done in the browser
through simple HTML fields, through
| | 01:43 |
JavaScript or JQuery.
Or, at the server with a built in
| | 01:47 |
function or by using regular expressions.
Each has some advantages and disadvantages.
| | 01:52 |
Form processing and validation is a
common task for front and back end developers.
| | 01:57 |
It should work together with form
processing to keep the data on your site
| | 01:59 |
safe and secure.
| | 02:01 |
| | Collapse this transcript |
| Working with form fields| 00:00 |
In order to understand how validation
works, we must understand the different
| | 00:03 |
types of fields, and how the names and
values associated with them get passed
| | 00:06 |
over to a form processor.
By far, the most common type of field in
| | 00:11 |
HTML forms is the input field.
Most of the communications and forms
| | 00:15 |
happen with input fields, because they
can take on a variety of shapes.
| | 00:19 |
An input field by default, shows up as a
text field, where you can type in values
| | 00:23 |
to be submitted to the form processor.
It's not necessary, but you can add a
| | 00:28 |
type equals text attribute to the field.
However, even without it, it will display
| | 00:33 |
by default, as a text field.
Any form field should have a name
| | 00:36 |
associated with it.
When you submit the field, that name will
| | 00:39 |
be sent along to the form processor with
whatever is typed into the input field.
| | 00:44 |
Input fields can also have a value
parameter.
| | 00:48 |
If you include this parameter, the value
will be sent along with the field by default.
| | 00:51 |
In text typed fields, this means that the
text will be prepopulated in the field.
| | 00:57 |
The value parameter is more useful for
non text fields.
| | 00:59 |
You can add a label to any form field you
want.
| | 01:03 |
The label is a way of associating some
text, to an input field.
| | 01:07 |
One of the advantages of doing this, is
that clicking on the label will also
| | 01:09 |
activate the form field.
This could be really good for usability,
| | 01:13 |
since people on mobile devices will find
it easier to tap on the label to activate
| | 01:17 |
the field.
There's two ways of creating labels.
| | 01:20 |
You can wrap the input field with a label
tag, or you can use a for attribute on
| | 01:24 |
the label to link it to the input's field
ID.
| | 01:28 |
So, in this case, this label right here
is associated with this input field
| | 01:32 |
because of the ID and the for attribute.
The text field is just one of the many
| | 01:38 |
varieties of input fields.
So, let's take a look at some other ones.
| | 01:41 |
You've probably used an input field of
type password; converts what you type
| | 01:45 |
into bullets.
That way, others can't see what you're typing.
| | 01:49 |
Now, just like with text fields, any
other field, if you want to, can have a
| | 01:52 |
label, a name, and a value.
They work in the same way as the type
| | 01:57 |
equals text input field.
You can also have input type equals file fields.
| | 02:02 |
These are the traditional way of asking
the user to upload a file.
| | 02:07 |
You will need to make sure that your form
tag has the endtype attribute set to
| | 02:10 |
multipart form data.
You'll also need to create a way for the
| | 02:14 |
file to be saved onto your server or for
it to be included into a database.
| | 02:19 |
You can also create check boxes or radio
buttons.
| | 02:22 |
Check boxes let you ask questions where
the user can check one or more options.
| | 02:28 |
So this is great for asking questions
that can have one or more answers.
| | 02:31 |
The form processor will receive a
variable with each name value pair and
| | 02:35 |
each input field.
If you include a checked attribute, one
| | 02:38 |
of the input fields can be prechecked.
This works with check-boxes and input
| | 02:43 |
type radio buttons.
Radio buttons are very much like
| | 02:46 |
check-boxes but they are meant for
questions where the answer should be exclusive.
| | 02:51 |
So this is great for asking a question
like rate this from 1-10.
| | 02:54 |
Notice that if I click on one of these
input fields and then click on the other
| | 02:57 |
one it deselects the original one.
You achieve this by making sure each
| | 03:01 |
input field has the same name but
different values.
| | 03:05 |
There is a type of field that is
invisible and it's the input type equals
| | 03:08 |
hidden field.
Its a great way to send data to your
| | 03:11 |
servers that the users can't see.
Say for example that somebody orders a
| | 03:15 |
product from your page and you want to
pass along a part number.
| | 03:19 |
You don't need the user to know what that
is.
| | 03:21 |
Simply create this field with a name and
a value, and when the form is submitted
| | 03:25 |
the name and value will be passed to the
processor just like with any other input field.
| | 03:31 |
There is a number of fields that let you
create applicable buttons.
| | 03:33 |
The most famous is the input type submit
field.
| | 03:37 |
When the button is clicked it sends a
form to the processor.
| | 03:39 |
You can add a value field and that
becomes the label of the field.
| | 03:44 |
So instead of submit, it now says click
me.
| | 03:47 |
Just like with any other input field, you
can also add a name and the name and
| | 03:51 |
value will get passed to the processor.
You've probably also seen the input type
| | 03:56 |
equals reset field.
When you click it, it will clear out what
| | 03:59 |
the user has typed in the current form.
Now, there's another way to create
| | 04:04 |
buttons and this is not an input field.
It's a special tag called the button tag.
| | 04:09 |
It looks very much like the input type
submit and input type reset but, it's a
| | 04:13 |
set of open and closed HTML tags.
The label of that button is whatever is
| | 04:18 |
in between those tags.
Now, there's even a button field that can
| | 04:22 |
look like a photo and it's called the
imple type image field.
| | 04:26 |
When you click on the image, the form
will be submitted.
| | 04:28 |
You should include both a source
attribute to specify the location of the
| | 04:32 |
image, as well as an out attribute field.
So, you can't do everything with just
| | 04:36 |
input fields.
the text area field allows you type
| | 04:39 |
longer pieces of text.
The text that you type inside this field
| | 04:43 |
will be sent along with the name of the
field through the form processor.
| | 04:47 |
This field, like the button field, has a
beginning and an ending part of the tag.
| | 04:52 |
If you place something in between these
two tags, it prefills the text area field.
| | 04:56 |
In addition to the text area field,
there's a set of tasks for creating a
| | 04:59 |
drop down menu of options.
Use the select tag and place an option
| | 05:04 |
tag inside it.
Notice that the name goes in the select tag.
| | 05:07 |
But the values go inside each option
field.
| | 05:10 |
What's going to be sent to the form
processor is not what you place in the labels.
| | 05:14 |
But instead, whatever you include in the
option tags value attribute.
| | 05:18 |
So when you submit this form, if you
select the item number 2, the form
| | 05:22 |
processor will receive a variable called
My Options with the value, B.
| | 05:28 |
If you include a selected attribute in an
option field, that field will
| | 05:32 |
automatically be selected when the form
loads.
| | 05:36 |
There's another version of the select
field.
| | 05:39 |
It has an added attribute of multiple.
That allows you to select more than one
| | 05:43 |
item at a time.
You hold down the Cmd key on the Mac or
| | 05:46 |
the Ctrl key on the PC to do this.
And this way, it's sort of like the check
| | 05:51 |
box input field.
When the data gets sent to the processor,
| | 05:54 |
it sends the name, along with a comma
separated list of selected options.
| | 05:59 |
This one's a little trickier to process
than others.
| | 06:02 |
HTML5 adds a number of special input
fields.
| | 06:04 |
This is a growing list but some of the
fields are pretty cool.
| | 06:08 |
For example you can use an input type
equals date to get a popup calender.
| | 06:12 |
Input type color let's you choose a color
from a color picker.
| | 06:17 |
Input type range lets you choose with a
slider.
| | 06:20 |
The thing to remember about HTML5 fields
is that browser support is not uniform.
| | 06:25 |
So although these fields look great on
this browser which is Chrome, it might
| | 06:29 |
not look as well on Internet Explorer or
some other browsers.
| | 06:33 |
HTML5 also has a number of attributes to
input elements like autocomplete,
| | 06:37 |
placeholder, required, pattern and
others.
| | 06:41 |
Support for these attributes are spotty
on older browsers.
| | 06:46 |
We'll talk more about these in the
chapter on HTML5 validation.
| | 06:49 |
You may also want to check out the course
HTML5: Web Forms in Depth with Joe Marini.
| | 06:54 |
HTML5 has a number of fields you can use
to create form elements.
| | 06:59 |
It's important to get used to how the
different fields work, and what happens
| | 07:01 |
when the forms are submitted.
| | 07:03 |
| | Collapse this transcript |
| Using the form tag| 00:00 |
So we've talked about form controls,
validation, and processing, but no
| | 00:03 |
discussion of forms will be complete
without looking at the form tag itself.
| | 00:08 |
The form tag is the official container
for all form elements.
| | 00:12 |
All form fields like input text area and
select go inside a form tag.
| | 00:17 |
The form tag has a few parameters that
are super important to how it's processed
| | 00:20 |
and validated.
First, the action parameter tells the
| | 00:23 |
browser the location of the form
processor.
| | 00:26 |
This is the file that's going to take our
data and process the form.
| | 00:29 |
The name and value fields gather from
each of the form controls will be sent to
| | 00:33 |
this location.
Another parameter, the enctype, tells the
| | 00:36 |
browser how the data in the form should
be encoded.
| | 00:39 |
And you have three options, the default
which is what happens if you don't
| | 00:44 |
include the field is, application x www
form urlencoded, which frankly sounds way
| | 00:49 |
too complicated.
It just means that the browser will
| | 00:53 |
convert the data into a series of name
and value pairs, and modify the data so
| | 00:57 |
that special characters like spaces and
non alphanumeric characters have to be
| | 01:00 |
converted to make it easier for the
browser to send the form.
| | 01:06 |
Thankfully since it's a default you don't
have to include it.
| | 01:10 |
The multi-part form data enctype is used
for sending forms when the users need to
| | 01:14 |
upload a file.
The data is actually sent in several steps.
| | 01:18 |
And done in a more complex format called
MIME.
| | 01:21 |
Because of the length and complexity of
the format, forms that upload a file
| | 01:25 |
should be sent with the post method.
There is another enctype that is not as
| | 01:30 |
popular, but I mention it here because
you might run into it.
| | 01:33 |
It's called text slash plain.
It's for sending the form without using a
| | 01:37 |
processing script through the computer's
email application.
| | 01:41 |
Although this seems like an easier
option, it just sends the form fields
| | 01:44 |
inside an email message, and it's not
really a good way to process or validate data.
| | 01:50 |
The last attribute is method, and it
controls how the data gets sent to the processor.
| | 01:55 |
There are two methods, get and post.
So, let's talk about those.
| | 01:58 |
The get method will send the data through
a URL.
| | 02:03 |
So, to illustrate that let's take a look
at what's probably the most famous form
| | 02:06 |
on the web.
The Google search form.
| | 02:09 |
I'll type in a keyword here, flowers.
And we'll hit the Enter button.
| | 02:13 |
If you take a look at my URL bar, you can
see that this got sent to a form processor.
| | 02:18 |
And it's passing along a bunch of
information separated by ampersands.
| | 02:22 |
If you look right here at the q variable,
you can see that it has the value of my
| | 02:26 |
search query.
So, the query's actually being passed
| | 02:30 |
through a URL.
This is cool because we can bookmark this
| | 02:34 |
URL, or copy and paste it to send someone
else to the same search results page.
| | 02:38 |
Let's go back into our form here.
If I were to submit this form with my
| | 02:42 |
name and title, the URL sent to the form
processor would include the name, which
| | 02:46 |
base is converted into plus signs.
And the different variables will be
| | 02:51 |
separated by an ampersand and any
non-alphanumeric values to a percentage
| | 02:55 |
sign followed by two hexadecimal digits.
The get method is the default, so if you
| | 03:00 |
don't include it, it assumes you want to
send the form with a get method.
| | 03:04 |
The post method sends the data to the
server in the background.
| | 03:09 |
Some servers limit the length of the
arguments passed to an application
| | 03:11 |
through a URL.
So the post method is better for sending
| | 03:14 |
longer forms, and it's necessary when
you're sending files.
| | 03:18 |
Post is considered a more secure method
than get, because with get the parameters
| | 03:22 |
are transmitted directly through a URL
which can be sniffed by malicious scripts.
| | 03:29 |
It's up to your form processor to accept
results in either get, post or both.
| | 03:34 |
So getting used to the attributes and the
form tag gives you a lot of options that
| | 03:37 |
control where the data from the form is
sent.
| | 03:41 |
How it is encoded, and the method by
which it's sent.
| | 03:44 |
| | Collapse this transcript |
|
|
2. Validating with HTML5Using input validation| 00:00 |
The easiest way to add validation to your
existing form is to take advantage of the
| | 00:04 |
new HTML5 input types.
Some new browsers like Google Chrome will
| | 00:09 |
automatically verify that data in this
input fields won't submit unless they're
| | 00:12 |
in the right format.
So take a look at this form.
| | 00:16 |
It has several input fields that look
like normal text fields, but if I try to
| | 00:19 |
submit data in the email field that is
not an email.
| | 00:23 |
The browser will throw a pop-up that
tells me the data in the field is not valid.
| | 00:29 |
If I look at the code for this page, you
can see that all I have done is change
| | 00:32 |
the input type for the second field, to
email.
| | 00:35 |
That's it.
The browser will automatically perform
| | 00:38 |
this validation for us.
I've done the same thing for some of the
| | 00:41 |
other input fields, like URL, number, and
date, time.
| | 00:44 |
So if I go back to the form, and I try to
type in a, website that is not an URL,
| | 00:48 |
and submit the form, it tells me to
please enter a valid URL.
| | 00:54 |
The same thing will happen with some of
these other fields.
| | 00:56 |
So the advantage to this type of
validation is that it works automatically
| | 01:00 |
by just using the right input types.
The disadvantage is that it doesn't work
| | 01:05 |
in older browsers, and the implementation
is up to the browser manufacturers.
| | 01:10 |
So it's not consistent, and you shouldn't
rely on it.
| | 01:13 |
Using this type of validation has some
additional advantages.
| | 01:16 |
So, for example, if you pull this form up
on a phone, the fields will also take
| | 01:19 |
advantage of some of the custom key words
available to your device.
| | 01:24 |
So if I click on the email field, you'll
see that I get a keyboard with the at sign.
| | 01:28 |
If I click on the website field, I get a
keyboard that has a slash and a dot com.
| | 01:34 |
If I click on the h field, which is a
number field, I get the keyboard with the
| | 01:38 |
numbers at the top.
And if I click on the field for the date
| | 01:42 |
and time.
I get a custom date and time picker.
| | 01:45 |
Here's a page with a list of all the
current HTML5 input fields.
| | 01:50 |
By the way, if you are wondering how I
styled this form, make sure you check out
| | 01:54 |
my course on CSS Styling Forms.
HTML5 input types are something you
| | 01:58 |
should be using on all of your forms.
It's a quick way to get simple validation
| | 02:03 |
virtually for free.
And it's backwards compatible with older
| | 02:06 |
browsers, which will simply show a text
field.
| | 02:09 |
| | Collapse this transcript |
| Adding required fields and placeholders| 00:00 |
One of the most helpful HTML5 atrributes
for form validation is the required attribute.
| | 00:06 |
On browsers that support it, it will
prevent the form from being submitted
| | 00:09 |
unless the input is filled out.
I'll be using this form from our exercise files.
| | 00:14 |
This is one of the forms I styled in my
course on CSS styling forms.
| | 00:18 |
If we take a look at the code for this
page, you can see a single input field.
| | 00:21 |
I'm going to add the required attribute
to the input field and then switch over
| | 00:25 |
to the browser.
I'll refresh the form.
| | 00:29 |
And if I try to submit it without filling
it out, I'll get a little error message
| | 00:32 |
that says please fill out this field.
It also won't let me submit the form.
| | 00:37 |
When you use the required attribute, it's
always a good idea to also use the
| | 00:40 |
placeholders attribute.
Placeholders give users a hint as to how
| | 00:43 |
they're supposed to fill out our field.
That way, the user will know that I don't
| | 00:48 |
simply want their first name.
Let me refresh this page.
| | 00:52 |
And you can see that it appears as a
grayed out item.
| | 00:55 |
As soon as I start typing something in
here, it will disappear.
| | 00:59 |
It's always a good idea to give users
feedback with things like required fields
| | 01:02 |
and placeholders, but you shouldn't rely
totally on this type of validation
| | 01:06 |
because not all browsers support it.
A good place to check is the website caniuse.com.
| | 01:14 |
You can check for support for any HTML5
feature by doing a search.
| | 01:18 |
You can see that the required parameter
only works on newer versions of IE and
| | 01:21 |
none of the mobile browsers.
To learn more about forms, make sure you
| | 01:26 |
check out HTML5 Web Forms in Depth, with
Joe Marini.
| | 01:30 |
| | Collapse this transcript |
| Constraining numeric and date fields| 00:00 |
Some numeric fields have attributes that
let you control the number of characters
| | 00:04 |
as well as the minimum and maximum value.
These will even work with dates.
| | 00:09 |
So, I have a simple form here, where I'm
asking the user a name, age, and when
| | 00:12 |
they would like to make a reservation.
You can have the browser prevent the user
| | 00:17 |
from typing fields longer than a certain
length.
| | 00:20 |
With a maxlength attribute that works for
fields like text, email, search,
| | 00:23 |
password, telephone or url.
We can for example make sure that their
| | 00:28 |
name is no longer than ten letters,
perhaps our database limits the length of
| | 00:32 |
that field.
We'll see how that works, we'll go into
| | 00:36 |
our code for this page and modify the
name input field, so that it has a
| | 00:39 |
maxlength we'll make it ten characters.
So I'll save this, I'll go back to my
| | 00:45 |
form, Refresh, and when I try to type in
something longer than ten characters, the
| | 00:48 |
browser will stop me at ten characters.
Some other attributes that you can use
| | 00:54 |
are min and max.
They let you create constraints to
| | 00:58 |
numeric input fields.
Say for example that you want to add an
| | 01:01 |
age constraint to a form element, so that
someone has to be at least 13 years of
| | 01:05 |
age to submit this form.
I'll switch back to my code, and under
| | 01:10 |
the age input field, I'll add a min value
of 13.
| | 01:15 |
I'm going to save that and go back into
our page.
| | 01:18 |
I'll refresh my form.
And now if I try to type in a value like nine.
| | 01:22 |
When I try to submit the form, it's
going to tell me that the value has to be
| | 01:25 |
greater than or equal to 13.
In the same way, the max field works to
| | 01:29 |
limit fields to a certain number.
So I'll type in a max of 18.
| | 01:35 |
I'll save this.
Back into our form, refresh, and now try
| | 01:38 |
to type in something larger than 18.
Try to submit and I get a similar error.
| | 01:44 |
Now the cool thing about min and max is
that you can control things like dates
| | 01:48 |
and date time.
So, for example, if we wanted to limit
| | 01:52 |
the date for our reservations to only
dates within the current work week, we
| | 01:55 |
could use a min and max value for that.
So, let's see how that works.
| | 01:59 |
I'm going to go back into my code and
under the date input field I'm going to
| | 02:03 |
type in a minimum and a maximum value.
I'll save this and I'll go back into my
| | 02:09 |
form, and I'll refresh.
When I click on this input field, the
| | 02:12 |
calendar popup will only let me select
dates within that time range.
| | 02:17 |
You can't always guarantee that the
browser you're using is going to
| | 02:20 |
implement these attributes, so make sure
you check out a website like caniuse.com
| | 02:24 |
and look for those attributes by typing
them in.
| | 02:28 |
You may also want to test your forms in
older browsers.
| | 02:31 |
| | Collapse this transcript |
| Accepting multiple entries| 00:00 |
You probably already know that adding the
keyword multiple and select fields lets
| | 00:04 |
users choose from a list of multiple
options, but that's not the only place
| | 00:07 |
you can use that.
In HTML five this works for the email and
| | 00:11 |
for the file input fields as well.
So, let's take a look at how that works.
| | 00:16 |
Here's a form that asks the user for a
name, an email address, and to upload a file.
| | 00:22 |
If I try to type two email addresses
here, and I try to submit this field,
| | 00:25 |
it's going to give me an error because it
doesn't see two different emails as a
| | 00:28 |
valid email address.
Also, if I click right here to choose a
| | 00:32 |
file, I'm going to go to the desktop.
I can only choose one file at a time.
| | 00:38 |
Even if I hold down my multiple file
keyboard shortcuts like Command on a Mac
| | 00:41 |
or Control on a PC.
So, let's go into the code for this,
| | 00:45 |
right here.
I'm going to add the keyword multiple,
| | 00:47 |
into the Input Type email field.
I'm going to say Save, and I'll go back
| | 00:51 |
into my form.
I'll refresh it and I'll try typing two
| | 00:55 |
emails now.
And now it takes it just fine.
| | 00:58 |
So, we can also do that with files.
So, I'm going to add that keyword to the
| | 01:02 |
file Input Type, and I'll hit Save, and
I'll refresh, but before I do that, make
| | 01:05 |
sure you take a look right here.
Right now, it says Choose Files.
| | 01:09 |
And when I refresh, it's going to say,
choose files, plural.
| | 01:13 |
So, if I click on that, I'll switch over
the desktop where I have a bunch of
| | 01:17 |
files, and I'll hold down the Command key
on a Mac, or Control on a PC, and I can
| | 01:20 |
choose multiple files.
Now, you still have to add file handling
| | 01:25 |
to your form processor, but this is a
nice addition to newer browsers.
| | 01:29 |
As usual, make sure you check caniuse.com
to see support in older browsers.
| | 01:34 |
So, the multiple keyword is really more
useful for file handling.
| | 01:38 |
We'll take a look at some other file
options in the next movie.
| | 01:41 |
| | Collapse this transcript |
| Limiting uploads by MIME types| 00:00 |
Some HCMO Five attributes are super
useful for file validation.
| | 00:04 |
You can tell a browser to accept only
certain files by using the accept
| | 00:08 |
attribute and passing it some MIME types.
So what is a MIME type?
| | 00:13 |
MIME stands for Multipurpose Internet
Mail Extensions.
| | 00:16 |
It started out as a format for allowing
email attachments in the SNTP protocol,
| | 00:20 |
but it has grown way beyond that and is
used heavily all over the web.
| | 00:25 |
And MIME specification starts out with a
main type like image or video, followed
| | 00:30 |
by a sub type like JPG or PNG.
The accept attribute normally prevents a
| | 00:35 |
browser from choosing files that don't
meet our criteria.
| | 00:39 |
So let's see how that works.
Here's a form that's asking the user to
| | 00:44 |
upload a file.
So I'm going to hit this choose file button.
| | 00:49 |
Here I have a bunch of files with
different types.
| | 00:50 |
So notice that I can choose any of the
types that I want.
| | 00:51 |
I'm going to hit cancel, and I'll go into
the code for this page, and in the file
| | 00:55 |
input type, I'm going to add an except
attribute.
| | 00:59 |
I'll ask for only images that are in the
PNG format.
| | 01:03 |
So I'll save that, come back here, I'll
refresh the page, and I'll hit the choose
| | 01:07 |
file button again and see what happens.
Now notice that I can only choose the
| | 01:13 |
nameplate.png because it's the only PNG
file.
| | 01:16 |
You can also accept all image file types
by using a star.
| | 01:19 |
So if I hit save, I'm going to come back
here, refresh.
| | 01:24 |
Hit choose file, and go back.
Notice that I can select a car, which is
| | 01:30 |
a JPEG, and this nameplate, which is a
PNG.
| | 01:33 |
Now I can only choose one at a time, but
if I add the keyword multiple as an
| | 01:36 |
attribute, I can choose more than one
file.
| | 01:39 |
When I refresh this page, notice that it
says choose files.
| | 01:43 |
So I'll click on this.
And I can now hold down the command key
| | 01:46 |
on a Mac or the control on a PC, and
select more than one file at time.
| | 01:51 |
You can also choose a list of different
types by using commas.
| | 01:55 |
So I can say I want to use only audio
that is in the MP3 format, as well as any
| | 02:00 |
video file.
I'll save this, come back here and
| | 02:04 |
refresh, and hit the choose file button,
and now I can choose this motionpass.mov
| | 02:09 |
movie as well as these two audio files.
Now if you want to see a comprehensive
| | 02:15 |
list of available MIME types, make sure
you check out this website.
| | 02:19 |
This is the official registry of MIME
media types.
| | 02:22 |
So I can't wait for the day when these
attributes are standard across all browsers.
| | 02:26 |
They offer a lot of functionality for a
very small price.
| | 02:30 |
However for the time being, you'll
probably need to test in whatever browser
| | 02:32 |
your site needs to support.
| | 02:34 |
| | Collapse this transcript |
| Assisting text input with a datalist| 00:00 |
Anything you can do to help your users
fill out accurate forms is a good thing.
| | 00:05 |
Sometimes we ask users for generic input
fields with a text field, and we get a
| | 00:09 |
lot of variations in the responses we get
back.
| | 00:13 |
Say, for example, that we're asking users
to fill out a county.
| | 00:16 |
If I ask for the information in a generic
text field, I may get different
| | 00:19 |
variations on the different counties.
For example, they might type something
| | 00:23 |
like Orange, some people will type it
upper case.
| | 00:26 |
Some people will type in lower case, and
some people might even misspell it.
| | 00:30 |
Now, I don't want to use a select field
here because although you're in a certain
| | 00:34 |
geographic area, some people might come
from all over the state.
| | 00:38 |
By using a data list, you can provide
suggestions to your users.
| | 00:42 |
The way you do it is by using a list
attribute in your input field.
| | 00:46 |
Then you create a data list with
predetermined responses.
| | 00:50 |
When the users click on the field, they
will see the data list and pick from one
| | 00:53 |
of the predetermined values.
So, here's the code for how that would work.
| | 00:58 |
You create a regular input field and then
you add a list attribute with a value of
| | 01:02 |
something, like counties here, and then
you create a data list.
| | 01:07 |
This looks a lot like a select field.
But it has a data-less tag instead of
| | 01:11 |
select tag.
You add an ID of whatever you used up
| | 01:14 |
here as the list and this that the two
things together.
| | 01:18 |
Then you can put an option field with a
number of values, I'll save this and come
| | 01:22 |
back here, I'll refresh the page.
And when I click here, notice that it
| | 01:27 |
gives me a list of values to choose from.
Also if I start typing some of these,
| | 01:31 |
it's going to narrow down the list, so
only those values.
| | 01:34 |
So, now I can pick it with my mouse
pointer, or just hit the down arrow and
| | 01:38 |
hit Enter.
This is another one of those features
| | 01:41 |
that doesn't take a lot of time to
implement, and gives your site a lot of polish.
| | 01:45 |
Adding these attributes and additional
text has some additional benefits to how
| | 01:49 |
you access things through scripts.
So, your hard work here will definitely
| | 01:53 |
have additional benefits.
| | 01:55 |
| | Collapse this transcript |
| Constraining with regular expression patterns| 00:00 |
HTML5 input fields have a super cool
attribute called Pattern, which you can
| | 00:03 |
use inside fields to check the user's
input against a specific set of characters.
| | 00:09 |
Inside this attribute, you define a
string that prevents the form from
| | 00:13 |
submitting unless the text in the input
field matches the pattern.
| | 00:18 |
The language we use to format our string
is called a regular expression.
| | 00:21 |
And they're common to a variety of
programming languages.
| | 00:24 |
Let's take a look at how this works.
I have a very simple form here with a
| | 00:28 |
single field that expects you to type in
a correct pattern.
| | 00:32 |
So let's go to the code for this.
And I'm going to add the Pattern
| | 00:34 |
attribute to this field.
Now I'm going to add some literal text here.
| | 00:38 |
Texas and save this.
Go back into my form, make sure I
| | 00:42 |
refresh, and I'm going to try to type
something into the form.
| | 00:46 |
I'll try California.
And when I hit Enter, I get a popup that
| | 00:49 |
says to please match the requested
format.
| | 00:52 |
So I'm going to try typing Texas now and
hit Enter.
| | 00:54 |
You see that I still get please match the
requested format because when I typed it
| | 00:58 |
into pattern, I typed in a capital T.
So when I type a capital T it works just fine.
| | 01:04 |
Now that's not particularly useful but it
gives you the idea that the patterns
| | 01:07 |
expect the text to match.
To create regular expression patterns you
| | 01:12 |
use regular characters combined with
special characters.
| | 01:15 |
For example the period means match any
character.
| | 01:18 |
So if we replace the capital T with a
period, I'm going to save, come back
| | 01:22 |
here, refresh, and I'll try typing in
lower case Texas this time, and that
| | 01:26 |
works just fine.
If I type in upper case Texas, that
| | 01:31 |
works, too.
But now I can type something in like
| | 01:34 |
Lexus, and that'll be acceptable as well,
and that's not necessarily what we want.
| | 01:39 |
You can ask for a specific series of
characters together by placing them
| | 01:43 |
within brackets.
So, if we wanted to match Texas, upper or
| | 01:46 |
lowercase, you can type in something
like, brackets, and then capital T,
| | 01:50 |
lowercase T, and that will accept either
lowercase Texas or uppercase Texas.
| | 01:55 |
So, I'll save, come back here, and now I
can type in Texas, capital Texas, but not
| | 02:00 |
Lexus, and that's exactly what we want.
You can also create a range.
| | 02:07 |
So let's say you're looking for a single
lower case alphabetical character.
| | 02:11 |
You do that using a range.
So, let's try typing in lower case A,
| | 02:15 |
then the dash, and then Z right here.
I'll save this and go back into my form.
| | 02:21 |
Now I can type in any character, I'll try
K, that works pretty well.
| | 02:25 |
I can try typing the A.
Now, let's try an upper case character,
| | 02:29 |
like T, and it doesn't like that.
It also doesn't let me do more than one
| | 02:32 |
character, just a single character.
It's not necessarily good.
| | 02:37 |
If you wanted to match one or more
characters you could do something like
| | 02:40 |
this, just put a plus sign at the end of
the pattern and then it will take one or
| | 02:43 |
more of this particular sequence.
So save that and I'll refresh, and now I
| | 02:49 |
can type in multiple lower case
characters but not any upper case
| | 02:53 |
characters in that sequence.
So, what if you wanted upper case letters too.
| | 02:58 |
Well, we could put in more than one
sequence of characters as well.
| | 03:01 |
So, you could say something like, capital
A through Z and then lower case A through Z.
| | 03:10 |
So let's try that.
Come over here, and refresh, and try, and
| | 03:15 |
this works well, for any combination of
upper and lowercase characters.
| | 03:21 |
Now, what if we wanted numbers?
Well, that would work by adding, of
| | 03:24 |
course, a number range, like zero through
nine.
| | 03:28 |
So save it, come back here, refresh.
And now we could do any number of upper
| | 03:33 |
case, lower case characters or numbers.
Now it's not going to accept spaces in
| | 03:39 |
our pattern.
So, we could do that just by adding a
| | 03:42 |
space to the pattern.
So just enter space right there.
| | 03:44 |
Save it.
Refresh.
| | 03:49 |
And that works just fine.
That's pretty cool, but what if you
| | 03:52 |
wanted to ask for a specific number of
characters?
| | 03:55 |
Perhaps something like a zip code.
You could ask for a certain amount of
| | 03:59 |
characters with curly brackets.
So let's try that.
| | 04:02 |
We'll do zero through nine, and instead
of the plus sign we'll use curly brackets
| | 04:07 |
and a number.
So we'll say we want five digits from
| | 04:11 |
zero to nine.
So I'll save that.
| | 04:14 |
I'll try typing in here, refresh one,
two, three.
| | 04:19 |
That doesn't work, but I do one, two,
three, four, five and it takes it just fine.
| | 04:23 |
So, that would be perfect for matching a
zip code.
| | 04:26 |
There's a shortcut for numbers, so that
could be written instead of like this,
| | 04:30 |
like this.
That means a digit five times.
| | 04:35 |
So, if you wanted to do something like a
zip plus four code pattern it would look
| | 04:38 |
something like this.
Notice then when I'm using the dash I
| | 04:41 |
need to escape it with the slash right
before it.
| | 04:45 |
So I need a series of five numbers
followed by a dash, followed by another
| | 04:52 |
number, four times.
So let me save that, refresh and.
| | 04:59 |
We trying typing in some numbers here.
That's not going to work.
| | 05:03 |
So it should be something like five
numbers, dash, four numbers, and then it
| | 05:08 |
will work.
This is obviously getting super exciting
| | 05:12 |
and complicated at the same time.
Now I could spend a whole course
| | 05:15 |
explaining all the rules of regular
expressions, thankfully somebody's
| | 05:19 |
already done that.
You can check out our course on using
| | 05:23 |
regular expressions at this page.
There's also a whole bunch of really cool
| | 05:27 |
resources you can find online related to
regular expressions.
| | 05:31 |
For example, here's a really good cheat
sheet with a quick explanation of the patterns.
| | 05:35 |
If you want to build out and test your
regular expressions, you can use this
| | 05:41 |
online tool called, Regexpal.
Finally, this website has a number of
| | 05:48 |
pre-built HTML 5 patterns you can use for
common tasks.
| | 05:53 |
So let's take a look at postal codes.
And you can see that I got pretty close
| | 05:57 |
to it, however, with postal codes you can
ask for either a five digit number or
| | 06:01 |
alternatively, a five digit number with a
dash, and the four digit number.
| | 06:07 |
So, if we want to use this pattern for
American Postal Codes, you just
| | 06:11 |
double-click, copy it, and bring it back
here, and paste this right here.
| | 06:16 |
Make sure you get rid of that carriage
return, and save it.
| | 06:20 |
Come back here.
Refresh and we'll try some different things.
| | 06:25 |
So I'll just try three numbers, that
doesn't work.
| | 06:26 |
Five numbers works and, five numbers plus
the dash, and four numbers works as well.
| | 06:38 |
There's a lot of other really cool
regular expressions on this website, so
| | 06:41 |
you can look for things like regular
expressions for names, passwords, dates,
| | 06:46 |
phones, etc.
As I mentioned before, regular
| | 06:50 |
expressions are common to a lot of
language, including HTML5 and Javascript.
| | 06:55 |
So we'll talk a little bit more about
them in the chapter on validating with Javascript.
| | 06:59 |
| | Collapse this transcript |
|
|
3. Validating Forms with JavaScriptAccessing forms| 00:00 |
Accessing forms is similar to accessing
other HTML elements but because of their
| | 00:04 |
nature there are some additional methods
and properties we can take advantage of.
| | 00:08 |
If you'e given your form an ID, the
easiest way to have access to the form
| | 00:12 |
element is by using getElementById, but
with forms, you can also look up elements
| | 00:16 |
by name.
So here's a form I've created with a
| | 00:20 |
number of different types of fields.
If you're interested in how this form was
| | 00:24 |
put together, make sure you check out my
course on CSS styling forms.
| | 00:28 |
I put together this form on chapter six.
So I'm using the Google Chrome browser
| | 00:32 |
and I need to look at the Developer
tools.
| | 00:34 |
I'm going to right click on this form and
select Inspect Element from the pop up menu.
| | 00:38 |
From here, I need to go to the JavaScript
Console which is the last tab.
| | 00:43 |
Now let's add some code to send the form
information to the JavaScript Console.
| | 00:46 |
This form has an ID of my forms, that's
what I'll type in here.
| | 00:50 |
So we were successfully able to target
the form itself, and all the elements are
| | 00:54 |
accessible underneath that element.
Of course if an element has an ID you can
| | 00:59 |
get just that element with the same
method.
| | 01:03 |
Our first field has a name of my name.
So let's see if we can target that.
| | 01:07 |
Since I'm using Google Chrome, I can hit
the up arrow to get to the last command.
| | 01:11 |
So, I'll just modify this to my name, and
hit return, and now I get just the input
| | 01:15 |
field with the user's name.
This is one of the reasons why it's a
| | 01:20 |
good idea to add IDs to your form
elements.
| | 01:23 |
Of course, you can also use the
getElementByTagName method to target all
| | 01:26 |
the input fields in our form.
So, let's try that.
| | 01:30 |
And I'm going to add for all the input
tag names.
| | 01:34 |
Now we get a list of all the input
fields.
| | 01:37 |
And if you'll notice a little bracket's
on each end of our list, you can tell
| | 01:40 |
that this is an array form.
So, if I hit the up arrow, and I attach
| | 01:44 |
some brackets, and then type the index of
the element that I want, I'll ask for the
| | 01:47 |
first element.
Then I can get just to that field which
| | 01:52 |
is the same as the field we had before.
This is the name that we're asking the
| | 01:56 |
user for.
Now this will list all the forms in the
| | 01:59 |
current page.
This page has only one form so there's
| | 02:03 |
only one element.
This is probably a dangerous way to
| | 02:06 |
access a form since the number of forms
on a page can vary from time to time.
| | 02:11 |
It's probably better to refer to it by
its ID.
| | 02:13 |
This form has an ID of My Form, so I can
just type this, and I get the form again.
| | 02:19 |
So although the preferred way to access
elements with JavasScript is usually by
| | 02:22 |
working with IDs, forms also have a
special attribute called Name.
| | 02:26 |
Using the document forms array, you can
access an element by name instead of by
| | 02:31 |
index number.
We can even shorten this further by
| | 02:37 |
adding a name to the form itself.
This form has a name of The Form.
| | 02:41 |
Now to get to the name field we can
simply type, document.theform.myname.
| | 02:50 |
If we try to access an element with
multiple values like a radio button you
| | 02:53 |
can get an array of elements.
Here's a couple of radio buttons.
| | 02:57 |
The name of those buttons are, request
type.
| | 03:00 |
So here we get an array of two input
fields, and if we want to access one of
| | 03:04 |
them, we can use an array notation.
Here's the first one, and here of course
| | 03:09 |
is the second one.
If we try to access an element like a
| | 03:12 |
select field we'll get just the select
field itself.
| | 03:15 |
So we have select field called reference.
Now we don't get the individual options
| | 03:19 |
inside reference but we can target those
with an array like notation.
| | 03:24 |
So to get the first option, I will type
in array0.
| | 03:28 |
And that gives me the choose option which
is the default.
| | 03:31 |
You can see some of the other options
here.
| | 03:33 |
So I can get to those by typing 1, 2 or
3.
| | 03:41 |
To get to each of the options use an
array notation similar to what we did
| | 03:44 |
with radio buttons.
Most validation deals with accessing
| | 03:48 |
specific form elements usually by using
an ID, however sometimes if you use names
| | 03:51 |
in your forms you can get to them quicker
by using the document forms array.
| | 03:57 |
| | Collapse this transcript |
| Looking up form elements| 00:00 |
Once you know how to gain access to a
form field like an input field, checkbox,
| | 00:03 |
or a drop-down, we can access any of the
attributes within that field via the
| | 00:07 |
elements array.
In the last movie, we learned that we can
| | 00:11 |
get to a form field in one of two ways.
Using the ID of the field and get
| | 00:15 |
elements by ID, or using the name of the
field and the document forms array.
| | 00:20 |
Once we're there, we can retrieve any
sets of attributes using dot notation.
| | 00:24 |
Now it's important to realize that
different field types have different attributes.
| | 00:29 |
We need to know how to get to the
different things in our forms.
| | 00:32 |
I'm going to be working on this form,
which is a form that I created in my
| | 00:35 |
course CSS styling forms.
I show you how to put it together on
| | 00:40 |
chapter six.
So I'm going to rightclick in the
| | 00:42 |
background and select Inspect Element.
I'm using the Google Chrome browser, and
| | 00:47 |
I'm going to hit the Console tab on the
right hand side.
| | 00:50 |
And once here, I'm going to try to acces
the my name field, which is the place
| | 00:54 |
where the user types in their name.
By typing in document, get elements, my
| | 00:59 |
ID and then typing in the ID of that
field, which is my name.
| | 01:05 |
I hit Return, I can get to that specific
filed.
| | 01:09 |
We can also get to the that field by
typing Document.form, which is the name
| | 01:13 |
of the form, and the name of the field,
which is my name.
| | 01:18 |
If we hit return, we get to the same
field.
| | 01:21 |
So notice that this field has a number of
attributes.
| | 01:24 |
To get to any of those attributes, you
can simply types the names of the
| | 01:27 |
attributes using dot notation.
So if we type Document dot the form dot
| | 01:32 |
my name we can get to the type field by
just typing in type.
| | 01:36 |
We hit Return, it gives us the value of
type.
| | 01:39 |
And we can access any of the other fields
like that.
| | 01:41 |
So if you say name, it'll give us my
name, etc, etc.
| | 01:45 |
Now you can also modify any of them, by
setting them as well.
| | 01:50 |
So for example, I can actually change the
form type, let's go to the type right
| | 01:53 |
here and set it to be a radio button.
I need to make sure that I put this in quotes.
| | 02:00 |
So, now the name field happens to be a
radio button.
| | 02:03 |
Let's go ahead and set it back.
A common thing to do when validating and
| | 02:08 |
processing forms is to set the value of a
field.
| | 02:11 |
So, if I want to set a value of a field,
all I need to do is type in value and
| | 02:14 |
type in whatever I want in there.
I'll put my name.
| | 02:18 |
Now you can see that the name field gets
the value that I just entered.
| | 02:21 |
Let's try getting and setting some of the
other attributes in our form.
| | 02:26 |
This will teach you how to access
different things.
| | 02:28 |
So what do we do if we want to access a
checkbox?
| | 02:31 |
So right now this checkbox called
Subscribe Item is checked, so we can
| | 02:35 |
uncheck it by typing in Document the
form, and then it's called scribe item.
| | 02:41 |
And then use the checked attribute, and
set it to false.
| | 02:45 |
Now, only quotes on this one, and now you
see that that item has become unchecked.
| | 02:51 |
What about if we wanted to modify a
drop-down menu?
| | 02:54 |
That's a little bit trickier.
To get to the menu itself, we can use document.theform.
| | 02:59 |
And that field is called Reference.
But if we want to access each of the
| | 03:02 |
elements in there, I need to use an array
notation.
| | 03:06 |
Notice if I open this triangle, I can see
that there are a few elements in there.
| | 03:10 |
So if I want to get the third element, I
can use Array Notation Number Two.
| | 03:15 |
And then add a selected attribute to that
field and set it to true.
| | 03:21 |
Now, that Option is the selected Option.
So, most validation deals with check in
| | 03:26 |
and setting the values of existing
fields.
| | 03:29 |
It's a good idea to pull up this form and
get comfortable with accessing and
| | 03:32 |
modifying different form fields.
| | 03:35 |
| | Collapse this transcript |
| Handling focus changes| 00:00 |
Events let our applications know when
something has happened on our page.
| | 00:04 |
Forms have the ability to trigger special
events that can be helpful for processing
| | 00:08 |
and validating.
In this movie we're going to take a look
| | 00:12 |
at the elements selection events called,
On Focus and On Blur.
| | 00:16 |
So we're going to be working with this
form and I've left a little spot here
| | 00:19 |
where I want some feedback to happen when
somebody enters one of these fields.
| | 00:23 |
So let me go into the code and show you
that, that additional span is right here.
| | 00:28 |
It has an ID of my name hint and class of
hint.
| | 00:32 |
So I'm going to go all the way to the
bottom of the page, and right before the
| | 00:35 |
closing body tag, I'm going to add a
script.
| | 00:38 |
Now in this script, I want to get to the
form element, so I'm going to add
| | 00:41 |
document dot the form.
Which is the name of the form, and then
| | 00:45 |
the field that I want to get to, which is
my name.
| | 00:47 |
And then add an event handler here.
So, I'm going to add the onfocus event,
| | 00:52 |
just the event that happens when somebody
enters an element.
| | 00:56 |
And this is going to execute a function
literal.
| | 00:59 |
So that's a function with no name, and
inside that I want to get to the element
| | 01:03 |
that I called mynamehint and change the
HTML of that element to be a hint.
| | 01:10 |
So I'll do that by going to Document, Get
Element, By ID and type it in the element
| | 01:15 |
that I want to change which has my name
hint and changing the inside HTML or the
| | 01:20 |
inner HTML in javascript to whatever I
want.
| | 01:26 |
So here I'll just put in a hint that says
"Enter last name, then first".
| | 01:31 |
So lets see what happens when I do that.
So, I'll save this, I'll go back into my
| | 01:36 |
form, and I'll refresh.
And as soon as I enter the element, I can
| | 01:40 |
see the hint right here.
Now, that hint is not going away as soon
| | 01:45 |
as I leave that element.
And that's what on blur is all about so
| | 01:49 |
let's switch back into our code and I'm
going to make a copy of this code right
| | 01:53 |
here and instead of on focus I'm looking
now for the on blur event.
| | 01:59 |
So the onBlur event is what happens when
somebody exits a field.
| | 02:03 |
And all I need to do is just change the
inner HTML of that to nothing once you
| | 02:08 |
leave that field.
So, I'll save this, switch back to our
| | 02:12 |
form, refresh.
And I'm going to hit Tab to get to that
| | 02:14 |
field, you can see the hint appearing
right there.
| | 02:17 |
And if I hit Tab again, that hint will
disappear, and it's that easy.
| | 02:22 |
By doing that on some of the other
elements, I can add hints even to
| | 02:26 |
browsers that don't support placeholders.
And that's really useful.
| | 02:31 |
So, events like On-focus and On-blur make
it possible to create forms that are
| | 02:35 |
interactive and provide feedback to the
user during input.
| | 02:39 |
By helping the user be more precise, it's
going to help them enter data that is
| | 02:43 |
more accurate, and easier to validate and
process.
| | 02:46 |
| | Collapse this transcript |
| Detecting the onchange event| 00:00 |
One of the most important events for
validating and processing forms, is the
| | 00:03 |
onchange event.
It triggers when the content of a form
| | 00:07 |
element changes.
This is different than onfocus and
| | 00:10 |
onblur, which fire when a field goes in
and out of focus.
| | 00:14 |
With validation, sometimes you'll need to
use different types of events, so it's
| | 00:17 |
nice to know that these can work well
together.
| | 00:20 |
Let's take a look at how we can use these
events for validation.
| | 00:23 |
So I have a simple form and it just has a
URL field.
| | 00:27 |
I want to make sure that if I have a URL,
that at least it starts with an http://.
| | 00:33 |
So I'm going to be using the onchange
method, and here's my HTML.
| | 00:37 |
Can see that I've placed a span right
here to accept errors for validation.
| | 00:42 |
So I'm going to stat by creating a script
tag.
| | 00:45 |
And in my script bag, I'm going to target
the My URL field.
| | 00:48 |
So, I'll do document, the form, then get
to the My URL field and then add the
| | 00:53 |
onchange handler.
This is going to execute a function
| | 00:57 |
literal, which means just a function
without a name.
| | 01:00 |
And I'm going to go ahead and comment
this right here.
| | 01:02 |
Onchange.
because, a lot of times you can have some
| | 01:06 |
of these curly brackets all over the
place, and it's nice to be able to see
| | 01:09 |
what they belong to.
So, next, I'm going to create a variable
| | 01:13 |
to hold the value of our field.
It will be a variable, it's going to be
| | 01:17 |
called the URL.
It's going to be equal to the field value.
| | 01:20 |
To check if a piece of text is part of
another string, we can use regular
| | 01:24 |
expressions, or a special JavaScript
function called indexOf.
| | 01:28 |
We covered regular expressions in the
movie on constraining with regular
| | 01:32 |
expression patterns, but we're going to
cover them again soon.
| | 01:36 |
So for now, we'll just use the indexOf
function.
| | 01:39 |
The indexOf function returns the position
of some text inside of some other text.
| | 01:44 |
If it doesn't find the text, then it
returns a negative one.
| | 01:48 |
And that's perfect for us, so we'll use
it in an IF statement.
| | 01:51 |
So if it finds that the text http:// is
not in the URL field, then I'm going to
| | 01:55 |
output an error.
I'll set the inner HTML to some text.
| | 02:03 |
So let's check out our form now.
I'm going to refresh my page, and I'm
| | 02:07 |
going to try to type in a URL without the
http field.
| | 02:11 |
So now I get an error that says, URLs
must begin with http://.
| | 02:16 |
So that works well, but somebody could
type on our field and then tap out of the field.
| | 02:21 |
We just refresh the page, somebody could
tap in here and then just tap out of it,
| | 02:25 |
and not place a URL.
Let's make sure that if they focus on
| | 02:28 |
this field without filling out what we
need, then they'll get a message.
| | 02:32 |
We'll use the onblur function for that.
I'm going to copy this line right here,
| | 02:35 |
because the call is going to be pretty
much the same, but we're just going to
| | 02:38 |
call the onblur function.
We'll add a comment, and let's add
| | 02:43 |
another comment right here as well.
So, we'll check to see if the value of
| | 02:49 |
the My URL field's empty, and will send a
different error.
| | 02:54 |
So let's go back to the form and I'll
refresh, and I'll try tapping into the
| | 02:59 |
field and then tapping out.
Now it tells me that the URL field is required.
| | 03:05 |
And if I try to type in something like
go.com, it says that URL must begin with
| | 03:09 |
an http.
So, so far this form is a little like a
| | 03:12 |
bad roommate that's always complaining
about stuff, but doesn't really want to
| | 03:14 |
help out.
So, let's help the user out by adding the
| | 03:18 |
http:// if they forget to put it in.
So we'll add that right here, so I
| | 03:23 |
going to save this and go back into my
form, and I'll refresh it.
| | 03:27 |
And now if somebody puts in something
like go.com and hits Tab, it's actually
| | 03:31 |
going to complain about it, but it's
going to help them out and put it in
| | 03:34 |
there as well.
You may want to get rid of this
| | 03:37 |
complaining, that's up to you.
There's a possibility now that when
| | 03:41 |
somebody comes in here, they'll just tap
out of it and they'll try to submit an
| | 03:45 |
http field without a value in it.
So let's see if we can fix that, we'll
| | 03:50 |
add something to our onblur event
handler.
| | 03:52 |
So I'm going to copy this part right here
and paste it, and then I'll just check
| | 03:57 |
for just the http by itself.
And I'll say here please add a valid URL.
| | 04:04 |
So I'm sure you're thinking, there's
still probably a thousand ways of
| | 04:08 |
breaking this form.
And who knows if the rest of the URL is
| | 04:11 |
even correct.
So they can type a URL that doesn't have
| | 04:15 |
a .com or, or some other sort of weird
URL problem.
| | 04:18 |
The important thing is to remember to use
the techniques we've used here, for your
| | 04:21 |
own validation needs.
Try to help the user be more accurate by
| | 04:25 |
providing messages and hints, helps them
be happier when they're filling out your forms.
| | 04:30 |
| | Collapse this transcript |
| Using the selectedIndex property| 00:00 |
Just about all the text fields in an HTML
form are input fields.
| | 00:03 |
The exceptions are the text area field,
which is really just like a text field,
| | 00:07 |
and also the select field.
The select field is quite another beast,
| | 00:11 |
so I wanted to cover how to handle
onchange events on select fields.
| | 00:16 |
Select fields have a special and very
useful property called the selectedIndex
| | 00:20 |
property, which shows you the option that
a user has selected from its list.
| | 00:26 |
So, let's take a look at this form, which
we're going to be working on in this movie.
| | 00:31 |
This form just has a single field, and
it's a pop up field with a list of some websites.
| | 00:36 |
If you take a look at the code, you'll
see that the value field for each of
| | 00:39 |
those is an actual site.
So what I'm going to do is, after the
| | 00:43 |
form field, I'm going to add a script
tag.
| | 00:46 |
And on that script tag, I'm going to
target the form.
| | 00:49 |
And our field is called reference, so
I'll target that.
| | 00:53 |
And I'll add an onchange event handler.
That's going to be a function literal,
| | 00:58 |
means just a function with no name.
And inside that, I'm going to create a
| | 01:02 |
variable, called id, that is going to
hold the value of the selected index
| | 01:06 |
field for that form.
So I'll target the document, form, and
| | 01:11 |
then the reference, element.
And I want to target the selectedIndex
| | 01:17 |
property of that field.
So I'll store the selection from the user
| | 01:21 |
into this variable called id.
Now once I have that, I can get the value
| | 01:25 |
of the selected element, and put that in
another variable.
| | 01:29 |
So, I'll create another variable called
url, and that's going to be pretty much
| | 01:33 |
the same thing, document, target the
form, then the reference variable.
| | 01:39 |
And I'll pass it along the id, that's the
variable we just created.
| | 01:43 |
And I need the value of that id.
So, my URL is going to be the value of
| | 01:49 |
the item that the user has selected.
Now after that, I'll set the location of
| | 01:53 |
the window.
So I'll do Window > Location.
| | 01:56 |
And set the href, or the URL of the
current window, to that URL that we
| | 02:01 |
received from the pop up list.
So, let me go ahead and save this, and
| | 02:06 |
I'll go back into my form, and I'll
refresh.
| | 02:09 |
You'll see that whenever I chose one of
these elements, it's actually going to go
| | 02:13 |
to that website.
So, although the onchange event still
| | 02:18 |
triggers in the same way for select and
input fields, getting information about a
| | 02:22 |
select field is a bit different.
The selectedIndex property helps you
| | 02:26 |
access the option that has been chosen by
the user.
| | 02:30 |
| | Collapse this transcript |
| Dynamic validation with regular expressions| 00:00 |
Regular expressions give you a way to
search for patterns in form fields.
| | 00:04 |
And that can help with validation and
processing.
| | 00:06 |
I talked about regular expressions in the
movie on constraining with regular
| | 00:10 |
expression patterns.
The regular expression syntax in HTML5 is
| | 00:14 |
pretty similar to JavaScript.
As a matter of fact, the HTML5
| | 00:18 |
implementation is a copy of the
JavaScript implementation, so you can use
| | 00:23 |
them mostly interchangeably.
In JavaScript, you have to create a
| | 00:28 |
regular expression pattern and then use
the search method to search for that
| | 00:31 |
pattern in an input field.
So, you might be asking yourself, why do
| | 00:35 |
I need to validate for patterns, if I can
just use the pattern attribute in HTML5.
| | 00:40 |
Well, with validation, it's important to
try to be as compatible with older
| | 00:44 |
browsers as possible.
Using regular expressions in JavaScript,
| | 00:47 |
will let you build validation that's
compatible with older browsers.
| | 00:51 |
Another reason is that the pattern
attribute, prevents the form from
| | 00:54 |
submitting but it doesn't offer the user
feedback while they're filling out the form.
| | 01:00 |
So, it's more user friendly and helpful
to give the user feedback as they're
| | 01:03 |
filling out fields, rather then waiting
until they consider the task already done.
| | 01:09 |
So, we're going to work with this form
and we're going to build validation that
| | 01:12 |
happens, as soon as a user types
something into this telephone field.
| | 01:16 |
So, I'm going to go to the code and I'm
going to use a separate JavaScript file.
| | 01:19 |
I've already created the file right here,
but I need to link to it from my
| | 01:23 |
index.html document.
I also have an error field with an ID of
| | 01:27 |
form error, on this HTML page.
So, I'm going to go all the way to the
| | 01:31 |
bottom, and right before the closing body
tag I'm going to make a script tag that
| | 01:35 |
links to our JavaScript.
Now that this too are linked, I'll switch
| | 01:40 |
over to my JavaScript file, and I'll
start by creating a couple of variables
| | 01:43 |
that will target the telephone attribute.
Then I'm going to create a variable for
| | 01:48 |
the error, so that targets the error
field.
| | 01:51 |
Next we're going to need a pattern, and
I'm going to get that form this website
| | 01:55 |
called html5pattern.com.
Html5pattern.com has a lot of different
| | 01:59 |
HTML5 type patterns and since they're
very compatible with JavaScript patterns,
| | 02:04 |
we're going to use it to build our
application.
| | 02:07 |
So, I'm going to come here and go to the
phone section.
| | 02:11 |
And scroll down to the USA phone number
and just grab this telephone number right here.
| | 02:16 |
And I'll switch back into my script.
Now this is the pattern that I'm already
| | 02:21 |
using in the phone field.
So, really I could have grabbed it from
| | 02:24 |
right here.
But I wanted to show you the website.
| | 02:27 |
And let's take a look at the telephone
field.
| | 02:29 |
You can see that I've already used that
pattern.
| | 02:30 |
Right here.
So, I'm going to put that into my script.
| | 02:36 |
Before I can use it, though, I need to
escape some of these digit fields.
| | 02:39 |
The search function expects a pattern as
a string.
| | 02:43 |
So, if we submit the pattern like this,
it's not going to work.
| | 02:45 |
We're going to need to add slashes to
everything that already has a slash in
| | 02:49 |
this pattern.
Now we can start creating the onchange function.
| | 02:54 |
So, I'm targeting myField, which is
targeting the document.theform.telephone.
| | 03:00 |
And I'm going to add an onchange handler,
that will look for that event, as soon as
| | 03:04 |
it happens.
So, now I'm going to create a variable
| | 03:07 |
for the pattern, and I'm going to set
that variable to be a new regular expression.
| | 03:12 |
And into that regular expression, I'm
going to pass my pattern.
| | 03:17 |
So, I'm going to grab it from right here,
and go to my regular expression, and in
| | 03:21 |
quotes, paste the pattern in.
And then I'm going to add a comma and
| | 03:26 |
then the keyword i, which just means that
this search will be a case insensitive search.
| | 03:33 |
Doesn't necessarily matter for phones,
but it's a good thing to have for any
| | 03:36 |
kind of pattern so we'll leave it like
that.
| | 03:39 |
Now, I'm going to create a variable and
it's going to be called isValid.
| | 03:42 |
And that value is going to implement the
search function.
| | 03:45 |
So, what we want to do is search for
this, this is going to be myField, it's
| | 03:49 |
going to be the same as myField.
So, I'm going to ask the myField value to
| | 03:54 |
execute the search function and into that
I'm going to pass the pattern that I just
| | 03:58 |
created, myPattern.
And I'm going to check to see if this
| | 04:03 |
pattern is greater than or equal to zero.
The reason for that is that, search will
| | 04:08 |
look for the pattern in some text, in
this case it's going to look for the
| | 04:12 |
pattern inside this value, which is the
myField value, which is targeting this telephone.
| | 04:19 |
And if the pattern is found within the
text, then it's going to return a
| | 04:22 |
numerical value of where that value was
found in the text.
| | 04:27 |
If it doesn't find the pattern, it's
going to return negative one.
| | 04:31 |
So, what I need to do is check to make
sure that, that pattern is greater than
| | 04:34 |
or equal to 0.
That means the pattern has been found.
| | 04:39 |
The JavaScript search function checks for
a pattern in a string.
| | 04:43 |
It returns the position of the pattern
within the string.
| | 04:45 |
If the pattern doesn't exist, it's going
to return a negative one.
| | 04:49 |
So, if the pattern matches then we can
output something to the screen.
| | 04:53 |
So now I'm going to do a check for, is
the pattern not valid, right, so that's
| | 04:59 |
what this says right here.
Is the pattern valid?
| | 05:05 |
And if it's not valid, then we're
going to do something and if it is valid
| | 05:08 |
we're going to do something else.
So, just sort of we can remember pattern
| | 05:15 |
not valid, adding a comment here, so
pattern is valid.
| | 05:24 |
And what we'll do is, we'll target the
field myError which right now it's
| | 05:28 |
pointing to the element with an ID form
error.
| | 05:31 |
And we'll get the inner HTML of that
field, and then make it equal to some text.
| | 05:38 |
INput does not match expected pattern.
And we'll put in the pattern that we
| | 05:45 |
expect here so the user can read it.
Now, if the pattern is valid, then it's
| | 05:51 |
just going to clear out this field.
We'll just make it blank like this.
| | 05:58 |
And then, I'm going to save this file.
I could probably use another comment
| | 06:01 |
right here.
One more thing I have to do is, I have to
| | 06:04 |
make sure that this IF part is actually
within the onchange handler.
| | 06:08 |
So, I'm going to go and put that in here.
Let me space it out a little better as well.
| | 06:14 |
Tab it in, and now it'll do this
validation check after the field has changed.
| | 06:20 |
So, I'm going to save this and switch
back over to my browser.
| | 06:23 |
Make sure I refresh my page.
And if I go to the phone field and try to
| | 06:27 |
type something other than a phone.
Notice that I get "the input that not's
| | 06:31 |
match expected pattern text" that I typed
in there.
| | 06:35 |
If I do type a phone, type in something
in the correct format and I hit tab, that
| | 06:39 |
goes away.
So, now that we're able to give feedback
| | 06:43 |
to the user not just on submit, but also
during completion, it seems like the form
| | 06:47 |
is a little more user-friendly and
helpful.
| | 06:52 |
There's a few ways we could probably
improve on the script and make it more
| | 06:55 |
generic so that we can use it in other
input fields.
| | 06:58 |
We'll tackle that on the next movie.
| | 07:00 |
| | Collapse this transcript |
| Creating a generic input validation function| 00:00 |
In the last movie, we added dynamic
validation to our form with regular
| | 00:03 |
expressions, so we can give the users
some feedback while they're typing out in
| | 00:07 |
the form.
So if I come over here and I try to type
| | 00:10 |
in something other than a telephone
number.
| | 00:13 |
And when I hit the tab key, it says
input does not match expected pattern.
| | 00:17 |
This works fine, but we could make it be
a lot more efficient, and also easily
| | 00:21 |
make it work with any of our other input
fields.
| | 00:25 |
So, let's take a look at how we can take
this concept.
| | 00:27 |
And generalize it to work with a range of
fields.
| | 00:31 |
We're using a pattern for detecting phone
numbers from the website html5forms.com.
| | 00:36 |
Matter of fact, we use the same pattern
twice, once in our index.html file, you
| | 00:40 |
can see it if you scroll down to the
telephone field that there's a pattern
| | 00:43 |
right here.
And we're also using it in our script.
| | 00:49 |
And that is right here.
I have to escape some of those characters
| | 00:52 |
in order to make it work.
So we can simplify this by having
| | 00:55 |
JavaScript read the pattern from the
input field, since once the page is
| | 00:59 |
loaded, the pattern becomes a property of
the input field.
| | 01:03 |
So we can replace all this with just the
text, this.pattern.
| | 01:08 |
Remember that this right now happens to
be related to my field.
| | 01:13 |
And my field is linked to my form and the
telephone input field within that form.
| | 01:19 |
So since we're reading the pattern what
we can also do is read the place holder field.
| | 01:25 |
So we'll create another variable, I'll
just copy and paste this one.
| | 01:28 |
This one will be called my placeholder.
And it's going to read the pattern
| | 01:33 |
placeholder field.
Now that we have the pattern and the
| | 01:36 |
placeholder, we can change our text right
here, so that instead of physically
| | 01:40 |
putting the input field's placeholder, we
can just add it by adding a plus sign
| | 01:44 |
here and then saying, my placeholder.
So if I save this and I go back into my
| | 01:51 |
form, I'm going to refresh the page, and
try the same thing, you'll notice that
| | 01:55 |
it's working exactly like before, but the
way we get the information is a lot different.
| | 02:03 |
Now the form will be easier to update
since we only have to update the
| | 02:07 |
placeholder field in the index.html.
In the movie on looking up form elements,
| | 02:12 |
we discovered we can look up all the
input fields at once by using the get
| | 02:15 |
element by tag name function.
So, if we wanted to, we could use that to
| | 02:21 |
go through all of our input fields and
run our validation code, pass them in sequence.
| | 02:27 |
So, I'm going to switch over to my
JavaScript, and at the very top, I'm
| | 02:32 |
going to add a new variable called input
fields.
| | 02:38 |
And that's going to be equal to document,
the form, and I'm going to get elements
| | 02:43 |
by tag name.
And just get all the input fields fed
| | 02:50 |
into an array.
So now what we need to do is find a way
| | 02:53 |
of executing all this code for every
single one of those input fields.
| | 02:59 |
To do that, I'm going to use the For
function.
| | 03:01 |
So it's going to look like this.
For, then I'm going to add a key here, in
| | 03:05 |
input fields.
And then, it's going to execute the code
| | 03:08 |
within these curly brackets in sequence.
So we can grab all this code, cut it out
| | 03:13 |
of here, and just paste it right in here.
Now, I'm going to go ahead and indent so
| | 03:19 |
it is easier to read.
And I'll make sure I'll add a comment
| | 03:22 |
right here.
And now all we need to do is modify, the
| | 03:25 |
my field variable, so that instead of
looking for just the telephone, it's
| | 03:29 |
going to go through each one of these
input fields.
| | 03:34 |
That looks like this, I'll type input
fields, and then, I'll pass it along the
| | 03:38 |
key, and now it's going to go through
every one of those input fields in a
| | 03:41 |
loop, and attach an on change handler to
each one of them.
| | 03:47 |
And in each of those, it's going to look
for the pattern that is in the pattern
| | 03:50 |
attribute, and it's going to put the
placeholder in the placeholder attribute.
| | 03:55 |
Let's go ahead and save that and see what
happens in the form.
| | 03:58 |
So check here, I'm going to refresh this
page.
| | 04:00 |
And let's test out the telephone again.
Type something that's not a telephone.
| | 04:03 |
And it tells you that the input does not
match expected pattern, that's what it
| | 04:06 |
was doing before.
Now let's try typing in something else,
| | 04:09 |
like a name.
So the name expects the pattern to be
| | 04:11 |
last name comma first, so I'll just type
something in there.
| | 04:15 |
Notice that now it's telling you that the
input does not match expected pattern,
| | 04:17 |
but it's showing you a different pattern.
So, you can easily use JavaScript
| | 04:22 |
functions like getElementByTagName, to
help you take code for a single
| | 04:26 |
validation and turn it into code for your
entire form.
| | 04:30 |
| | Collapse this transcript |
| Validating in older browsers with Modernizr| 00:00 |
If I had a time machine, I would go back
in time, and do something about Internet
| | 00:04 |
Explorer's 6 through 9.
They create all kinds of problems, and
| | 00:08 |
JavaScript is no exception.
Here I am on Internet Explorer 9, and I
| | 00:12 |
wanted to show you that the validation
that I've built, is not working.
| | 00:17 |
So, if I type something in here, and I
hit the Tab key, you can see that it's
| | 00:20 |
not recognizing any validation.
So, let's see what's happening.
| | 00:24 |
I'm going to go to the Developer tools.
I can do that by clicking on this menu,
| | 00:27 |
and selecting Developer tools.
From here you want to make sure that you
| | 00:31 |
click on Script, and then on the right
hand side, make sure that you click on Console.
| | 00:36 |
If you want to, you can pull up
JavaScript from the page, clicking on
| | 00:38 |
this pop up menu.
So, on the right hand side at the bottom,
| | 00:41 |
I'm going to ask the browser to show me
the place holder.
| | 00:45 |
So, I'll type in document, my form, my
name and then placeholder.
| | 00:53 |
And notice that it's not showing me
anything.
| | 00:55 |
That means that this browser doesn't
recognize the placeholderb as a value for
| | 00:59 |
that input field.
The weird thing is, that if I switch this
| | 01:03 |
browser to IE8 mode, so I'm going to do
that by going right here, and switch into
| | 01:07 |
Internet Explorer 8.
And switch the document mode to also
| | 01:11 |
Internet Explorer 8, it's already chosen.
And right here on the console, I'm
| | 01:15 |
going to hit the Up arrow.
That brings up the last command, and then
| | 01:18 |
I'm going to hit Enter.
Now it's showing me the value for the
| | 01:22 |
placeholder, which is last comma first.
And as a matter of fact, if I type
| | 01:26 |
something in here, say my name again, and
I hit Tab, it recognizes my validation.
| | 01:32 |
I verify that this is what happens, on a
real IE 8 browser.
| | 01:35 |
And it's one of the problems that comes
up, when working with older browsers.
| | 01:38 |
It doesn't really make any sense, for the
pattern attribute to be recognized in IE
| | 01:43 |
8, but not on the newer IE 9.
This is a definitely a problem, that
| | 01:48 |
we're going to need to address.
So, in order to fix that, I'm going to
| | 01:51 |
use a library called modernizer.
modernizer let's you look for feature
| | 01:55 |
support in different browsers.
We can use it to detect whether or not a
| | 01:59 |
browser has support for patterns, and
placeholder attributes, and then add some
| | 02:03 |
backup validation for those.
It's super easy to use and install.
| | 02:08 |
So, from the Home page, if you just want
to play around with it, you can click on
| | 02:11 |
Download This Development Version.
But notice it's 42k, and we don't need
| | 02:16 |
the whole library, we just need the part
that deals with forms.
| | 02:20 |
So, if you click on Download, you can
figure your Own Build, and customize how
| | 02:23 |
the library will get downloaded.
We really don't need very much, so I'll
| | 02:28 |
click these Off right here.
And I'll make sure that I have the part
| | 02:32 |
of the library that checks for input
attributes, and input types only.
| | 02:38 |
Now, from here I can click on this
Generate button, and it's going to
| | 02:41 |
generate a special version of the file
for me to Download.
| | 02:45 |
So, I'll click on this Download Custom
Build, and it's going to Download that,
| | 02:48 |
and let me go ahead and Open this up.
So, I'm going to look for it in the
| | 02:53 |
Downloads folder, and here's my
customized JavaScript file.
| | 02:57 |
Now, I'm going to Rename it
modernizer_forms.js, and then put it into
| | 03:01 |
my projects folder.
Now I'll go back into my code, and in the
| | 03:07 |
index, that HCML file, I need to load
that library.
| | 03:11 |
I'll go to the very top, and right
underneath my styles, I'm going to add a
| | 03:15 |
Script Tag, and the Script's going to
have a Source of modernizer_forms.js.
| | 03:21 |
So, it loads that library at the
beginning, and I'm going to Save that.
| | 03:25 |
That's all I need to do on this page.
Next, I'll go into myscript.js, and I'll
| | 03:30 |
start creating an alternate way for
browsers that don't support those fields,
| | 03:33 |
to have validation.
So, right underneath my input fields, I'm
| | 03:37 |
going to need to create a JavaScript
Object.
| | 03:40 |
If you want to learn more about
JavaScript Objects, make sure you check
| | 03:43 |
out my course JavaScript and JSON and
online training library.
| | 03:47 |
So, what I'm going to do here is, create
an Object called Validation Info.
| | 03:51 |
It's going to be in a new variable.
This Object is going to have information,
| | 03:55 |
that's going to be similar to the
information already on the form.
| | 03:59 |
So, I'm going to go here and type in my
name, that'll create a My Name Object,
| | 04:03 |
and that will have another Object inside
it.
| | 04:07 |
And in here I'll type in pattern, and
place a pattern for the name field.
| | 04:13 |
Then I'm going to use another item called
a Placeholder, and this will have the
| | 04:17 |
text for my Placeholder.
So, we need to get this pattern.
| | 04:21 |
I'm going to go back into my index, that
HTML file, and I'll find the area with
| | 04:25 |
the name and Copy the pattern from right
here.
| | 04:29 |
So, I'll Copy this, go back to my Script,
and Paste that right there.
| | 04:36 |
And now I'm going to add another Object,
so the things that I want to validate on
| | 04:40 |
this form, are gong to be my name, as
well as my telephone.
| | 04:44 |
My telephone is going to have a different
pattern, and a different Placeholder.
| | 04:48 |
And I'll go back into my index, that HTML
file, and I'll Copy the pattern from here
| | 04:51 |
as well.
Now I need to go ahead and Escape the
| | 04:55 |
slashes, so I'll just type in double
slashes, for all the single slashes here,
| | 05:00 |
to fix my pattern.
Now, right now, here's the part of the
| | 05:05 |
code where I'm checking for a pattern, as
well as a Placeholder, that are coming
| | 05:08 |
right now from the input fields in my
form.
| | 05:12 |
I need to Modify that, and use that, only
when the pattern attribute is available
| | 05:15 |
to the browser.
So, this is where I need to use modernizer.
| | 05:20 |
modernizer creates an object called
modernizer, that has information about
| | 05:23 |
each type of thing, that you're trying to
check for.
| | 05:27 |
So, what we need to do here is create an
If statement, check the modernizer
| | 05:32 |
object, for input field in pattern.
So, if the modernizer object has a
| | 05:38 |
pattern field in the input object, than I
can do something, and what that's
| | 05:43 |
going to be is, what I was doing before.
This is what the browser will use when
| | 05:49 |
there's normal pattern support.
Otherwise, I need to do something else,
| | 05:52 |
and this is where my object comes in.
It's going to be pretty much what I did
| | 05:56 |
before, except that instead of using this
pattern, it's going to use my object that
| | 06:00 |
I created up here, called Validation
Info.
| | 06:05 |
And I'm going to pass it, my name or the
name of the current field, remember, this
| | 06:09 |
is a loop that goes through all the
fields in the form.
| | 06:13 |
So, this should say this, dot name, an
then it's going to look for a pattern.
| | 06:18 |
And that pattern would be this field
right here, or this field right here, as
| | 06:22 |
it goes through the form.
And then for Placeholder, it's pretty
| | 06:29 |
much going to be like this, except it's
going to look for the Placeholder object.
| | 06:38 |
The rest of the Script is going to be
pretty much the same.
| | 06:42 |
Here I am back on Internet Explorer 9,
but I'm still running on IE 8 mode.
| | 06:47 |
So, let's switch over to IE 9 mode.
I'll go to Browser mode here, and select
| | 06:51 |
IE 9.
Make sure that my document mode is also
| | 06:53 |
in IE 9 standards.
And I'm going to see if my changes work.
| | 06:58 |
And sure enough, adding modernizer has
made it possible for our form, to
| | 07:02 |
understand our validation even in IE9,
which wasn't supporting the Placeholder
| | 07:05 |
standard before.
So, I'm going to go ahead and Save this,
| | 07:10 |
and this should be working now, in old
versions of Internet Explorer, namely,
| | 07:14 |
Internet Explorer 9.
So, old versions of IE require a little
| | 07:19 |
special tender loving care.
modernizer makes it easy to detect for
| | 07:23 |
shortcomings, in older browsers, so that
we can write code, that is more
| | 07:27 |
compatible and accessible, to a larger
part of the net population.
| | 07:32 |
| | Collapse this transcript |
| Interrupting form submission with onsubmit| 00:00 |
When the user submits the form, the
browser fires an onsubmit event.
| | 00:04 |
Your page can capture that event and
prevent the form from being submitted.
| | 00:08 |
That way, you can form your own
validation, and if necessary add HTML5
| | 00:11 |
functionality to older browsers.
So let's see how we can add something
| | 00:15 |
like this our form.
Here's our form so far.
| | 00:18 |
Right now, if I try to send this form,
the HTML5 validation will take over.
| | 00:23 |
I need to make that work for older
browsers.
| | 00:26 |
To do that, I'm going to go into my form,
and in my HTML document, I'm going to
| | 00:30 |
remove the required attributes from both
the name as well as the email fields.
| | 00:37 |
We'll add them back later, but that'll
make the form work like an older browser.
| | 00:40 |
So to prevent a form from submitting, we
need to add an onsubmit event handler.
| | 00:45 |
Let's do that in our JavaScript file.
So, I'm going to go over here, and right
| | 00:49 |
after my validation info object, I'm
going to add an onsubmit event handler.
| | 00:56 |
This is going to be a function literal,
which means just a function with no name.
| | 01:00 |
And I'm going to put an alert.
This is going to say that the submission
| | 01:05 |
has been interrupted.
And then I'm going to type in return false.
| | 01:11 |
Return false is what's going to prevent
the form from submitting.
| | 01:13 |
So I'm going to hit Save, go back into my
form, refresh.
| | 01:17 |
And I'm going to hit the Send button now.
And you'll see that the alert comes up,
| | 01:21 |
and the form doesn't submit.
So even if I type in something in here,
| | 01:25 |
hit send.
The alert comes up, the form does not submit.
| | 01:29 |
My info's still there.
So that's all well and good, but we need
| | 01:32 |
to add the HTML5 required field
functionality into this form for older browsers.
| | 01:37 |
So I'll switch back into my script, and
I'm going to modify the validation info object.
| | 01:43 |
Right now, it has two fields, my name and
my telephone.
| | 01:46 |
And the field that I want to modify first
is the myName field.
| | 01:51 |
I'm going to add a required object here,
and I'm going to set this to true.
| | 01:56 |
That way, it'll make sure that I validate
that field.
| | 01:59 |
I'm also going to add a myEmail object
here, and set the required field here to
| | 02:03 |
true as well.
So now that I've done that, I can work on
| | 02:07 |
my onsubmit function.
I'm going to move the myError variable,
| | 02:11 |
which right now is in the input field
validation, to the very top, so it's a
| | 02:14 |
variable that's accessible to both of our
functions.
| | 02:18 |
So I'm going to cut it out of here, and
I'm going to put it right up here, next
| | 02:21 |
to input fields.
So when somebody submits the form, I
| | 02:25 |
want to go through all of the elements in
my validation info object.
| | 02:31 |
And check to see if there's any fields
that are required.
| | 02:33 |
In this case, my name and my email.
So I'll use the for loop, and check for
| | 02:38 |
key in validation info.
And here, I'm going to create a variable
| | 02:44 |
called myField.
And that variable is going to be set to
| | 02:48 |
the document.
And get element by ID.
| | 02:51 |
Then I'll use the key from this for loop
here.
| | 02:55 |
That'll go through each one of the
individual objects in my validation info object.
| | 03:00 |
Next, I'm going to check to see if the
current validation object has a required element.
| | 03:05 |
And also, if my current field, the one
that I'm testing, is false or true.
| | 03:10 |
So, if the validation objects' key, the
current key as we go through this loop,
| | 03:16 |
has a required field.
And if there is an element, which we
| | 03:22 |
stored into this variable called myField.
And that element has a value that's
| | 03:27 |
empty, then I'm going to do the
following.
| | 03:30 |
I'm going to set the error message for
the page, I've already done that down
| | 03:34 |
here, so I'm just going to copy this
line, and paste it right here.
| | 03:40 |
And I will change that error to read
required field.
| | 03:47 |
Then I'll use the key, which the name of
the input field, and then I'll add not filled.
| | 03:54 |
To help out the user, I'll position the
insertion point in whichever field I'm
| | 03:58 |
talking about.
You could do that with the select method.
| | 04:02 |
And then we'll return false, because we
don't want the form to process.
| | 04:06 |
If none of the required fields are empty,
then I'm going to return true.
| | 04:11 |
And the form will submit as usual.
Looking at this code, it looks like I
| | 04:15 |
need to make sure that I add a double
equal sign instead of a single equal.
| | 04:19 |
A double equal is a comparison operator.
A single equal is an assignment operator.
| | 04:24 |
So that needs to be done like that.
And I'm going to save this, and I'll
| | 04:27 |
switch back onto my form.
Refresh it, and I'm going to try to
| | 04:31 |
submit the form, and it's going to give
me an error right here.
| | 04:35 |
If I do fill out this field, and I try to
submit, it'll tell me that the email was
| | 04:39 |
not filled, and it'll put the cursor at
that spot.
| | 04:44 |
So that's working pretty well.
Now, I need to go ahead and turn on HTML5
| | 04:47 |
validation for this form, and then use
modernizr to make sure that this is
| | 04:51 |
going to work in older browsers.
So, I'll switch back onto my form, and
| | 04:57 |
right over here, I'm going to add an if
statement.
| | 05:01 |
And what I need to check is that if the
modernizr object does not have the
| | 05:05 |
required variable in it, then it's
going to perform everything in here.
| | 05:11 |
So I'm going to place all this code in
there, indent things a little bit, and
| | 05:16 |
I'll add another comma in, right here.
I need to go back into my HTML, and make
| | 05:22 |
sure I add the required attributes.
Now, if I go back into my form and
| | 05:27 |
refresh, the HTML5 validation will take
over in this browser, and browsers that
| | 05:31 |
do not support the required attribute
will be handled by my JavaScript.
| | 05:37 |
Sometimes its better for validation to
happen as the user interacts for your form.
| | 05:42 |
By capturing the onsubmit event, we can
perform our own validation, and also make
| | 05:45 |
up for some of the missing HTML5
attributes in older browsers.
| | 05:50 |
| | Collapse this transcript |
|
|
4. jQuery Form ValidationUnderstanding jQuery| 00:00 |
jQuery is a library that brings a lot of
functionality to JavaScript.
| | 00:04 |
Takes care of a lot of compatibility
issues in different browsers but one of
| | 00:07 |
the most useful features is the way you
can easily select elements.
| | 00:11 |
By far, selectors are the most powerful
feature in JQuery.
| | 00:16 |
JQuery creates a global variable the
dollar sign.
| | 00:19 |
To choose an element, you can pass a
selector as a parameter of the dollar
| | 00:22 |
sign global.
It works very much like CSS selctors.
| | 00:27 |
So, for example you can select our form
like this.
| | 00:30 |
You can probably tell by the pound sign
that we're asking jQuery to select an
| | 00:34 |
element with an ID of MyForm.
If you want just the input fields
| | 00:38 |
belonging to our form, simply pass along
the ID of the form plus a pseudo input selector.
| | 00:44 |
JQuery has a number of form specific
pseudo selectors like input, checked,
| | 00:49 |
radio, submit and text.
You can find all of them right here.
| | 00:54 |
In addition to that, you have the same
type of events you are already familiar
| | 00:57 |
with in JavaScript.
Events like blur, change, focus, submit,
| | 01:01 |
and value.
You'll find those on this page.
| | 01:05 |
The advantage of using jQuery events and
selectors versus JavaScript, is they tend
| | 01:09 |
to be more powerful and consistent in
behavior even in older browsers.
| | 01:15 |
So, I'm going to need to install jQuery
in our form to do that I'm going to go to
| | 01:19 |
the home page of the jQuery website, and
I'm going to click on this Download
| | 01:22 |
JQuery link.
I'll scroll down to the part where it
| | 01:27 |
says "using jquery with a cdn." So I'm
going to select just this one line.
| | 01:32 |
This other line supports legacy jQuery
installations.
| | 01:36 |
We're just using the current version, so
this will be fine.
| | 01:38 |
So, I'm going to copy this, and I'll go
into my code, and I'll put it right after
| | 01:42 |
the modernizer script.
So, I'm going to save that, I'm going to
| | 01:47 |
go to the page for this code, and I'll
refresh it and right click and select
| | 01:51 |
Inspect Element.
Now from here, I want to go over to the console.
| | 01:57 |
Now to select a form element I just
checked, the jQuery dollar global and I
| | 02:01 |
pass it along a string with whatever I
want to choose.
| | 02:05 |
So if I want to choose my form, I'll just
put # sign, MyForm and hit Return and
| | 02:09 |
that selects the entire form.
If I want just the input fields in
| | 02:15 |
MyForm, I can add the pseudoclass
selector input.
| | 02:19 |
And if I hit Return, notice that it gives
me all the form fields as an array.
| | 02:23 |
If you were to try to do that with
JavaScript, you'd have to do something
| | 02:25 |
like this.
Now, this is obviously a lot shorter but
| | 02:31 |
notice that the JQuery selector is
choosing all the fields, including the
| | 02:34 |
Select and Text Area fields.
That's certainly a lot more powerful.
| | 02:41 |
Choosing fields with specific attributes
is also super easy.
| | 02:44 |
So, for example, if we want to get all
the fields that have a required
| | 02:47 |
parameter, I can do that like this.
That gives me an array of all the input
| | 02:53 |
fields with the parameter required.
We could do the same thing for placeholders.
| | 03:00 |
The difference is that choosing an
element in this way will work in older
| | 03:03 |
version of IE consistently without
needing modernizer.
| | 03:07 |
Let's say you wanted to get information
about a specific field.
| | 03:11 |
Since our form fields have ID values,
it's easy to select them.
| | 03:14 |
You can also choose an item's attribute
with the type selector.
| | 03:18 |
Let's say we wanted to get pattern in the
input field with the ID of my name.
| | 03:24 |
You can also get just the text of the
pattern attribute or ATTR method.
| | 03:30 |
Although I always think that it's good
learn how to do things with regular
| | 03:33 |
JavaScript, jQuery does make it a lot
easier to work with the DOM.
| | 03:38 |
Your code will also be more backwards
compatible.
| | 03:40 |
If you want to learn more about jQuery
and its selectors, make sure you watch
| | 03:43 |
jQuery Essential Training with Joe
Marini.
| | 03:46 |
| | Collapse this transcript |
| Validating on submit with jQuery| 00:00 |
Let's get busy implementing some
validation using jQuery.
| | 00:03 |
I'm going to start off with the same form
from chapter three but I've added decode
| | 00:07 |
to include jQuery right here.
My javascript file right now is empty so
| | 00:11 |
we'll start with that.
First things first, whenever we are
| | 00:15 |
working with JQuery, we need to do things
after both jQuery and the entire page
| | 00:19 |
have loaded.
JQuery has a special event called ready.
| | 00:23 |
We'll start our form script by using that
method.
| | 00:28 |
We want to capture the Submit event so we
are going to use JQuery's Submit method.
| | 00:32 |
To make things more backwards compatible,
it's always better to use jQuerys methods
| | 00:36 |
instead of java scripts.
They're built to be more compatible with
| | 00:39 |
older browsers.
We can easily make sure that we choose
| | 00:43 |
each required field by using this
selector.
| | 00:48 |
So we're going to choose all the input
fields that have the required attribute
| | 00:51 |
in them.
Now, I want to go through each of the
| | 00:54 |
fields with the required attribute so we
can use jQuery's Each method.
| | 01:00 |
When we're using the Each method, jQuery
will try to go through each element of
| | 01:04 |
the inputs that it picked sequentially.
We can deal with the element as the loop
| | 01:10 |
is executing by using the This selector.
To get the value of the field, we're
| | 01:15 |
going to use the Val method.
So to check to see if this field is going
| | 01:19 |
to be empty, and we can check by typing
in this and then use the value function.
| | 01:25 |
So we're going to check to see if the
value of the current field is empty.
| | 01:31 |
If it is, then we're going to do
something right here.
| | 01:33 |
In the java script version of this
script, what we did before was output
| | 01:36 |
things to an output variable that was at
the top of the window right here.
| | 01:41 |
With jig query it's super easy to place
things before or after an existing element.
| | 01:48 |
There are two methods named one Before
and the other one After that let you do that.
| | 01:52 |
So, we're going to add a div after the
current input field to give the user
| | 01:55 |
feedback right next to the input field as
opposed to at the top of the form.
| | 02:02 |
We'll give it a class of error just like
before and type in a message.
| | 02:06 |
There's one more thing we need do.
We haven't really prevented the form from
| | 02:10 |
submitting so I'm going to add an abort
variable.
| | 02:12 |
We'll set it to false at the top of the
Submit method.
| | 02:17 |
And if any of the input fields are not
filled out, we'll set that variable to true.
| | 02:23 |
After we go through each field, we'll do
an if statement that prevents the form
| | 02:26 |
from submitting, if any of the required
fields haven't been filled out.
| | 02:32 |
Now if somebody doesn't fill out one of
the fields a second time and tries to
| | 02:35 |
submit the form they are going to keep on
getting errors.
| | 02:38 |
So we have to delete all the errors and
the page.
| | 02:41 |
This is one of those things that are
super easy with jQuery.
| | 02:45 |
You can ask for it to remove all the dibs
with a class of error in this way.
| | 02:52 |
So we'll do this at the very top of the
page before we check each input, so that
| | 02:55 |
jQuery can clear any errors that are
currently on the page.
| | 03:00 |
So I'm going to save this.
So if I go back into this form, I'm using
| | 03:03 |
the chrome browser because the chrome
browser understands HTML 5 validation.
| | 03:08 |
You're not going to see a change in this
form.
| | 03:10 |
So if I try and submit this form by
itself, notice that the HTML5 validation,
| | 03:14 |
is still taking over.
I'm going to show you this form in an old
| | 03:19 |
version of Internet Explorer, so you can
see how my validation works, in that browser.
| | 03:25 |
Here I am on an old version of Internet
Explorer.
| | 03:28 |
This happens to be IE9 and if I try to
scroll down and submit the form without
| | 03:32 |
filling the required fields.
it's giving me the errors, and it's doing
| | 03:37 |
so right underneath each required input
field.
| | 03:40 |
So that's definitely an improvement over
what we were able to do with plain JavaScript.
| | 03:44 |
| | Collapse this transcript |
| Building interactive jQuery validation| 00:00 |
In the previous movie, we created
validation when the user submits the form.
| | 00:03 |
Now I'm going to show you how to handle
more interactive validation.
| | 00:07 |
This time we're going to check for
validation when the user exits a field
| | 00:10 |
and has a placeholder attribute.
So I'm going to come right here and I'm
| | 00:14 |
going to do the dollar sign again.
And I'm going to type in input.
| | 00:19 |
And then use the type selector which are
these brackets and type in place holder
| | 00:23 |
that way we'll look for fields that are
input fields and also have a place holder.
| | 00:29 |
And then we'll attach the blur method.
The blur method will happen when somebody
| | 00:34 |
exits a field.
So this will execute a function.
| | 00:37 |
This is going to be a function literal,
or a function with no name.
| | 00:41 |
And we're going to do something in here.
So, what I'm going to do is, remove the
| | 00:46 |
current errors that are on the page.
Now, I'm going to create a set of
| | 00:50 |
variables that's going to keep track of
things.
| | 00:52 |
First, a variable to receive the pattern
from the pattern attribute in the form.
| | 00:56 |
Then another variable for the place
holder.
| | 00:59 |
Finally, we'll do one to check whether
the value of the field matches our pattern.
| | 01:05 |
Most of this is still going to be regular
JavaScript, so we'll check for the value
| | 01:09 |
of the current field, and then use the
regular JavaScript search method.
| | 01:14 |
We'll see if it's a positive number.
If it's a negative number, then the
| | 01:17 |
pattern hasn't been matched, so we'll
check for that in an if statement.
| | 01:21 |
So if the pattern is not valid, then I'm
going to execute some code right here.
| | 01:25 |
And that code will be to insert some HTML
displaying the error right after the
| | 01:29 |
current field, so sort of like what we
did up here.
| | 01:34 |
So I'll copy that code and change this
text.
| | 01:39 |
Now, if it's not valid, we can also do
one more thing.
| | 01:42 |
I'm going to move the insertion point to
the field that doesn't match the current pattern.
| | 01:47 |
Let's also add some comments.
Now I'm going to Save this and I'll go
| | 01:50 |
back into my form.
I'll refresh the page and I'll try to
| | 01:53 |
type something that doesn't match the
pattern.
| | 01:55 |
Notice that its telling me that the entry
does not match the expected pattern.
| | 01:59 |
And it reads the pattern value.
And it won't let me go to another field
| | 02:03 |
until the pattern's correct.
Same thing with the telephone number.
| | 02:06 |
Once again, our script is a lot shorter
when we use the jquery library.
| | 02:12 |
As a byproduct, it's also more
compatible.
| | 02:15 |
For example, older browsers support HTML
attributes like pattern and placeholder inconsistently.
| | 02:20 |
Although it has a lot of other benefits,
adding a library to your projects is
| | 02:24 |
going to increase the file size of your
page's download.
| | 02:27 |
So, when using Jquery, you'll have to
weigh whether the added features warrant
| | 02:31 |
the slightly larger download size for
your users.
| | 02:34 |
| | Collapse this transcript |
| Using the jQuery Validation plugin| 00:00 |
One of the common ways to add
functionality to jQuery is by using plugins.
| | 00:05 |
They are additional Javascript files
which expand the library.
| | 00:08 |
One of the oldest plugins available for
jQuery happens to be a form validation plugin.
| | 00:14 |
If you're already using jQuery on your
page, this might be a really quick
| | 00:17 |
solution for you since it's fairly easy
to set up.
| | 00:20 |
You could download the plugin from the
jQuery validation page.
| | 00:23 |
To install it just like with any other
script, you create a script tag with the
| | 00:27 |
URL of the library as the source.
We're going to go ahead and add it from a
| | 00:32 |
content delivery network, so that we
don't have to download the script.
| | 00:35 |
I'm going to go to cdnjs.com and I'll do
a search for validate.
| | 00:39 |
You can see the jQuery validate library
right here.
| | 00:43 |
So I'm going to copy this URL, and go
back into my form and I'll paste it right
| | 00:46 |
after the jQuery code.
Now I'm going to add the HTTP colon right here.
| | 00:51 |
Notice some problems if I don't add the
HTTP colon to this link.
| | 00:55 |
Now adding validation to our form is
going to be ridiculously simple.
| | 00:59 |
All we have to do is identify the form
within the jQuery global variable.
| | 01:04 |
And send it to the validate method at the
validate plugin created for us.
| | 01:08 |
So I'm going to go all the way to the
bottom and I'm going to replace my
| | 01:10 |
current script tag, which is calling my
validation script.
| | 01:14 |
And first, I'll call the document ready
function, and after that, I'll use the
| | 01:19 |
jQuery dollar sign global method.
And I'll pass it the location of my form,
| | 01:24 |
which is a form with an ID of my form.
And that's pretty much it by adding the
| | 01:30 |
validate method and targeting my form,
you've added all kinds of functionality
| | 01:33 |
to our existing page.
So I'm going to save this and go over to
| | 01:37 |
my form and I'll refresh and now when I
try to type in say, an email, if I don't
| | 01:41 |
type a correct email, it's going to tell
me please enter a valid email address.
| | 01:49 |
Notice that it's even making this font
automatically red for us.
| | 01:52 |
So if I type a correct email address, the
information goes away.
| | 01:56 |
Now if I try to submit the form, it'll
tell me to please enter your name.
| | 02:01 |
So it noticed that this field was a type
text field and it had a name alike my
| | 02:05 |
name and it automatically detected it as
a required field.
| | 02:11 |
Notice that I can type this with a way
that doesn't follow the requested pattern.
| | 02:15 |
And I can submit the form.
It's going to go ahead and submit the form.
| | 02:18 |
And it's not given me the live feedback
that I had when I created my own script.
| | 02:22 |
So you don't have all the functionality
that you have with your own script.
| | 02:26 |
You didn't really have to write any
JavaScript or jQuery at all.
| | 02:29 |
This is already given you a lot of
benefits.
| | 02:32 |
This plugin does depend on you coding the
form properly.
| | 02:35 |
With labels and ID's for form elements.
You can control and enhance your
| | 02:39 |
validation by adding a Javascript object.
Let's say we want to add another password
| | 02:44 |
field to verify the user typed in a
password and that it was at least eight
| | 02:48 |
characters in length, and that it also
matched the original password field, so
| | 02:52 |
I'm going to go into the code for this,
over to the password.
| | 02:57 |
And I'm going to copy this list item
right here, and just paste it one more time.
| | 03:04 |
I'll change the name of this right here,
to my password conf.
| | 03:09 |
And I'll change the ID as well, so that
these are related to each other, and the
| | 03:12 |
name of it will also be my password conf.
So, I'm going to save this, and I'm
| | 03:17 |
going to go all the way to the bottom and
modify the validate method that's being
| | 03:21 |
called right here, to add some
functionality.
| | 03:25 |
So, what we're going to do is, pass it a
rules JavaScript object, and that rules
| | 03:30 |
is going to be another object.
And we're going to pass it some rules.
| | 03:35 |
So, what I want to do is tell my password
field has to be at least six characters
| | 03:39 |
in length, and that it's going to be a
required field.
| | 03:44 |
Now, I'm going to copy this field and
paste it right here.
| | 03:47 |
And I'll modify it to save my password,
conf.
| | 03:51 |
So my password confirmation, I'm going to
delete the minimum length, and just tell
| | 03:58 |
it that this is going to be, equal to,
the field called, my password.
| | 04:06 |
Take out this comma.
So my password field is going to have a
| | 04:09 |
minimum length of six.
It's going to be a required field, and
| | 04:14 |
the password confirmation is going to
have to match whatever the password was.
| | 04:22 |
So lemme go ahead and save this and go
back into my form.
| | 04:25 |
I'll refresh, and I'll try to type in,
just the password here.
| | 04:31 |
Then I'll try to type in some other
password that doesn't match.
| | 04:34 |
If I do that then it's asking me to make
sure I set the same value.
| | 04:39 |
Let me try to type a short password.
Now it says that I need to enter at least
| | 04:43 |
six characters and also match the
password again.
| | 04:46 |
With a simple Javascript object I am able
to add additional functionality to my
| | 04:50 |
form without writing a lot of code.
Do remember that whenever you add a
| | 04:55 |
plugin, you're adding both size and
complexity to your pages.
| | 04:58 |
So you need to balance the ease of
implementation with the growing size of
| | 05:01 |
your pages.
We're not just adding the jQuery library,
| | 05:04 |
we're adding the jQuery library, plus an
additional validation plugin.
| | 05:09 |
This is however, a great way to get some
decent browser validation without a lot
| | 05:12 |
of work.
| | 05:13 |
| | Collapse this transcript |
|
|
5. Working with PHPCommunicating with PHP servers| 00:00 |
In this chapter we're going to be talking
about how you can use PHP, a server side
| | 00:03 |
language, to process and validate your
forms.
| | 00:07 |
We start out by talking about how the
process works between the client and the server.
| | 00:11 |
When a user fills out a form, the
information in the form needs to be
| | 00:14 |
validated and processed.
Although validation can happen while the
| | 00:19 |
user is filling out the form, a lot of
browsers and browser plugins allow you to
| | 00:22 |
turn JavaScript off, so you can't solely
depend on the browser, which is also
| | 00:26 |
called client side validation.
A language like PHP has special methods
| | 00:31 |
and functions.
That can better communicate with
| | 00:34 |
processes on your servers, like
databases, mail applications, and more.
| | 00:38 |
Because the script you used to validate
are invisible to the user, server side
| | 00:42 |
validation is more secure.
Once a user fills out a form, the action
| | 00:46 |
parameter tells the form to send the
information to a script written in a
| | 00:50 |
language like PHP.
The method parameter sends the data to
| | 00:54 |
the form processing script, in one of two
ways.
| | 00:57 |
If you use the get method, the data is
sent to the script as part of a URL.
| | 01:02 |
If you use the post method, the data gets
sent in the background.
| | 01:06 |
Each method has different advantages and
disadvantages.
| | 01:09 |
With the get method, requests can be
cached by the browser.
| | 01:13 |
The requests can also remain in the
browser history, and they can be bookmarked.
| | 01:18 |
But since there's a limit to how much
data can be sent via a URL, you can't
| | 01:21 |
send forms that have too much
information.
| | 01:24 |
On the other hand, with the post method,
requests are not cashed and don't remain
| | 01:27 |
in browser history.
So, the requests cannot be bookmarked,
| | 01:31 |
but there's no limit to the size of a
post request.
| | 01:34 |
So, you can send longer forms with this
method.
| | 01:37 |
Once the form is sent to the server side
script, the information can be accessed
| | 01:41 |
through something called a superglobal.
You'll find out more about superglobals
| | 01:46 |
on this page in the PHP manual.
Superglobals are associative arrays that
| | 01:50 |
are always available through every part
or scope of your server side script.
| | 01:57 |
The ones that are relevant to forms are
the get, post, and request superglobals.
| | 02:02 |
The get and post superglobals are
designed to receive information from the
| | 02:05 |
form, as specified in the method
parameter of the form.
| | 02:08 |
The request superglobal is a generic
variable designed to receive data from
| | 02:13 |
get, post, or even cookie requests.
The process for sending and receiving
| | 02:18 |
data is crucial to learning how to
process and validate form fields.
| | 02:22 |
In the next movie, we'll experiment with
how the superglobals receive data from forms.
| | 02:26 |
| | Collapse this transcript |
| Retrieving data from superglobals| 00:00 |
In this video we're going to take a look
at how the data from the form comes into
| | 00:03 |
a processing script through the different
PHP superglobals.
| | 00:07 |
And how you can access different types of
data.
| | 00:10 |
Before I do that, I want to show you that
I've modified the form we've been using a
| | 00:13 |
little bit.
I've removed some of the fields to make
| | 00:16 |
it simpler, and also taken out the
JavaScript calls.
| | 00:19 |
I've also taken out a (INAUDIBLE)
parameters like Required and Pattern, so
| | 00:22 |
that we can isolate server-side
validation without client-side intervention.
| | 00:28 |
Since this is going to invoke server-side
validation, I'm going to be working on a
| | 00:31 |
live server.
I've uploaded these files to an FTP website.
| | 00:36 |
You'll need to upload your own files to
your own server if you want to follow
| | 00:39 |
along, but you can grab these from the
Exercise files.
| | 00:43 |
One more change I've made is change the
file extension on the form, from .html to .php.
| | 00:49 |
A lot of servers require that the file
extension for server-side scripts be set
| | 00:52 |
to identify the language, processing the
script.
| | 00:56 |
In the Form code I've changed the action
parameter to call script called
| | 01:01 |
procces.php, that script is right now
empty.
| | 01:06 |
Finally the form is using a Get method to
send the form information.
| | 01:11 |
If you want to learn more about
installing PHP makes sure you check out
| | 01:14 |
installing Apache, MySQL, and PHP with
David Gassner.
| | 01:17 |
You can install a copy of PHP on your
local server and run these files locally.
| | 01:23 |
want to learn more about PHP itself, make
sure you check out PHP with MySQL
| | 01:26 |
Essential Training.
Finally, if you want to know about
| | 01:30 |
uploading and downloading files to a
server, make sure you check out Managing
| | 01:33 |
and Hosting Website.
Let's go back and to our form.
| | 01:36 |
So, I'm going to switch over to the
process.php document, and I'll start a
| | 01:39 |
script by using the less than sign, and a
question mark, and then the keyword PHP.
| | 01:46 |
Then I'll close that off right there.
And I'm going to execute a function
| | 01:50 |
called Var_Dump that just outputs a
variable.
| | 01:54 |
And I want to output the super global
that starts with a dollar sign and an
| | 01:57 |
underscore called Get.
Put a semi colon here, and I'll save
| | 02:00 |
this, and I'll come to the form and type
in my name.
| | 02:06 |
I'll hit the Send button.
And notice that two things have happened.
| | 02:09 |
The Var_Dump is outputting all of the
data from the form as a series of
| | 02:13 |
associative arrays.
You can see that, for example, my name is
| | 02:17 |
coming in as a string and it has what I
put in there.
| | 02:20 |
Everything else is pretty much blank, but
you could see that it's all there.
| | 02:23 |
Notice that it is also being transferred
via the URL because this is a Get method.
| | 02:28 |
And the information in the form is being
encoded into a URL variable.
| | 02:32 |
You can see that it replaced the space
here with a plus sign.
| | 02:37 |
Right.
So, let's switch to a POST method and
| | 02:38 |
output the POST for global instead.
I'll save the POST method and over here
| | 02:44 |
I'm going to switch the method of the
form submission to be POST.
| | 02:49 |
I'll save this, I'll refresh, I'll backup
to my form, refresh the information on
| | 02:53 |
the serve and type in my name again.
Now notice that it passed along the same
| | 03:00 |
data, but it did not pass it in a URL, it
simply passed the associative array.
| | 03:05 |
With just the information we needed.
There's a third super global you can use
| | 03:08 |
and it's called the Request super global.
So, I'm going to use Request right here,
| | 03:13 |
save it.
I don't have to do anything to my form.
| | 03:17 |
I'll just hit the back button, refresh
this, type in my name.
| | 03:21 |
And then I'll hit the Send button.
You can see that I got the same
| | 03:25 |
information from the form.
It's being sent in a POST method so I'm
| | 03:28 |
not really getting very much up here.
If I switch the Form method to get the
| | 03:35 |
Request method, it's going to receive the
data either way.
| | 03:39 |
So, the nice thing about the Request
method is that it doesn't matter how you
| | 03:42 |
tell the browser to send the form.
It's going to output the form variables anyways.
| | 03:48 |
Since I have the method as Get, it's
sending the information in the URL and
| | 03:51 |
it's outputting the associative array
with all the data.
| | 03:55 |
So, let's go ahead and fill out the form
a little more.
| | 03:57 |
So, I'm going to refresh, I'll type in
all this information here.
| | 04:02 |
So, I filled out this form completely,
and I'm going to hit the Send button, see
| | 04:04 |
what we get.
Okay, so this time I got a lot more information.
| | 04:08 |
And I'm going to copy this text so we can
take a look at it on a text editor, in a
| | 04:11 |
little bit better format.
So, I'm going to grab this, I'll come
| | 04:16 |
over here and right after this, I'll
paste this.
| | 04:19 |
And then, I'm going to take each one of
these brackets and just make it appear on
| | 04:24 |
a separate line.
So, you can see what's happening here,
| | 04:28 |
the Request superglobal is placing
everything in an associative array.
| | 04:32 |
And the associative array has a set of
keys, each key corresponds to what we
| | 04:36 |
called it in the input fields.
So, this is called my name here, that's
| | 04:40 |
the associative array my name here with a
string, and it has this data.
| | 04:45 |
So, I typed in "password" as the
password, and the password confirmation,
| | 04:47 |
so that's what it's outputting there.
Notice that for the Checkbox field, I
| | 04:52 |
received only one of the elements, even
though I had clicked on every single one
| | 04:56 |
of them, like this.
So, what's happening there is that
| | 05:01 |
checkboxes can have the same name.
So, if we look at the checkbox area right
| | 05:05 |
here, you can see that these check boxes
each had the same name, Favorite Music.
| | 05:10 |
If you have a checkbox that has a single
value, it's okay to give it a normal name.
| | 05:15 |
But since we have a checkbox that can
have one or three values, we're going to
| | 05:17 |
need to pass this a little bit
differently.
| | 05:21 |
So, we're going to have to modify this
Favorite Music variable to be Favorite
| | 05:25 |
Music and then pass it as an array
reference.
| | 05:29 |
So I'm going to save this, and then just
resend the form.
| | 05:32 |
Before I resend the form, let me see if I
can forward it, so I can show you another thing.
| | 05:37 |
Notice that, the, reference item, didn't
have a value, that's because I didn't
| | 05:41 |
choose anything from this pop-up right
here.
| | 05:45 |
So, let's go ahead and choose one thing,
we'll choose Facebook.
| | 05:48 |
Since I modified this form, I need to
refresh it and type this stuff in again.
| | 05:53 |
I'll click on all these three and pick
something from this pop up and pick one
| | 05:57 |
of these items.
Type in some long text and hit the Submit
| | 06:01 |
button, or Send button.
So, now we've got a lot more information,
| | 06:06 |
let's grab this info, go back to the
processing script and again paste it.
| | 06:12 |
Go ahead and look for these brackets and
you can see that it's passing along the
| | 06:17 |
Favorite Music as an array of three
elements this time.
| | 06:23 |
Each one, with the items that we chose.
The reference now has a value, because I
| | 06:27 |
did pick something from the pop up, so
this is a lot better.
| | 06:31 |
If you want to access one of these
values, and print it out, all we have to
| | 06:34 |
do is, use the associative array key.
So, let's go ahead and switch this code,
| | 06:39 |
so that I can output one of these
elements, so I'll do echo.
| | 06:43 |
Then I can use whichever superglobal I
want, and just pass the key to the superglobal.
| | 06:49 |
So, I'm going to hit Save and I'm
going to hit the Back button, and hit Send.
| | 06:54 |
Okay, so now I get the name and if I
want to get anything else, I just type in
| | 06:57 |
the name of that item.
So, if I want to get the password, I need
| | 07:01 |
to type in my password here, I'll save
this.
| | 07:04 |
And I'll type in a password, and I'll hit
Send, and notice that I get the password
| | 07:08 |
don't want to save that password so I'll
click that off.
| | 07:12 |
Out putting something with multiple
options, like this, is just a little bit
| | 07:15 |
more challenging.
So, what I'm going to do now is create a
| | 07:19 |
variable, I'll call it, Fav Music, and
pass along the request superglobal.
| | 07:26 |
With the name of the key, which in this
case will be Favorite Music.
| | 07:29 |
I don't need to use the array notation
here, I just need to call it by its
| | 07:33 |
normal name.
Next, I'm going to use a for each method,
| | 07:37 |
and I'll pass along the FavMusic array,
and I'll receive a key and a value.
| | 07:44 |
And for the code right here I'm just
going to echo the Fav Music array, and
| | 07:47 |
pass it along the key from the for each
statement.
| | 07:51 |
And then I can put in something like a
break character so we can see these on
| | 07:54 |
separate lines.
So, I'm going to save this and I'll
| | 07:58 |
resubmit the form, and now I can see each
value on a separate line.
| | 08:03 |
This is the way you would also do a
select field that was using the multiple attribute.
| | 08:09 |
Now that you know to access the output
and data that's passed from the form.
| | 08:17 |
| | Collapse this transcript |
| Using server-side validation| 00:00 |
Now that we know how to access variables,
let's take a look at how we would
| | 00:03 |
validate data in different ways.
I'm going to show you how to check for a
| | 00:07 |
required field, a minimum number of
characters, make sure that our passwords
| | 00:11 |
match, and use regular expressions for
validation.
| | 00:15 |
So, I'm going to set up some variables in
my process.php file.
| | 00:19 |
I'm using the files from the previous
movie, so I'm going to go ahead and
| | 00:21 |
delete everything right here.
And start by creating some variables.
| | 00:25 |
The input fields that we're going to work
with are: the name field, the password
| | 00:29 |
field, and the password confirmation
field.
| | 00:33 |
So I'll create variables for those.
I'll check the request, that we got from
| | 00:37 |
the server, and look for the variable, my
name, from the form.
| | 00:43 |
I can do the same thing for the password
and the password confirmation.
| | 00:47 |
The easiest type of validation to do is
check for required field.
| | 00:51 |
All you have to do is make sure that the
string is not empty.
| | 00:54 |
So, let's do that with the name.
So if the name is empty, I'm going to
| | 00:57 |
echo something, or output something to
the screen.
| | 01:01 |
And it's going to be a div, that says
your name is a required field.
| | 01:06 |
So notice then, I'm also using this if
and endif notation.
| | 01:11 |
I just like it a little bit better than
these curly brackets.
| | 01:14 |
Sometimes these can get lost when the
coding gets a little bit complicated.
| | 01:17 |
I'm going to save this, and then come
over here to the form and refresh.
| | 01:21 |
And I'm going to try to send the form
without filling anything out.
| | 01:24 |
So I should get an error that says,
sorry, your name is a required field.
| | 01:28 |
Guess I'll hit the Back button, and let
me do another type of validation.
| | 01:32 |
We can check to see if the field has a
certain number of characters, with PHP's
| | 01:37 |
string length method.
To learn more about this method, make
| | 01:41 |
sure you check out the PHP documentation.
So, with that method, we'll create
| | 01:48 |
another if statement.
And we'll check to see that the string
| | 01:52 |
length, of the password string, is at
least six characters.
| | 01:58 |
If it's less than six characters, I'll
output an error message.
| | 02:03 |
So let me save that, and come back here.
I'll refresh, and I'll go ahead and type
| | 02:07 |
something for the name.
I'll leave the password blank.
| | 02:10 |
Now it's complaning that the password has
to be at least six characters.
| | 02:15 |
If I try to not type a name or the
password, I should see both errors.
| | 02:20 |
So let's try to type in a password that
is at least six characters.
| | 02:27 |
And that's working fine, because it's
complaining that I didn't put in a name.
| | 02:31 |
Perfect.
To make sure our passwords match, we can
| | 02:35 |
simply compare the two passwords with
each other.
| | 02:37 |
If they don't match, we can't output an
error.
| | 02:40 |
All right, so, let's go ahead and save
this, and refresh the page.
| | 02:46 |
And I'll try to send the form without any
fields.
| | 02:49 |
It's not going to complain about the
passwords, because they are matching,
| | 02:51 |
even though they're empty, they're
technically matching.
| | 02:55 |
So we need to make them not match.
I'll go ahead and type in something that
| | 02:58 |
definitely doesn't match, but it's at
least six characters.
| | 03:02 |
So now it says, sorry, passwords must
match.
| | 03:05 |
Finally, we can also do a regular
expression match comparison.
| | 03:09 |
We've already talked about regular
expressions in the chapters on
| | 03:12 |
constraining with regular expression
patterns and dynamic validation with
| | 03:15 |
regular expressions.
They allow you to do complex pattern comparisons.
| | 03:20 |
As a matter of fact, we've got a whole
course on regular expressions.
| | 03:24 |
To match the text from our forms, we're
going to use PHP's preg-match method,
| | 03:27 |
which you can find right here.
Now, it looks really complicated, but
| | 03:32 |
it's fairly simple to implement.
Let's go back into our form, and we'll
| | 03:35 |
create another area right here.
So what I'll do is, I'll create an if statement.
| | 03:41 |
I'm going to check to see if a certain
pattern does not validate.
| | 03:44 |
The preg-match method is going to compare
a pattern with a variable, and if they
| | 03:48 |
match it's going to return one.
If it doesn't match, it's going to return zero.
| | 03:53 |
So you want to check to make sure that it
doesn't match.
| | 03:56 |
So first, you pass it a pattern, and then
we pass it the variable that we want to compare.
| | 04:00 |
In this case, we're going to do the name
variable.
| | 04:03 |
So we know that that one is called
myname.
| | 04:06 |
Now, the pattern we want to pass is a
little different than what we've been
| | 04:08 |
doing with HTML and JavaScript.
You have to include the pattern in slashes.
| | 04:14 |
Other then that, it's the same pattern
that we used on some of the other movies.
| | 04:18 |
Just any number of letters, followed by a
comma and a space, and then any number of letters.
| | 04:24 |
Now, if the pattern does not match, then
we'll output an error.
| | 04:27 |
So let me go ahead and save this.
And I'm going to come back here, hit the
| | 04:32 |
Back button, refresh my page, and try to
type in something that is not in this format.
| | 04:39 |
So, we'll just type in a name like this,
hit Send.
| | 04:42 |
And it says that it must be in the format
last comma first, which is what we want.
| | 04:49 |
So validation's pretty easy with PHP.
With the addition of regular expression
| | 04:53 |
patterns, you can really get quick picky
about how you compare the user's input
| | 04:56 |
with certain patterns.
| | 04:58 |
| | Collapse this transcript |
| Adding in-page validation| 00:00 |
So far, we've been processing the fields
in a separate PHP document.
| | 00:04 |
Another option is to make the form and
the processor be on the same page.
| | 00:09 |
That makes it easier to provide on-page
feedback.
| | 00:12 |
So, in this video, I'll show you how to
move the form from our external script to
| | 00:15 |
the current page.
I'm going to make some changes to the
| | 00:18 |
form first.
To be a little bit more secure, I'll
| | 00:21 |
change the method of this page to Post.
I'll change the Action field so that the
| | 00:25 |
form submits to itself.
We could just use the name of this page
| | 00:29 |
as the action, but I'll use another PHP
superglobal called Server to make the
| | 00:32 |
form submit to itself.
So, right here I'm going to create a
| | 00:37 |
short PHP script.
It'll just echo the superglobal server
| | 00:41 |
and it'll pass along as the parameter php
underscore self.
| | 00:46 |
So, I'm going to save that and if I
refresh my page.
| | 00:50 |
So, if you take a look at the source code
for this page, you can see that the
| | 00:53 |
action is the same as the URL for this
form.
| | 00:57 |
I'm also going to modify the button at
the bottom of the screen so that it
| | 01:00 |
passes along a name and a value.
We'll use that to test out the form has
| | 01:04 |
been submitted before we process it.
So, I'm going to skip all the way to the
| | 01:08 |
bottom and find my submit button and add
the name, action, and the value submit.
| | 01:14 |
So, save that.
Now we can make sure that the form has
| | 01:18 |
been submitted with the Post method, and
that it's received an action parameter.
| | 01:22 |
So, I'll skip all the way back up to the
top, and I'm going to add a little PHP
| | 01:25 |
script here as well.
And here I'll make sure that the request
| | 01:30 |
method we get back from the server is set
to Post.
| | 01:34 |
And also that the action field that we
received from the form is not empty.
| | 01:39 |
And then, I'll end my IF statement.
I'm going to save, and refresh my page to
| | 01:43 |
make sure we don't make a mistake.
It's always a good idea to type a little
| | 01:47 |
bit of the script, and then just refresh
your pages to make sure you don't make
| | 01:50 |
any mistakes.
If you do, it will look something, let's
| | 01:53 |
go ahead and delete one of these
parenthesis.
| | 01:56 |
And if you save that and you try it, it's
going to give you this kind of error,
| | 01:59 |
depending on how your server is set up
for error reporting.
| | 02:03 |
So, let me save that, refresh.
Now we're ready to move the script from
| | 02:08 |
our separate page into this page.
So, I'm going to go to my process.php
| | 02:12 |
script and just grab most of the content
from right here.
| | 02:16 |
I'm going to copy, I'm going to leave
this page alone, and I'll close out, and
| | 02:20 |
then I'll paste this code right here.
And I'll go ahead and indent it a little bit.
| | 02:26 |
So, I'm going to save and come back here
and just try to submit the form without
| | 02:29 |
filling any fields.
So, you see the errors are coming up just
| | 02:34 |
fine, they don't have any styles and
they're not within the form.
| | 02:38 |
That's easy enough to fix.
It would be a little bit nicer if the
| | 02:41 |
errors were right underneath the fields
that they belong to.
| | 02:45 |
To do that we're going to create a series
of variables, and feed the text of the
| | 02:48 |
errors into those variables, and then
print them underneath each input field.
| | 02:54 |
So, instead of just echoing everything, I
want to create an error variable called
| | 02:58 |
err_MyName and set it equal to the error
that we get from the form.
| | 03:03 |
Now I want to add the class right here
and I could just add class equals and
| | 03:07 |
then in double quotes.
But because I already have the double
| | 03:10 |
quotes right here, it may cause a
problem.
| | 03:13 |
So, I'm going to delete the outside
double quotes here and replace them with
| | 03:17 |
single quotes.
That way when I use double quotes inside,
| | 03:21 |
it won't be a problem.
So, the class for this is going to be
| | 03:23 |
error and I'm going to to do that to all
the other errors.
| | 03:27 |
So, I'm going to save this, and I'll
refresh my page and none of my errors are
| | 03:31 |
printing out right now because they're
just being stored in variables.
| | 03:37 |
So now I need to put those variables
underneath each input field.
| | 03:40 |
So, I'm going to look for the Name input
field, and right underneath that, I'm
| | 03:44 |
going to create a PHP script.
And if the variable exists, I'll use the
| | 03:50 |
If Set method, of each one of those
variables.
| | 03:56 |
Then I'll echo the value of that variable
to the screen.
| | 03:59 |
So, I'm going to save this, and just test
it out by refreshing the page.
| | 04:04 |
And if you had filled out the form
before, the error should come up just
| | 04:09 |
fine, right underneath the element.
So, all we gotta do is take this and copy
| | 04:14 |
it a few times with the different
variable names.
| | 04:17 |
So, the pattern match would also happen
right here by the name, and the password
| | 04:21 |
feedback would happen, right here for the
length.
| | 04:26 |
And I'll put the other one in the
confirmation section.
| | 04:30 |
So, I'm going to save this, and try to
submit the form and I get all of my errors.
| | 04:35 |
Let's try to submit the form, filling
some of the fields out.
| | 04:38 |
So now, I don't get the field that says
that this is a required field, because I
| | 04:41 |
did fill it out.
But it still gives me the second error
| | 04:44 |
that I didn't put it in the right format.
So, let me put it in the right format,
| | 04:48 |
I'm going to hit Enter to submit.
So, that's working pretty well, let's try
| | 04:53 |
the other one.
So, the password, I'll make the password,
| | 04:58 |
password and I'll hit Send.
It's telling me that it doesn't match,
| | 05:02 |
because I didn't fill out the other
field.
| | 05:05 |
So, by moving the form into the page, we
were able to add some feedback from the
| | 05:08 |
script directly into the form.
So, we have a small problem and that is
| | 05:13 |
that after the user submits the form.
Any fields they have already filled out
| | 05:18 |
will disappear.
We'll take care of that in the next movie.
| | 05:21 |
| | Collapse this transcript |
| Mirroring input data back to the user| 00:00 |
Our form has a bit of a problem.
Although the validation feedback is
| | 00:04 |
awesome, we need to mirror the input from
the form, back into the form.
| | 00:08 |
Otherwise when users make an error, the
form will not send them back any of the
| | 00:11 |
fields they've already filled out.
So let's see that at work.
| | 00:15 |
If we come over here to the form, and we
just fill something out, I'll put in my
| | 00:19 |
name and I'm going to hit the Send
button.
| | 00:22 |
In where is it tells me that the error
that I forgot to put this in the right format.
| | 00:26 |
But I don't see my name anymore.
so I would have to type that in, it's not
| | 00:29 |
such a big deal right now because
obviously I have to retype that information.
| | 00:33 |
so I'll type it in the right format and
then I'll put in a password that's just
| | 00:35 |
three letters.
I'm going to hit Send and now it tells me
| | 00:38 |
that the name was fine, but it deleted it
because it didn't remember it.
| | 00:42 |
And the password has to be six
characters, and it deleted that as well.
| | 00:46 |
So, that's a problem.
Let's go ahead and fix it.
| | 00:49 |
So first, I'm going to go into my index
file, and I need to create variables for
| | 00:52 |
each of the form fields.
And then pass the value of the post super
| | 00:55 |
global to those variables.
These still say request, so first I'm
| | 00:59 |
going to change these to post.
These fields are for my name, my
| | 01:04 |
password, and my password confirmation.
To get the rest of them, I'm going to go
| | 01:08 |
into my code snippets file, and just copy
them from right here.
| | 01:13 |
I'll copy, then I'll paste them right
there.
| | 01:16 |
And these names come from the input
fields.
| | 01:19 |
There's one more thing we need to do.
PHP doesn't like it, when we use a
| | 01:22 |
variable, that it doesn't know about.
So when this page first loads, there's
| | 01:27 |
not going to be any post variables.
So we shouldn't set these new variables,
| | 01:31 |
like my comments, to things that might
not exist.
| | 01:35 |
So we're use is-set function to detect if
a variable exists, and then assign it to
| | 01:39 |
a local variable.
So I'm going to do one of these.
| | 01:43 |
I'll do an if statement here and then use
the is set function.
| | 01:46 |
And I'm going to check for the post
superglobal with the value of my name.
| | 01:51 |
If it does exist, then I'll just create a
new variable, just like I did before.
| | 01:59 |
And assign that value to that variable.
So I need to do the rest of them, once
| | 02:03 |
again I'll just go into my code snippet.
This is a lot of unnecessary typing, and
| | 02:07 |
just copy the rest of them.
So now we're ready to take whatever the
| | 02:13 |
user types in when they fill out the form
originally and add it to the value of our inputs.
| | 02:18 |
That way when the form reloads it's
going to remember everything.
| | 02:22 |
We'll need to go down to the input
fields.
| | 02:24 |
I'll start with my name, and it's at the
very end right before the self closing
| | 02:27 |
tag, I'm going to add the following.
I'll add a value attribute which will be
| | 02:32 |
originally empty, and then I'm going to
write some PHP right here.
| | 02:37 |
I'll check to make sure the my name
variable exists.
| | 02:40 |
So, I'll do an isSet function and I'll
check the variable myName, just to make
| | 02:44 |
sure that it's an existing variable.
If that variable does exist, then I'll
| | 02:51 |
just echo it's value.
So, let's go ahead and save this.
| | 02:55 |
I'll reload my form and then I'll type in
a name right here.
| | 02:59 |
Hit the sent button and you'll notice
that now it's telling me there's an error
| | 03:02 |
in the format, but it remembered
everything I typed in.
| | 03:06 |
So that if I typed it correctly, I'm
going to hit Send, notice that the error
| | 03:10 |
goes away, but it remembers the value of
that field.
| | 03:15 |
Now I am going into code snippets, and
copy the rest of them.
| | 03:17 |
In our form, people have the option of
choosing their favorite music.
| | 03:21 |
Now they can chose more than one of these
items by clicking on these check boxes.
| | 03:26 |
So if they're not already these check
boxes should be returning into an array.
| | 03:30 |
Whenever we have a field that can have
multiple values.
| | 03:33 |
They get fed into an array and we need to
treat them a little bit differently than
| | 03:36 |
when we did right here when we want to re
output those values.
| | 03:41 |
So, what I'm going to do is, I'll go over
here to the end of this, and I'm going to
| | 03:44 |
hit return just to put that on a new
line.
| | 03:48 |
And then I'm going to start typing some
PHP right here.
| | 03:52 |
Once again, I'll make sure that the value
of the variable has been set.
| | 03:57 |
and now I need to check if the existing
value of the check box, which in this
| | 04:01 |
case would be rock.
Exists in the array that is returned into
| | 04:06 |
this variable, right here.
I'm going to open up another set of
| | 04:10 |
parenthesis, and then I'll do an and
comparison, and check to see using the in
| | 04:15 |
array function.
If the value of this field, which is
| | 04:23 |
Rock, exists in our array.
Now, if it does, what we want to do is
| | 04:29 |
echo the word Checked.
When you echo the word Checked as part of
| | 04:34 |
an input field that is a check box, that
item will automatically be checked when
| | 04:38 |
the form loads.
So let me save this and I'll go ahead and
| | 04:45 |
reload this form.
And this time, I'll click the rock
| | 04:48 |
checkbox to indicate that that's my
favorite music.
| | 04:51 |
If I hit send, it should remember that,
even though it got some errors here.
| | 04:56 |
Now if I click on some of these other
ones, it won't remember them.
| | 05:00 |
Notice that they disappear.
So I need to go into my code snippets and
| | 05:03 |
copy that same code for the other values
of the input fields.
| | 05:06 |
So to do this one, I'm going to go all
the way to the end, right before the
| | 05:09 |
self-closing tag there, and just paste
that code right there.
| | 05:13 |
I want this check that it outputs to be
inside the input field.
| | 05:17 |
And then the last one.
Select fields are like check boxes.
| | 05:22 |
But we don't need to check an array
unless your select fields have the
| | 05:25 |
multiple parameter turned on.
These select fields don't.
| | 05:30 |
So we'll just make sure the variable
reference has the right value.
| | 05:33 |
So right here, I'm going to add some PHP.
I'll check to see if the reference
| | 05:39 |
variable has a value, and also that it
matches the current input field.
| | 05:44 |
So this field happen to be friend, so
we'll check that reference as a value of friend.
| | 05:49 |
If it does because this is a select
option field, we'll add in the Selected keyword.
| | 05:58 |
So we'll go ahead and echo the keyword
Selected, and this option will become the
| | 06:03 |
default option once the page reloads.
so let me save this and I'll reload the form.
| | 06:12 |
I'll chose a friend and hit the Send
button, and you can see that it remembers
| | 06:16 |
that option just fine.
So I'll go ahead and copy the rest of
| | 06:20 |
them from the code snippets.
Next we'll do the Radio buttons.
| | 06:24 |
These Radio buttons are just like the
select field.
| | 06:28 |
Unlike the checkboxes, they're not
arrays, so they'll come back with a
| | 06:31 |
single value.
So I'll go to the end here and add some PHP.
| | 06:38 |
So this time, if the request type
variable is set and also it happens to be
| | 06:42 |
the value of the current input field, in
this case this is this is a question.
| | 06:47 |
Then I'll echo the keyword checked.
Let me save that.
| | 06:53 |
I'll refresh my form and click on the
question field here.
| | 06:58 |
So, it does remember that.
We'll go ahead and copy the rest of them
| | 07:00 |
from the code snippets.
The text area is just like a regular
| | 07:03 |
input field, but remember that the value
of a text area goes in between the
| | 07:07 |
opening and closing text area tags.
So, we're going to put our PHP right here.
| | 07:14 |
Once again, I'll make sure that the my
comments variable is set and if it is,
| | 07:18 |
I'll just output the variable.
So I'm going to save this.
| | 07:22 |
Looks like I have an extra parenthesis
here, so let me delete that.
| | 07:26 |
I'll save it, refresh the form.
I'll type in a comment, and hit the Send button.
| | 07:31 |
And you can see that it's remembering the
comment.
| | 07:34 |
I really hate it when I spend time
filling out a form.
| | 07:37 |
And the form gives me an error, but
doesn't remember some of the input.
| | 07:40 |
Mirroring input is the sort of thing that
a lot of people will notice, unless you
| | 07:43 |
forget to do it.
| | 07:45 |
| | Collapse this transcript |
| Sanitizing form input| 00:00 |
Sanitizing means cleaning up the data in
your form, to prevent malicious scripts
| | 00:03 |
from executing.
You need to be careful when receiving
| | 00:07 |
input from any form, since forms are a
way for users to pass information to your server.
| | 00:13 |
Malicious users can sometimes try to get
access to sensitive information by
| | 00:16 |
exploiting unsafe pages.
The most misuse security threats happen
| | 00:21 |
when your form is saving information to
an existing database, outputting the info
| | 00:25 |
to a page or emailing data to someone
else.
| | 00:29 |
If you've been following along with this
video, you've already learned how to use
| | 00:33 |
regular expressions to validate user
input.
| | 00:36 |
One way to sanitize your input is to
check what the user types versus regular
| | 00:39 |
expression patterns.
PHP also has a lot of functions that can
| | 00:43 |
help you prevent the misuse of your
forms.
| | 00:47 |
Which ones you use depends on the context
of what you're trying to prevent.
| | 00:50 |
Strip_tags() removes HTML tags from input
fields.
| | 00:54 |
It's useful if you want to strip any
links or other code out of the text.
| | 00:58 |
You can take a look at the PHP manual for
more information about strip_tags()
| | 01:03 |
Htmlspecialchars() converts some
characters to HTML entities.
| | 01:08 |
So, for example the less than or greater
than signs become ampersand lt and
| | 01:12 |
ampersand gt.
If some user input gets printed, it won't
| | 01:16 |
become a part of your page.
For example, somebody might type in a
| | 01:20 |
script tag or a closing body tag and when
that prints out, it would stop your page
| | 01:24 |
or create a script that runs.
Here's the page for html special
| | 01:29 |
characters and the phpWebSite.
HTML entities is pretty much like HTML
| | 01:34 |
special characters, but it converts as
many characters as possible.
| | 01:41 |
It has a lot of parameters to allow you
to control what gets converted.
| | 01:45 |
Here is a page for that function.
Mysqli_real_escape_string is used for
| | 01:53 |
database sanitizing.
It removes special characters that could
| | 01:58 |
be considered dangerous when passed into
a database.
| | 02:04 |
The last function, filter_var, is the
most powerful and flexible of all the functions.
| | 02:10 |
It lets you do what all the other
functions do and provides a number of
| | 02:13 |
filters and configurations for
customization.
| | 02:16 |
Here's a page in the phpWebSite.
And you want to make sure you click on
| | 02:21 |
the types of filters to take a look at
all of the different kinds of filters available.
| | 02:26 |
So there's Validation filters and
Sanitization filters.
| | 02:29 |
So let's click on those.
You could see that every one of those
| | 02:32 |
filters has a lot of options.
Let's try this out on our page.
| | 02:36 |
I'm going to modify the common field, so
you can't put HTML tags in there.
| | 02:40 |
So, I need to go all the way to the
bottom and add a small thing to the
| | 02:44 |
label, that will just let people know
that HTML is not allowed.
| | 02:50 |
Then I'm going to go to the top and find
the place where I check for the comment
| | 02:53 |
section, and that's right here.
So I'm checking the post variable for comments.
| | 02:59 |
And what I want to do here is use the
filtervar function, pass along the
| | 03:02 |
comments from the post superglobal, as
well as the constant that I want to
| | 03:06 |
filter with.
And I'm just going to sanitize string
| | 03:11 |
which will remove any HTML special
characters.
| | 03:14 |
And I need to make my comments be equal
to all that.
| | 03:20 |
What I'm doing here is taking the
variable my comments and running a filter
| | 03:25 |
sanatizing the string from the posted
comments.
| | 03:29 |
So let's go ahead and save this, and I'm
going to refresh this page, just reload
| | 03:33 |
the form.
Notice that it says, HTML is not allowed.
| | 03:37 |
And I'll try typing something in here
with HTML.
| | 03:40 |
I'm going to hit Send, and when this
reloads, the tag is gone from the bold word.
| | 03:46 |
Most of the time you should be using the
filter_var function.
| | 03:51 |
You will often see the
mysqli_real_escape_string function used
| | 03:53 |
in database applications.
Some of these functions require different
| | 03:57 |
versions of PHP, so if you have a server
running on PHP4, some of the more
| | 04:00 |
convenient modern functions are not
going to work.
| | 04:04 |
| | Collapse this transcript |
|
|
6. Processing Form DataMailing form data| 00:00 |
When you create a form to capture online
data, the information you get usually has
| | 00:03 |
one of two destinations.
The data gets sent to some email address
| | 00:08 |
where a human takes care of the request,
or it's stored into a database.
| | 00:13 |
In this video, we'll look at what it
takes to send an email with the result of
| | 00:16 |
your form.
PHP has a built-in mail function which is
| | 00:20 |
perfect for sending the data.
Here's a documentation page for mail in
| | 00:25 |
the php website.
The mail function takes a series of
| | 00:30 |
strings with where to send the data, who
to send it to, a subject, a message, and
| | 00:34 |
additional headers and parameters.
PHP sends an email using the server's
| | 00:41 |
mail software.
In Linux, this is usually called send mail.
| | 00:44 |
If the server is able to send the email
message, then the function returns true,
| | 00:49 |
otherwise, it returns false.
The data, as well as additional headers,
| | 00:54 |
adheres to certain formats as dictated by
the mail protocol.
| | 00:58 |
Additional headers can include
traditional mail features like the from
| | 01:02 |
address, who to replyto, cc, etcetera.
This type of mail command is probably one
| | 01:07 |
of the most attacked scripts on the
internet, so make sure you take extra
| | 01:10 |
precaution validating and sanitizing your
form input before you use this command.
| | 01:16 |
This also means that your hosting company
might be placing a limit on how many
| | 01:19 |
emails you're allowed to send through
this command.
| | 01:23 |
Your PHP configuration files might also
be locked down, or need some adjustments
| | 01:26 |
as well.
So make sure you talk to your host if
| | 01:29 |
things aren't working smoothly.
If you want more information about how to
| | 01:33 |
set up and debug your PHP, make sure you
check out PHP Advanced Techniques or PHP
| | 01:37 |
and MySQL Essential Training.
So, let's implement this into our form.
| | 01:42 |
We've been placing the PHP in the same
file as our form.
| | 01:45 |
It let's us grab PHP variables and insert
them into the form, but it's making our
| | 01:49 |
page a little long.
So I'm going to move things into our
| | 01:53 |
process PHP file.
So I'll grab this code right here and
| | 01:57 |
I'll cut it out of this page.
And then I'll move it into the separate document.
| | 02:02 |
You may have some text in there from
before so I'm going to hit delete and
| | 02:05 |
paste our code right here.
Now we need to call this page from within
| | 02:09 |
our index a php document.
So I'm going to save this and I'll go
| | 02:14 |
back into my index.php and at the very
top, I'm going to use php's include
| | 02:18 |
command to call process.php into
index.php.
| | 02:23 |
This is like including a JavaScript js
file into our page.
| | 02:27 |
The commands from that page get copied
from the file and inserted in place into
| | 02:30 |
this file.
And don't worry, the form will still work
| | 02:34 |
in the same way.
So I'm going to save the index file and
| | 02:36 |
I'll switch back to the process.php
document.
| | 02:39 |
So one thing you don't want to do is mail
anything unless our form is error-free.
| | 02:44 |
So I'm going to create a form error
variable and set that to false.
| | 02:48 |
I'll place that right here.
Now, if any of our validation or
| | 02:53 |
sanitizing rules generates an error,
we'll set this variable to true.
| | 02:59 |
Next, we'll create an if statement that
verifies that there are no errors and
| | 03:02 |
place our mail function inside that.
So, the next step is to prepare the
| | 03:08 |
information you want to send.
We'll need an email to send to, a
| | 03:11 |
subject, and a message.
If you want to, you can also pass along
| | 03:15 |
some other information, like a from and
reply to address.
| | 03:20 |
I'm going to create a series of variables
for this.
| | 03:23 |
When I'm doing this subject I'm going to
use the my name variable here to print
| | 03:26 |
out the users name when I get an email
from this page.
| | 03:29 |
I usually like to put a title for the
page that this form is coming from,
| | 03:32 |
otherwise, I might get a bunch of emails
without knowing which page they come from.
| | 03:37 |
The message can really be just about
anything you want, including any of the
| | 03:40 |
variables from the form.
For right now, we'll just put in a simple
| | 03:44 |
text message.
Now, we'll also add some additional
| | 03:47 |
header information into the message.
Now usually in here if you've asked for
| | 03:52 |
an email address, you can add that
person's email address, usually in a
| | 03:56 |
variable called like email, to the
message.
| | 03:59 |
That way the person who receives emails
from this form can just hit the reply
| | 04:02 |
button on their email program.
And here I'll just identify that this is
| | 04:07 |
from my form processor.
This is not a real email address.
| | 04:10 |
Now, some headers have to be separated by
slash r and slash n's.
| | 04:15 |
In reply to, you may want to put an email
so that if the person reading the mail
| | 04:19 |
from the form decides to reply to the
user when the user receives that message,
| | 04:23 |
they're able to hit their reply and see
the originator's email address.
| | 04:30 |
Now we can issue the mail command.
I'm doing an IF statement because the
| | 04:35 |
mail returns a boolean value.
So if your server is successful in
| | 04:39 |
emailing the form, it's going to return
true, otherwise, it'll return false.
| | 04:44 |
And then here, I'm just passing the
variables over to the mail command.
| | 04:48 |
Now, in my form, I want to output a
message that will say, thank you for
| | 04:50 |
filling out our form, if the form is
successful.
| | 04:54 |
So I'll create this MSG variable.
If the mail program is not successful,
| | 04:59 |
I'll send a different message.
So as I mentioned before, PHP doesn't
| | 05:03 |
actually mail anything.
Mailing is handled by your server's send
| | 05:07 |
mail command.
So if there's any errors all you're
| | 05:10 |
going to get is this message saying that
there was a problem.
| | 05:13 |
If you want to look for actually errors
you have to do it in your server's logs.
| | 05:17 |
Now we need to add something on the
index.php page that outputs a message
| | 05:21 |
variable in the page if our form email is
successful.
| | 05:25 |
So let me go back to my index.php
document in here right after the body tag.
| | 05:30 |
I'm going to add a message.
So if the message variable is set, then
| | 05:35 |
we're going to print out a message to the
user.
| | 05:40 |
So I'm going to save this and I'll
refresh the page.
| | 05:43 |
And I'll fill out my form really quick.
Just a couple of, fields here, just the
| | 05:46 |
ones that I need.
And I'm going to hit the send button.
| | 05:51 |
And it says, thanks for filling out our
form, so this message is printing out,
| | 05:54 |
which means that our email should have
been successful.
| | 05:57 |
If I check my email application, you can
see the message from the user.
| | 06:01 |
And if you open that up, you can see that
the message has been sent and it has the
| | 06:04 |
user's name, plus the little message that
I typed in the PHP file.
| | 06:08 |
So, let me go ahead and add the rest of
the data to the email and usually you end
| | 06:11 |
up printing out all the variables just
like you did here, but I want to do
| | 06:14 |
something different.
This might make it easier for you to
| | 06:18 |
access the data in the future later on.
I'm going to add the data to the form and
| | 06:22 |
usually you end up printing out variables
along with some text, but I'm going to do
| | 06:26 |
something a little bit different.
I'm going to create an associative array
| | 06:31 |
out of the form elements and then use the
function to convert them to the JSON format.
| | 06:36 |
This is going to make it easier for us to
access the data if we want it in the
| | 06:38 |
future, and it's something we may be able
to pass to JavaScript as an object if we
| | 06:42 |
want to.
JSON is a really popular format that a
| | 06:46 |
lot of people use to store data
especially in JavaScript.
| | 06:51 |
If you want to learn more about JSON,
make sure you watch my course on
| | 06:53 |
JavaScript and JSON.
We're going to put this right outside our
| | 06:59 |
mail section, which started right here,
because it's something that we may want
| | 07:03 |
access to in other places.
So essentially you need to create
| | 07:07 |
dissociative array out of all the
existing variables.
| | 07:09 |
Now I don't want to type all of that in,
so I've created a closed image file.
| | 07:14 |
And I'm going to grab this associated
array and switch back into my main program.
| | 07:21 |
And right here I'm going to paste this
and this is just a regular PHP associated array.
| | 07:25 |
You create an array, and you create a key
for each variable, and then you use this
| | 07:28 |
equal and greater than sign and then you
put a name of a variable.
| | 07:33 |
You separate them with commas, this is a
little bit like the JSON format.
| | 07:37 |
And then, all I have to do is change the
message variable to encode our array as a
| | 07:40 |
JSON file.
So, in message, I'm going to replace this
| | 07:45 |
with the PHP method JSON encode and then
pass it along the variable of our array.
| | 07:53 |
now I'm going to save that, I'll go ahead
and reload the page.
| | 07:57 |
I'll type something in again, and I'll
hit the send button.
| | 08:02 |
We get a thank you notice and let's go
check our email.
| | 08:05 |
So, you can see I got the new email and
if I click on this new one you'll see
| | 08:08 |
that I have a JSON object that I received
as an email message.
| | 08:13 |
So you can see that emailing stuff with
PHP is pretty easy.
| | 08:16 |
It's just a function that accepts some
inputs.
| | 08:20 |
Do remember that you may have some
problems depending on how your host is
| | 08:22 |
set up.
So, if things aren't working just right,
| | 08:25 |
make sure you check with your host
provider.
| | 08:27 |
| | Collapse this transcript |
| Understanding file uploads| 00:00 |
So let's take a minute to talk about how
file uploads work between forms and PHP.
| | 00:06 |
In addition to capturing regular text
data, a form can also send a file into a
| | 00:10 |
folder on your server using PHP.
In order for this to work, the form has
| | 00:15 |
to use the multipart/form-data enctype.
This is part of your form tag.
| | 00:20 |
Because get methods are limited to the
size that's allowed when sending data
| | 00:23 |
through a URL, you should use the post
method if you're uploading files from a form.
| | 00:29 |
You can include the accept attribute
inside the input field to limit the MIME
| | 00:33 |
type of the file you're uploading.
If you have any questions about this make
| | 00:38 |
sure you check out the movie on Limiting
Uploads by MIME Types.
| | 00:41 |
When uploading files, you can use an
optional hidden field with the name of
| | 00:45 |
Max File Size that PHP commands will try
to recognize.
| | 00:49 |
So for example this input field tells PHP
that this file should be no bigger than
| | 00:52 |
about 30K.
One note, this hidden input field has to
| | 00:56 |
be placed before the file input field.
Once a form is submitted, PHP stores
| | 01:01 |
information about the uploaded file in a
special files associative array.
| | 01:06 |
You can use this superglobal in your
script to get information about the file.
| | 01:11 |
You can read more about this on this page
in the PHP documentation.
| | 01:15 |
Here's some different variables that you
can get and what they do.
| | 01:18 |
So let's go over those.
You can read the original name of the
| | 01:22 |
array using the user file name field.
If the browser provides it, you can also
| | 01:27 |
read the MIME type of the file by reading
the user file type value.
| | 01:32 |
The user file size value holds the size
in bytes of the uploaded documents.
| | 01:37 |
PHP is going to place the uploaded
documents in a temporary place on the server.
| | 01:42 |
This variable, user file temp name, has
the name of that location.
| | 01:46 |
What you'll end up doing, is moving the
file to a more permanent location later.
| | 01:51 |
If the server is unable to upload the
file for any reason, you can check the
| | 01:55 |
error types on this page.
After you check, validate and sanitize
| | 02:00 |
file info using the file's superglobal.
The file has to be moved, and you can do
| | 02:05 |
so with the move_uploaded_file function.
You can read more about this function in
| | 02:09 |
this page of the documentation.
It's really pretty simple.
| | 02:13 |
The function makes sure that, if the file
was uploaded properly, it moves the file
| | 02:17 |
to a permanent position on your server.
This position must have the right upload
| | 02:22 |
permissions, which you have to set
manually.
| | 02:25 |
If the file upload and movement were
successful, the function returns true.
| | 02:29 |
So you usually check this function with
an if statement.
| | 02:33 |
It's really important to give your
filenames a unique name, because this
| | 02:36 |
function will simply overwrite any files
at the destination with the same name,
| | 02:40 |
and it doesn't give you a warning.
So one of the reasons I love PHP is its
| | 02:45 |
ability to make complicated tasks really
simple.
| | 02:49 |
Working with files is a good example.
It takes care of most of the heavy
| | 02:53 |
lifting while providing easy functions to
get work done.
| | 02:57 |
In the next movie, we'll add this
functionality to our form.
| | 03:00 |
| | Collapse this transcript |
| Uploading files| 00:00 |
Let's go ahead and add file uploading
capabilities to our form.
| | 00:03 |
Before we do that, we're going to to need
to create an uploads folder on our server.
| | 00:08 |
So, here I am on my FTP application, I'm
going to right-click to select new folder.
| | 00:13 |
This is usually the way that you create a
new folder in most FTP apllications.
| | 00:17 |
You can usually also go to the File menu.
I'll call this uploads.
| | 00:21 |
Now we need to set the permissions of the
folder so that PHP can write to it.
| | 00:25 |
Once again I'm going to right-click and
select this time Get Info.
| | 00:30 |
That permissions right now are seven five
five, which means that only users can
| | 00:33 |
write to this folder.
I'm going to change it to seven seven,
| | 00:37 |
seven, which means that anyone including
our application is going to be able to
| | 00:40 |
write tot his folder.
So now I hit Apply, and I'm done with the
| | 00:45 |
FTP program.
Now I need to go to the page and add an
| | 00:49 |
input field to take our files.
This is going to be another list item and
| | 00:54 |
input field's going to by type of file.
My name is going to be my profile pics.
| | 01:01 |
I'll set the ID to the same thing.
And I'm going to use the accept the
| | 01:05 |
attribute here to prevent some browsers
that are supported from taking anything
| | 01:09 |
other than a JPEG file.
This field uses a MIME type, so I'll put image/jpeg.
| | 01:16 |
You can also put image/star if you
want to take any type of image file.
| | 01:23 |
I'm going to add a couple more things.
I'll need a label for this, so add a label.
| | 01:29 |
Label is going to be for my profile pics,
and the label is going to say, profile picture.
| | 01:36 |
I'll put in an instruction to make sure
people know that these files have to be
| | 01:41 |
jpeg, and I'll ask for files that are
smaller than 100k.
| | 01:46 |
I'm going to also add a hidden input
field, this hidden input field will have
| | 01:50 |
a special name that PHP can recognize,
called max files size.
| | 01:56 |
Now 100k turns out to be 102400.
So, the value of this field should be the
| | 02:02 |
size that you want in bytes.
Since 1kB is 1024 bytes, 100 kilobytes
| | 02:08 |
would be 1024 plus two zeros.
Okay, I'm going to save this and now I'm
| | 02:13 |
ready to go back into my script.
So, the first thing that I want to do in
| | 02:16 |
my script, is make sure that we have no
errors before we go into this new file
| | 02:19 |
uploading section.
I'm going to look for the email section
| | 02:23 |
which is right down here.
And right before the form data array,
| | 02:28 |
I'll insert an IF statement.
And in that IF statement, I'm going to
| | 02:32 |
check to make sure that form errors,
which normally has a value of whether or
| | 02:36 |
not our form has errors, is true or
false.
| | 02:42 |
If it's not false, then I'm going to
perform my file upload.
| | 02:44 |
Now I'll create some special variables
that I'm going to need to set up my
| | 02:47 |
uploading functions.
First I'll get the temporary name from
| | 02:51 |
the file superglobal.
Notice that the first part of the files
| | 02:55 |
array has the name used in our form input
field.
| | 02:58 |
Now you don't need to necessarily do
this, you can also find out what the
| | 03:01 |
original name of the file was.
We'll create a variable for that, called
| | 03:06 |
Upload file name.
ANd it's going to be equal to the same
| | 03:09 |
thing as up here, except instead of temp
name, this is going to be name.
| | 03:14 |
Here's why this is a little bit
dangerous.
| | 03:17 |
If you don't use unique names, and
somebody uploads another file with the
| | 03:20 |
same name as your file later on, the
previous file's going to be overwritten.
| | 03:26 |
So I'm going to create a date so I can
use it as part of my file name.
| | 03:30 |
That way the name of every file will be
unique.
| | 03:34 |
This is just a standard PHP date string.
We'll need to create a new file name.
| | 03:38 |
We'll use our date in combination with
our upload file name.
| | 03:42 |
We'll put in the name of our folder, plus
the safe date variable which has the date
| | 03:46 |
that the file was uploaded, then we'll
use an underscore, and then we'll use the
| | 03:50 |
upload file name.
If we want to create a normal URL link to
| | 03:55 |
this file, we'll have to get it from a
few superglobals.
| | 04:00 |
We'll call this variable upload url.
So, just like a regular URL, it'll start
| | 04:05 |
with http://, and then I'm going to use
the _SERVER superglobal.
| | 04:10 |
And I'm going to ask for the server name,
which normally has the domain of the Web site.
| | 04:16 |
Then I'll use the _SERVER superglobal
again, this time I want to get the
| | 04:21 |
request URI.
The request URI gives you the URL of the
| | 04:25 |
current page from the root of the server.
But we need to get rid of the last part,
| | 04:29 |
because that's the name of this file,
process.php.
| | 04:33 |
I'll use the DIR name function, and I'll
pass along our request URI.
| | 04:38 |
Then we'll add a slash and then add our
new file name.
| | 04:44 |
So now that we're ready setting up
variables, we're ready for our IF statement.
| | 04:49 |
What we need to do is take the file from
temporary location that PHP puts it in
| | 04:52 |
into the folder that we created with the
FTP application.
| | 04:57 |
To do that, we'll use the Move Uploaded
Files function.
| | 05:01 |
So we'll create an IF statement and say
move uploaded file, and it wants two
| | 05:05 |
things: the file name and destination.
File name is going to be the temporary
| | 05:10 |
file name tmp name, and the destination
is going to be our new file name.
| | 05:16 |
Now if this comes back as true, then
we'll add a variable called message msg
| | 05:21 |
and give a message of file uploaded.
If it's not true, then we're going to
| | 05:28 |
create another message with an error and
we'll pass it along to file error
| | 05:32 |
variable from the file superglobal.
We'll also set the form errors variable
| | 05:37 |
to true.
And we'll end the IF statement.
| | 05:42 |
Let me comment this other one as well.
If you want to, you can add a value to
| | 05:45 |
your form data associative array with the
URL of the image.
| | 05:50 |
So now I'm going to save this file and go
back into my form, make sure that I refresh.
| | 05:56 |
You can see the input field is right
there.
| | 06:02 |
So I'm going to put in a name here and a
password, or it's going to complain.
| | 06:07 |
And then I'll hit the Choose File button
and select this cute image of a doggie
| | 06:10 |
that I have.
And I'm going to hit the Send button.
| | 06:15 |
So it looks like I have a spelling
mistake as well as a file error.
| | 06:19 |
Now, I know what this is, and this is a
very common mistake to make when doing
| | 06:23 |
these forms.
If I go back to my index.php file, I
| | 06:27 |
notice that my method is set to post, but
my enctype is not correct.
| | 06:33 |
My enctype should be set to multipart
form data.
| | 06:38 |
So, what that does is, since this form
has a file in it, it can't just send the
| | 06:41 |
file as it normally would through the
post method.
| | 06:46 |
It has to be specially encoded, so that
it can be transmitted over the web.
| | 06:51 |
So, this enctype attribute tells it to
format the file properly, and we need to
| | 06:54 |
make sure that we have that.
Really, it happens to me quite a bit.
| | 06:59 |
It's sort of an easy thing to forget.
When you're doing an image, a lot of
| | 07:02 |
times you tend to focus on the fields
right here.
| | 07:05 |
I'm going to save this and go back into
my process.php file, and find that
| | 07:09 |
spelling mistake, could dadadadadadada
end.
| | 07:12 |
So let me delete that d, save it.
Let's go back to our form, and I'm
| | 07:16 |
going to reload it.
And I'll try this again.
| | 07:20 |
I'm going to choose File, find my doggie
photo and just put in some password here.
| | 07:26 |
And now I'm going to hit the Send button,
and it says, thanks for filling out our form.
| | 07:32 |
Now let's go into our FDP program.
I'm going to open up the uploads folder,
| | 07:36 |
and I'm going to hit Do a Refresh because
a lot of times it won't show the upload
| | 07:40 |
right away.
And there's my doggy file.
| | 07:43 |
Notice that it has, in addition to its
original name, the date and time that the
| | 07:47 |
file was saved.
If I hit the spacebar, I can take a look
| | 07:52 |
and see that it's the same folder that I
uploaded.
| | 07:56 |
There's one more thing that we can do to
clear this up.
| | 07:57 |
Notice that the form kind of still shows
up after you upload the file.
| | 08:01 |
That's not the cleanest thing in the
world, so I'm going to go into my
| | 08:04 |
index.php document.
What I will do is modify this statement
| | 08:08 |
right here so that if the message is
sent, then it's going to print it out.
| | 08:14 |
Otherwise it's going to print out the
form, and then I'll need another PHP
| | 08:19 |
statement at the bottom of the form that
just ends the IF statement.
| | 08:26 |
So I'm going to save this go back into
our form.
| | 08:28 |
I'll go ahead and reload it and then I'm
going to fill it out again.
| | 08:34 |
I'll choose the same file and I'm
going to hit Send.
| | 08:38 |
I really don't want to save the password
here, but notice that the form is now
| | 08:41 |
gone, which is what you want.
You don't really want the form to still
| | 08:44 |
be there.
I want to just thank people for filling
| | 08:46 |
out the form.
Now let's go back into our FTP program,
| | 08:48 |
I'm already in the uploads folder, if I
refresh my page, I should see two copies.
| | 08:53 |
And this is really important and why you
want don't want to just output the
| | 08:56 |
original name of the file.
You want to make sure you add something
| | 08:59 |
like a date and time, so that if somebody
uploads more than one photo at the same
| | 09:02 |
time, they're going to have different
names.
| | 09:05 |
Uploading documents doesn't have to be
the hardest thing in the world.
| | 09:09 |
All you have to do is make sure that you
understand the file's super global.
| | 09:12 |
Once you understand the file's
superglobal, you can create variables
| | 09:15 |
that assign file names and put your files
where they need to be.
| | 09:19 |
| | Collapse this transcript |
| Processing form data with AJAX| 00:00 |
You probably haven't noticed that when we
submit this form, the entire page has to reload.
| | 00:05 |
In this form, it happens so fast that you
can't really tell.
| | 00:08 |
If this were part of a bigger page you
would definitely notice the reload.
| | 00:12 |
We can have the process for the PHP file
do it's work in the background without
| | 00:16 |
having to reload the page.
That's what AJAX is for.
| | 00:20 |
AJAX is a complicated subject by itself,
so if you're interested in learning more
| | 00:23 |
about AJAX, make sure you check out my
other course, JavaScript and AJAX.
| | 00:29 |
I'm going to use JQuery's version of AJAX
because it's simpler and more backwards compatible.
| | 00:34 |
One problem with AJAX and JavaScript is
that they weren't designed to allow you
| | 00:37 |
to send files.
So.
| | 00:39 |
if you've been following along with the
project, you may notice this version of
| | 00:42 |
the exercise document is a little bit
different.
| | 00:45 |
Its pretty much the one without the file
uploading code.
| | 00:48 |
In the previous movie we removed the
HTML5 validation.
| | 00:52 |
I've added the pattern and the required
attributes in the main input field.
| | 00:56 |
I've also added our script file from the
end of our chapter called jQuery form validation.
| | 01:01 |
And we a have a call to that script at
the bottom of the page.
| | 01:04 |
Here's the script.
Right now this script is doing two things.
| | 01:07 |
At the very top when somebody submits the
form, it checks to see if each required
| | 01:10 |
field has been filled.
If it doesn't, it outputs an error
| | 01:14 |
beneath each input field.
The second thing it does, is check for
| | 01:20 |
pattern and placeholder attributes when
somebody moves away from an input field.
| | 01:24 |
We're going to leave the second part
alone.
| | 01:26 |
We're just interested in the first part.
Right now if everything's hunky dory, it
| | 01:31 |
sends the script to the process.php file.
That happens right here, when it returns true.
| | 01:37 |
We want to interrupt that and handle the
sending of the data ourselves using AJAX.
| | 01:41 |
So we're going to change this line right
here and add our own posting script.
| | 01:46 |
We'll add some AJAX code to send the form
to the processor.
| | 01:49 |
It's not a lot of code.
The first thing we need to do is
| | 01:51 |
serialize the form data.
When data gets sent over by hitting the
| | 01:55 |
Submit button, the data gets converted
into a format that the processor can understand.
| | 01:59 |
JQuery uses the serialize function for
that.
| | 02:02 |
We'll store that in a variable called
postData.
| | 02:05 |
You can find more about the serialize
function on this page.
| | 02:10 |
Right here, we'll create a variable
called postData.
| | 02:14 |
We'll assign it to the form with the ID
of MyForm, and we'll serialize that data.
| | 02:18 |
So all the input fields will be converted
into a language that depresses that PHP
| | 02:22 |
file will understand.
So now we're ready for the AJAX part.
| | 02:27 |
JQuery makes it ridiculously simple.
It has several methods including an AJAX method.
| | 02:32 |
But since we want to use the POST method
for this form, there's a shortcut for
| | 02:35 |
that called POST.
Here's the documentation field for the
| | 02:38 |
POST method.
So we're going to use the POST method and
| | 02:44 |
in here we'll pass it the processing
script we want to use to process this file.
| | 02:49 |
That's the process.php file.
And then we'll pass it the POST data that
| | 02:53 |
we've already serialized.
I'm also going to pass along some
| | 02:56 |
additional information.
I want this form to work if someone has
| | 02:59 |
JavaScript turned off.
The form is already doing that, but if
| | 03:03 |
the form comes from my AJAX code, I want
to identify it by passing a special
| | 03:06 |
variable that lets my PHP file know this
version of the form is coming from JavaScript.
| | 03:12 |
So I'll add a plus here and then
ampersand AJAX Request equals one.
| | 03:20 |
I also need to send the action variable
with the value submit.
| | 03:24 |
That's because if somebody doesn't hit
that Submit button, the information from
| | 03:27 |
that button doesn't get passed along.
So we need to kind of fake it, so we'll
| | 03:32 |
add another ampersand here, and we'll
just pass along a variable action, just
| | 03:36 |
like the button equals submit.
This is how you pass along additional
| | 03:41 |
info to your script.
Just encode it like a normal URL.
| | 03:45 |
Finally, if I want to do something when
the processor is done with the form, then
| | 03:49 |
I can just pass it along a function.
Now this function will return a message.
| | 03:54 |
I'm going to store it in an MSG variable.
Now if that message exists, I want to go
| | 03:58 |
ahead and put it before the current form.
I'll use the before method and pass it
| | 04:04 |
along the message.
So whatever gets returned from the
| | 04:08 |
process.php file is going to be placed
right before the form.
| | 04:12 |
I also need to have the form submission
event return false, so my form wouldn't
| | 04:16 |
ever arrived at the process.php file
unless it's going through our JavaScript.
| | 04:22 |
All right, so that should be it for our
script.
| | 04:25 |
I'm going to save this and then I'm
going to switch over to the process.php file.
| | 04:29 |
So just like with any other variable that
comes in from the form, I'm going to make
| | 04:33 |
a copy of this one and add a check for
the AJAX request variable.
| | 04:38 |
If it exists, we'll create a variable
called Ajax Request in the PHP document.
| | 04:43 |
And we'll place whatever we got from the
AJAX Request in there.
| | 04:47 |
This form is working great for our PHP
document, but how do we get it to talk
| | 04:51 |
back to the JavaScript file?
There is a couple of ways of doing that.
| | 04:54 |
One way would be by printing anything.
The problem is that if we print
| | 04:58 |
something, it's going to print even if
people don't have JavaScript turned on,
| | 05:01 |
and that could ruin our output for those
users.
| | 05:05 |
We need it to print out something only if
we're calling the form from our script.
| | 05:10 |
That's easy enough, we have a special
variable we just created called AJAX Request.
| | 05:14 |
And we could use that to pass along the
FormData adjacent object from this
| | 05:17 |
associative array.
But I'm going to do something slightly
| | 05:21 |
different, I'm going to pass along a
series of text strings that will create
| | 05:24 |
scripts that do different things on the
form.
| | 05:28 |
This is a nice way of having your PHP
document, talk to a JavaScript document.
| | 05:33 |
So these are kind of boring, so I'm
going to copy them from a codesnippets.md
| | 05:36 |
file and, essentially its checking for
the AJAX Request.
| | 05:40 |
If that exists that's going to print out
a script just like you would create in JavaScript.
| | 05:45 |
That script is going to find the input
field, in this case it's finding the
| | 05:48 |
password input field, and after that it's
going to place some HTML.
| | 05:53 |
So only do that for certain fields, HTML5
is already going to take care of any
| | 05:57 |
required fields and any pattern fields.
So here, I'm just adding them to the
| | 06:02 |
password, password confirmation and a
thank you for when the form is submitted.
| | 06:08 |
So I'm going to copy this first one right
here, go back into my process.php file
| | 06:12 |
and move up a little bit.
I'm not going to worry about this line
| | 06:16 |
right here because HTML5 already will
take care of this.
| | 06:19 |
But it won't take care of the passwords,
so I'm going to add that here.
| | 06:23 |
Next I'm going to check for the
confirmation.
| | 06:26 |
I'll copy this line and I'll paste it
right here.
| | 06:32 |
Finally if the email is successful I also
want to send back a message.
| | 06:36 |
I'm going to come over here.
I'm going to grab this line.
| | 06:45 |
Now most of the time this, if else endif
notation that you see right here works
| | 06:48 |
really well.
And I really like it because it aligns
| | 06:51 |
things really well.
But in this case, this if notation right
| | 06:54 |
here that uses the curly brackets
combined with this L statement is not
| | 06:58 |
going to work.
So, I'm going to modify that and just
| | 07:02 |
make em consistent.
So, I'll move that like this and instead
| | 07:06 |
of this curly bracket here, I'll do an
end if and that way these won't get confused.
| | 07:13 |
Now, notice that I'm doing a couple of
things here.
| | 07:16 |
In this line, I'm printing out a message
with this script tag before the current
| | 07:20 |
form then over here I hide the form so
that it goes away and that's important to know.
| | 07:27 |
So I'm going to go save this and switch
back to my form and I'll try filling it out.
| | 07:31 |
And I'm going to hit the Send button,
you'll notice that it gives us a message.
| | 07:36 |
Now this looks exactly like the PHP
message.
| | 07:38 |
How do you know if this form was
submitted through JavaScript or PHP.
| | 07:43 |
What you could do is, right-click and
select Inspect Element.
| | 07:47 |
If you see that the form command is still
there, then you know you're doing it with JavaScript.
| | 07:51 |
Notice that the display attribute is set
to none, which is what's hiding this form.
| | 07:57 |
That means that the form is being
processed with JavaScript and not with PHP.
| | 08:01 |
PHP wouldn't even show the form at all.
So working with forms in AJAX is pretty easy.
| | 08:05 |
I really like the way that you tell
JavaScript to send things to PHP, and PHP
| | 08:09 |
to send commands back to JavaScript.
| | 08:13 |
| | Collapse this transcript |
| Preparing your database| 00:00 |
Sometimes, you don't want to send the
information to an email address.
| | 00:03 |
It can be unreliable and it's not easy to
aggregate the data.
| | 00:07 |
In that case, it's better to push the
information to a database.
| | 00:10 |
Most servers come with some
implementation of the popular My SQL database.
| | 00:14 |
And it's pretty easy to use since the
commands are fairly readable.
| | 00:17 |
This isn't designed to be a full database
course.
| | 00:20 |
We'll just be talking about form
implementation.
| | 00:22 |
So for more information, make sure you
check out PHP with my SQL Essential
| | 00:26 |
Training, and for more SQL information,
check out My SQL Essential Training.
| | 00:31 |
So, we've got a do a little bit of
set-up.
| | 00:33 |
You're going to need to get credentials
that give you access to the database.
| | 00:37 |
That usually involves creating the
database, which you can do either through
| | 00:40 |
SSH or your host control panel.
There's a lot of different control
| | 00:43 |
panels, and how you get to this varies
from server to server.
| | 00:47 |
So I'm going to assume you already
created a database.
| | 00:50 |
If you want to learn how to do that in
some popular control panels, like C
| | 00:52 |
panel, Plesk or One in One, check out my
course on managing a hosted website.
| | 00:58 |
You're going to end up with four pieces
of data.
| | 01:00 |
The first one is the host name and here I
place it in a bearable called host.
| | 01:04 |
Some databases are hosted on servers
other than your main domain.
| | 01:07 |
So the host name is going to be the url
of the website with the database.
| | 01:11 |
If it's hosted in the same server as your
site, you can use the keyword localhost.
| | 01:16 |
Databases are accessed with a username
and password combination, so you'll need
| | 01:19 |
both of these in order to be able to post
your data.
| | 01:22 |
I've created a variable called user and
password here to store that information.
| | 01:27 |
Finally, you'll need the name of the
database.
| | 01:30 |
I've called mine storeform.
It's customary to place these on a
| | 01:33 |
separate PHP file and include them in
your current docment.
| | 01:37 |
The reason for this, is that you're
probably going to want to use these on
| | 01:39 |
several files.
So I've created this file, and it's
| | 01:43 |
called log_formdb.php.
You can call yours wherever you want.
| | 01:46 |
I've placed this file on my server in the
same folder as all my other files.
| | 01:50 |
Now, I won't be including this file in
the exercise files for security reasons,
| | 01:54 |
but it's easy enough for you to create
your own.
| | 01:57 |
In addition to creating a database,
you'll also need to create a table.
| | 02:00 |
Think of a table as spreadsheets where
your data is stored.
| | 02:03 |
You usually create tables with a control
panel, like PHP MyAdmin, SSH or some
| | 02:07 |
other dedicated program.
I'm going to show you how to do with PHP MyAdmin.
| | 02:12 |
This my server's administration screen,
and I've already created the database.
| | 02:16 |
But I need to create the table.
So I'm going to click on this icon right
| | 02:19 |
here, and it will launch the PHP MyAdmin
program.
| | 02:23 |
It's really common to see that program
installed in a bunch of different hosts.
| | 02:26 |
So from here, I can hit create table, and
in here I can give it a name.
| | 02:31 |
I'm going to call this form_info and then
I need to create a number of fields.
| | 02:36 |
Now at first this program gives me two
columns.
| | 02:39 |
The first column is usually a unique ID
for the table.
| | 02:43 |
So I'm going to call this form info_id.
And I need to tell it what type of file
| | 02:48 |
this is going to be.
Its already prechosen integer for me and
| | 02:51 |
that's going to work fine.
This is going to be just an integer
| | 02:55 |
number that's going to be 11 units
maximum.
| | 02:58 |
That's a lot of data base entries.
Now you want to make this file the
| | 03:01 |
primary index, every database needs at
least one primary index.
| | 03:05 |
You also want to check this check box
called auto increment as you create new
| | 03:08 |
entries into this stable the ID number
will automatically increment to show
| | 03:12 |
you've got new items on your table.
The next field I'm going to create is a timestamp.
| | 03:18 |
I'm going to call this one, forinfo_ts
for timestamp, and this one's going to be
| | 03:22 |
a date and time.
Notice there's a date area right here,
| | 03:25 |
and right over here under date and time
there's one called date time, that's the
| | 03:28 |
one I'm going to use.
You don't need to specify the length of a
| | 03:31 |
date time, there's a default length for
that type of field.
| | 03:34 |
I know I'm going to need some additional
columns, so I can save this or add a
| | 03:37 |
number of other columns.
I'm going to need six additional columns,
| | 03:41 |
so I'll type that in, and select go.
So now you can see there's additional
| | 03:47 |
columns, now it's switched to a
horizontal layout here, but, it's pretty
| | 03:50 |
much the same as we saw before.
I'm going to make these variables the
| | 03:54 |
same as the names in my PHP files.
They don't really have to be, but it's
| | 03:58 |
just more convenient.
Next one's going to be my name.
| | 04:01 |
Obviously that's going to store my name.
Usually when you store textual
| | 04:04 |
information, you can choose a type call
varchar, it means a variable amount of characters.
| | 04:09 |
And after that, you tell it how many
characters this should have.
| | 04:13 |
So for a name, since our name's going to
be a first name and last name, I'm
| | 04:16 |
going to guess about 70 characters will
be the same to hold any type of name.
| | 04:20 |
Now next, I'm going to enter my password.
My password is also going to be a
| | 04:24 |
variable character.
This one's going to be 60 characters long.
| | 04:28 |
That's because I'm going to take whatever
the user types and then encrypt and add a
| | 04:32 |
sol to it.
We'll talk more about that later.
| | 04:34 |
60 characters should be enough to hold
that.
| | 04:37 |
I'll add a section for my comments.
Now my comments needs to be really long,
| | 04:42 |
so I'm going to choose from here, this
type called, Text.
| | 04:45 |
I don't have to choose length or values
when I enter a type of text.
| | 04:49 |
Next, I'm going to type in the reference,
that's going to be another varchar, and
| | 04:51 |
I'm going to hold 15 characters.
Then it'll be Favorite Music and again a
| | 04:56 |
varchar, 15 characters.
Finally, I need to make a request type,
| | 05:02 |
and again, varchar 15 characters long.
So, that should do it for my table.
| | 05:09 |
I'm going to hit Save and it will create
my database.
| | 05:12 |
So, there it is.
And I can come over here and click on the
| | 05:15 |
database, and if I have any values, I can
check on this browse part.
| | 05:20 |
Right now, this table's empty, so it's
not letting me click on that.
| | 05:23 |
You can see the structure is complete, it
looks really good, and if I want to, I
| | 05:26 |
can start putting values into this
database.
| | 05:28 |
You can do that by clicking Insert here,
but we're going to fill it out with our form.
| | 05:32 |
So, working with tables requires a little
bit of set up on your part.
| | 05:36 |
And you are going to need to check out
how your host handles database creation.
| | 05:40 |
Once you have a database, you have the
ability to store a number of records, and
| | 05:44 |
will later be able to query the database
for any type of information you need
| | 05:47 |
about your users
| | 05:49 |
| | Collapse this transcript |
| Pushing data| 00:00 |
Now that we have our database and tables
ready, and we've created a file to store
| | 00:03 |
our database log in information, we're
ready to push information from our form
| | 00:06 |
into our database.
Now, if you've got your server set to
| | 00:10 |
display notices and warnings, you might
notice some notices if people don't fill
| | 00:13 |
out some fields.
So before I do anything, I'm going to
| | 00:17 |
clean up that by assigning an empty value
to anything that comes across with no data.
| | 00:21 |
So I'm going to go into my process.php
file and right at the very top, you'll
| | 00:25 |
see that if these values come in our set,
then we assign them to variables.
| | 00:30 |
But if they're not set, they can be
empty.
| | 00:32 |
And sometimes that causes a PHP notice.
It's not really a big deal.
| | 00:36 |
In production you should never have your
notices turned on, but in development you
| | 00:39 |
may have them on, and they may be
annoying you.
| | 00:42 |
So, I'm going to show you how to get rid
of that.
| | 00:44 |
And what you want to do is, essentially
add else right here, and then just set
| | 00:47 |
whatever variable you have.
So in this case it will be my name to an
| | 00:52 |
empty string.
And that's pretty much it.
| | 00:55 |
But we have to do it to all these, so I'm
going to go into my code snippets file
| | 00:58 |
and just grab this.
Copy this and replace the ones we have
| | 01:03 |
here with new ones.
You may notice that there's one of them
| | 01:06 |
that's a little bit different.
The favorite music is an array, and so I
| | 01:10 |
have to set that to an empty array
string.
| | 01:13 |
And even if I like the way these are
formulated, they are probably easier to
| | 01:16 |
read, but lets go and do them like this.
And we'll leave the comment one like that
| | 01:22 |
because we're actually sanitizing that
string little bit.
| | 01:26 |
So now, we need to talk about security a
little bit.
| | 01:28 |
This from has a password field, and its
really not a good idea to ever store the
| | 01:31 |
password in plane text anywhere.
So we need to encrypt it.
| | 01:36 |
PHP has a number of functions that you
can use to encrypt data.
| | 01:40 |
Encryption usually means passing a string
through a filter and getting another
| | 01:43 |
string back.
The newest version of this function to
| | 01:46 |
encrypt data is called hash.
You should read up on the documentation
| | 01:49 |
for this function.
The cool thing is that the hash function
| | 01:52 |
lets you encrypt in a variety of
different formats.
| | 01:55 |
You can see the list of the formats right
here.
| | 01:57 |
So hackers are less likely to know what
the encryption method for your site was.
| | 02:01 |
Whenever you create and encrypt a
passowrd, it is also a good idea to salt it.
| | 02:05 |
So what is salting?
You see one of the problems of hashing
| | 02:08 |
passwords is that if two people type in
the same password, they will both have
| | 02:11 |
the same converted strings.
So hackers can sometimes look at a list
| | 02:15 |
of hashed passwords and figure out which
are which based on a frequency algorithm,
| | 02:18 |
or sometimes logging in with certain
passwords and then seeing what their
| | 02:21 |
hashes are.
Salting your password means, adding
| | 02:25 |
another string to each password so that
even passwords with the same names will
| | 02:28 |
have different hash strings.
So I'm going to show you one way to do that.
| | 02:33 |
I'm going to use the time function to
hash the passwords.
| | 02:36 |
So I'm going to come down here and right
after our form data, I'm going to set the
| | 02:41 |
time zone.
Because it's important for you to set the
| | 02:44 |
time zone, you may get a notice if you
don't do this.
| | 02:46 |
It's not really a big deal.
So you want to set the default time zone
| | 02:50 |
and that is a series of strings.
You can use US, Eastern, it really
| | 02:54 |
doesn't matter what you set the time zone
to, and that might be part of your hashing.
| | 02:59 |
Making the time not the current time of
the time zone that you're in, but some
| | 03:02 |
other weird time zone.
What you really want to do is try to
| | 03:05 |
confuse the hash as much as possible, but
still be able to recreate it yourself.
| | 03:10 |
So now I'm going to create a variable to
hold the current time in Linux format.
| | 03:14 |
So you could just do a variable called
currtime, and we'll set it to the time function.
| | 03:19 |
Here's the time function on the PHP
manual.
| | 03:22 |
I'm also going to create a date to store
into our database.
| | 03:25 |
When logging someone in, you're going to
have to recreate that hash.
| | 03:28 |
So that's why we created field for the
date in our database, so that we can
| | 03:31 |
store this time and recreate the hash if
we need to.
| | 03:35 |
I'm creating this date in a format that
is compatible with MySQL.
| | 03:39 |
You can take a look at the different
options for the date function in this page.
| | 03:44 |
You can see the different options right
here.
| | 03:47 |
Now we're ready to create the salt,
convert it to a hexadecimal string.
| | 03:50 |
And although you don't have to do this,
that will create an even more random hash.
| | 03:55 |
The point is to do something unexpected
that only you know about.
| | 03:58 |
So you probably want to use a trick
that's not the same as mine.
| | 04:01 |
I'll call this one, salty.
And I'll add the password we receive from
| | 04:04 |
the user at the end of it.
The Dec Hex function converts a decimal
| | 04:08 |
to a hexadecimal value.
You can take a look at the documentation
| | 04:12 |
on this page.
So finally I'm ready to use the hash function.
| | 04:16 |
I'm going to use the sha1 as the hashing
format and pass along our salted variable.
| | 04:22 |
You can take a look at the manual for the
hash function right here, and make sure
| | 04:25 |
you scroll down and you check out all the
different types of hashing algorithms you
| | 04:28 |
can use.
So now we're ready to insert this into
| | 04:32 |
our database.
I don't want to email this data anymore,
| | 04:35 |
so I'm going to clear out this section
right here.
| | 04:38 |
Now we need to include the document with
the database login credentials.
| | 04:41 |
So I'll use the include function and I'll
include the file we created in the
| | 04:43 |
previous movie.
We need to connect to our data base.
| | 04:47 |
The current way to do this is by using
the mysqli_connect function.
| | 04:51 |
So I'm going to create a forminfolink
variable.
| | 04:55 |
This creates a link to the data base and
use mysqli_connect to connect to our database.
| | 05:01 |
Now, here what I want to do is pass other
variables that are in this other file
| | 05:04 |
that we created earlier.
So, I need to pass it the host name, the
| | 05:09 |
password and the database name.
Then we need to create a query.
| | 05:16 |
The query is going to be a standard SQL
command to insert our variables into our
| | 05:20 |
form info database.
The typing for this gets a little tedious
| | 05:24 |
so, I'm going to copy from the code
snippets file.
| | 05:29 |
So I create a variable for the query and
we paste it over here, indent it, and
| | 05:35 |
I'll walk you through it.
So, here, I'm inserting into the table
| | 05:41 |
called Form Info, the following values,
and the field names here are the same as
| | 05:44 |
what I created in my table.
The values is what I'm going to pass from
| | 05:49 |
variables that the user has submitted.
Now the first one is set to nothing.
| | 05:54 |
And that's because our first field is an
out of increment field.
| | 05:57 |
The database will provide this field for
us automatically, we don't need to worry
| | 06:00 |
about it.
The next one is the date for the database.
| | 06:03 |
That is the date that is using the time
that we created and used as a salt.
| | 06:07 |
That's important to store in there.
Then we have the data from the user, my
| | 06:10 |
name and then the salted version of the
password as well as my comments, the reference.
| | 06:16 |
And what I'm doing with the favorite
music is, since the information is an
| | 06:20 |
array, I'm actually using the implode
function and putting a comma in between.
| | 06:25 |
What that does is, when the user submits
different check boxes, it's just going to
| | 06:29 |
create a string that's every check box
they click on separated by a comma and a space.
| | 06:34 |
Then finally the request type.
So next just like with the mail code,
| | 06:37 |
we're going to check to see if the query
was successful.
| | 06:40 |
And if it was we'll print the message,
otherwise we're going to print an error.
| | 06:44 |
I'm going to also copy this from code
snippets.
| | 06:54 |
So here's how this is working.
First we create a variable called, Form
| | 06:57 |
Info Result, then we run the
mysqli::query command, passing along the
| | 07:01 |
link as well as the query that we just
created up here.
| | 07:05 |
That function will create a boolean
variable that gets fed into the Form Info Result.
| | 07:09 |
So, if the query was successful, then we
can output a message.
| | 07:12 |
We've got a normal version of the message
as well as an AJAX version of the message.
| | 07:18 |
Now, if there's a problem with the
database, we output another message.
| | 07:21 |
Now, if you're debugging, you may want to
add the query right here.
| | 07:25 |
You don't really want to have it in
production, just in case somebody gets an
| | 07:28 |
error, or causes an error in your
database, you don't really want to output
| | 07:30 |
the query for everyone to see.
So if you add the query right here make
| | 07:34 |
sure you delete it before you go into
production.
| | 07:37 |
So then after all this we just need to
close the database.
| | 07:40 |
We do that with the mysqli::close, and
we'll pass it along the link that we
| | 07:43 |
created earlier.
Form info link, and let me go ahead and
| | 07:48 |
save this.
An we'll go back into our form and try
| | 07:50 |
filling something out.
When I hit the Send button, I should get
| | 07:54 |
the "form data has been processed,
thanks." And if I go back into my
| | 07:57 |
database I'll refresh this page.
I'll click on my database, and now I
| | 08:03 |
should be able to see the Browse Tab
because an entry has been created into
| | 08:07 |
the database.
And here's my wonderful entry with that
| | 08:12 |
gargantuan hash.
Developers love databases because they
| | 08:15 |
make it easier to aggregate data and
create reports.
| | 08:18 |
Although some of the forms are emailed,
most data from a form should be stored
| | 08:22 |
into databases.
MySQL how to create reports and read data
| | 08:26 |
are pretty complex subjects.
Thankfully we have some great courses on
| | 08:30 |
the library like MySQL Essential Training
form Bill Weinman.
| | 08:34 |
Make sure you check that out.
| | 08:35 |
| | Collapse this transcript |
|
|
ConclusionNext steps| 00:00 |
Most people don't think of forms as being
a really exciting topic, but even from my
| | 00:03 |
days as a graphic artist, I found it to
be really interesting.
| | 00:07 |
It really makes me mad when I see online
forms, that are difficult to fill out and confusing.
| | 00:12 |
If you can't get enough about forms, we
have a lot of really cool courses in the
| | 00:15 |
online training library.
You may want to check out one of my other
| | 00:18 |
courses on forms, called CSS Styling
Forms.
| | 00:21 |
The forms that you see on this course,
were taken from CSS Styling Forms.
| | 00:25 |
One of my favorite resources in the
online training library, is Web Form
| | 00:29 |
Design practices by Luke W.
It's not so much about the code for
| | 00:33 |
creating forms, but about the design, and
how to make forms more usable.
| | 00:38 |
This is going to sound a little bit
nerdy, but, this is one of those courses
| | 00:41 |
I couldn't put down once I started
watching.
| | 00:44 |
You may also want to check out his book
called, Filling in the Blanks.
| | 00:50 |
Or this article, that has some
information from his book.
| | 00:53 |
This course also touches on a lot of
other topics, like PHP and MySQL.
| | 00:57 |
I like our advance PHP Techniques course,
or PHP with MySQL Beyond the Basics.
| | 01:08 |
Finally, you may also be interested in my
blog called iviewsource.com, where I talk
| | 01:11 |
a lot about front-end design and
JavaScript topics.
| | 01:15 |
Thanks for watching my course.
| | 01:17 |
| | Collapse this transcript |
|
|
