Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Validating Form Data

  • What is form validation? Form validation is the process of making sure that the data entered into a form is the type of data that you want
  • Dreamweaver allows you to add client side form validation to specific fields
  • Usually as you are creating the script that will process the form, you will add server-side validation which is much more powerful than client side validation
  • We will add validation using Dreamweaver behaviors
  • Behaviors are JavaScript scripts that Dreamweaver can add for you in order to allow for some client side validation, this is not a perfect type of validation, since if the user turns off javascript in their browser, they can submit anything since that turns of validation also
  • We will add our client side form validation using the Behaviors panel
  • Select the text fields and click the + sign in the behaviors panel
  • Only certain page elements allow for some of these behaviors, so if the behavior is greyed out, it means you cannot do that on the page element you have selected
  • Click Validate form
  • Go through this process for the various text fields on the page, it is only text fields that we can validate using Dreamweaver
  • Preview the page in the browser & click the submit button without filling in anything
  • You will see the form validation that Dreamweaver has added provided Javascript is turned on in your browser

Validating Form Data

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Form Field Validation Example 0:32
  • Client Side and Web Server Validation 2:54
  • Adding a Comment Section 6:14
    • Comment Text Field Attributes
    • Comment Text Field Tag Properties
  • Add Form Field Validation 8:47
    • Tag Inspector Area
    • Add Validate Form Behavior
    • Validate Form Behavior Attributes
  • Preview in Browser 11:56
  • HTML5 Form Field Features 14:56
    • Required and Autofocus Attributes
  • Preview HTML5 Form Validation in Browser 18:08
  • Summary 20:41

Transcription: Validating Form Data

We are now going to take a look at what is known as form validation.0000

Every form you create on the Web, you will want to add some type of validation; and I tend to find people don't really know what that means.0005

Let me give you an example of what I am talking about, with regards to form validation.0016

And then, we are going to talk about the different ways you can add validation to your form; and then, we'll go in and see what Dreamweaver can do for us in terms of validation.0021

First of all, I am on my website with this form for contacting me.0032

And if I click Send Message, notice that the fields change colors; there is a little message that pops up inside a box area on the page; and it is letting me know that I did not fill out the information within each one of these fields.0039

Now, these first three are basic text fields; this one here is known as a text area.0058

It is a larger piece of content or a larger field; and so, this text area acts just like my text fields up here.0066

But what I want to focus on is the fact that I didn't enter information into this form; so if I go into the form and go ahead and enter my first name and click Send Message, notice, that message goes away.0078

Now, I just have the remaining three fields; in other words, each one of these is a required field on the form.0095

Now, there are a couple of different ways you can add this type of form field validation, alerting the user that they didn't insert the proper information, or at least as much of the information as you want them to insert.0104

And that is form validation--testing the information the user put into the form to make sure it is the correct information.0121

I added some information within the name field now; so when I clicked the button, form validation occurred, and the browser understands that I entered the right information; it is actually the Javascript within the browser that determines that on my form here.0130

And that is why this one did not turn red--it stayed yellow; the rest of them are staying red, because I didn't enter the correct information.0150

That is form field validation--testing what the user puts into the form and popping up messages or giving them some indication that it wasn't filled out correctly.0161

So, moving off of my form...I do keep that form up there purposely--it's a special type of form that really isn't used too much anymore, but it's a great way for me to show you what form validation means.0174

And on my website, there are quite a few things like that, that maybe it's not the most up-to-date, but I use it in my courses for letting people know what it is.0189

Now, there are two types of form validation: there is what is known as client-side validation...0200

Do you like this antique computer?--I keep it up there just for old time's sake.0206

The client--we are actually referencing the browser; so in other words, when the user clicks the button in the form, the browser will take care of reading that form, and the form stays in the browser until the form fill validation passes.0214

The browser says, "OK, the information here is correct," and then we can send that information to the Web server and whatever script is sitting on the server to process that form field information.0233

Now, that is client-side; it is possible for the user to turn off their Javascript and, within the browser, it's the Javascript that performs the validation.0246

So, in other words, I can have form validation on my website, and it still won't prevent the form from being submitted if I have Javascript turned off--because then, if Javascript is turned off in the browser, there is nothing to test my data when the user clicks the button.0261

That is client-side validation--it occurs over here; the data stays there until it's correct.0281

The other type of form validation goes into the Web server on this side; and that is known as server-side validation.0288

In other words, the user fills out the form and sends the data to the Web server, and the Web server determines if it's the right data or not.0297

If not, it sends the information back to the user with messages within the form letting them know what they did wrong.0306

So, usually you decide whether you want client-side or server-side validation.0314

We are going to look at what Dreamweaver can do for us from a client-side validation only.0322

Client-side validation is not the most effective type of validation; oftentimes you will find people putting client-side validation on, and then they will also add server-side once it gets to the server.0328

That is really the best method for testing what the user puts into a form; it is basically checking it twice, and usually you will get your best results that way.0343

Here is my Contact Us information and my form on the page.0355

So, I have this form on the page; now, down here in the Travel Destination area, I really don't have much being listed, other than them checking off the information for the different regions that they want.0360

So, what I think we should do is put in a Comments area down here.0377

Let's add that before we go to the validation piece; so what I am going to do is click the text field (the second icon up here in the Forms tab).0381

This was added; it is the same field that was checked to create the Name and Email fields.0393

I'll add that down here; I'll click that first text field; and the ID is going to be comments.0400

My label will be Comments; and what I am going to do is give them a larger area of the page, similar to what you saw on my form, to fill us in on whatever information they want to about where they want to go.0409

I am going to put my cursor after the s and hit Shift+Enter, so I move the box directly below Comments.0426

I am going to select that box, and I am going to change this from a single-line to a multi-line box.0435

You can see, all of a sudden, our box looks very different.0445

Now, a very common character width here is 50 or 55; I'll go ahead and say 50 in characters wide.0450

As soon as I click out of this, you will see that box grow in width.0459

The other thing I am going to do by selecting the box to get back to this area is: I am going to determine the number of lines I want added; and I'll give them 5 lines.0464

You can see, that made a nice, open box for me within this area.0477

I can put in what is known as an initial value; I can start the comment area within this initial value.0483

I tend not to use that, because what happens is: if the user doesn't want to start their comments with that, they have to click their mouse and delete it.0493

So, I am going to leave that blank; but that is what that is for.0503

Now, let's add some form field validation; I'm going to save it now that we have our comments added; and I'm going to move up to a new panel we haven't looked at over in the Tag Inspector area.0508

If you can't find this, it's here under Window, and go down to Tag Inspector.0523

Within this area, there are actually two buttons: the first is Attributes; the second is Behaviors.0531

I want the Behaviors area.0539

Now, when you see that word "Behaviors," that is a Javascript behavior we are referencing.0543

Now, Dreamweaver references those as a behavior, because it is something that gets attached to a specific form field in your form.0551

You always have to have something selected before you go to the behaviors.0560

What we want to think about is: what is it that the user needs to do that is going to trigger form field validation?--and that is click the button.0565

I am going to select the button and then go up to my Behaviors area.0575

Up in Behaviors, I'll click the + sign, and once I do, that allows me to add behaviors.0581

There are some in here we will look at at a later date; but one of them I want is Validate Form down towards the bottom.0589

I'll go ahead and choose that; now, the Dreamweaver form field validation features only apply to text areas and text fields.0598

So, I have the ability to set a behavior for the Name field, the Email field, and the Comments field.0610

Let's set Name and Email within this form, and then you can see what happens.0618

First of all, I'm going to choose the field (so I'll select Name), and I'm going to say this is required.0623

What it does is put an R after the field; and it will accept any type of content within it.0631

Since it is text, we really can't limit too much.0639

The next one I am going to choose is Email; and I am going to make that required, also; if they are going to contact us, I want to have their name and their email address so we can respond back to them.0643

Now, with the Email piece, what I want to accept is only an email address in that field.0657

I'll go ahead and click Email Address; so you can see, it's required; and is it an email?--so those two go together; those are two different pieces, showing me what I have added down below.0665

Let's click OK; you will see, there is an on-click event, so when the user clicks this button that I have selected, the validate form method is going to run; it's going to test for the name and the email.0681

Let's put it into the browser and see what happens.0697

I'll go out into Chrome, just because it's the first one there; and I'll scroll down to my button and click it; and notice, I get this Javascript alert that says the following errors occurred.0702

That sounds great--those two are required.0716

I will also plug in just some text and click Contact Us; notice, it says "Email must contain an email address."0721

So, it is not just a matter of putting any information in the Email; it is a matter of putting an email address in there; so it is also testing for that, which sounds fine.0731

But let me take this out to Firefox and show you what can happen (and this is one of the reasons why we use server-side and client-side form validation).0742

What I am going to do is click this icon to open the Web Developer toolbar, which is an extension I have added to Firefox.0754

And I am going to go out to the Disable category; and actually, let me show you this in Firefox first--we'll make sure it's working.0763

I'll click Contact Us, and here it is: Name and Email are required.0773

But here is what a savvy user can do: they can take their Javascript and turn it off.0779

Now, when I click Contact Us, it is going to submit the form to my Web server anyway.0786

There is no Javascript available to test this form, so data can be submitted over and over again without a problem.0793

And that is when my server-side validation should be testing.0802

We don't have that set up on our form, but it is something that, once they add the script to process the form data, it is usually something that gets added to that script if you want server-side validation.0807

I'll go ahead and turn this back on, just by checking it in this Web Developer toolbar; if you turn it off, you have to turn it back on manually.0820

I'll uncheck that; now, if it's properly checked (and let me go ahead and double-check that--this is something you always want to double-check; so)...there is Contact Us, and it should be popping up; and there it is--the Javascript message once again.0830

That is the Behaviors piece in Dreamweaver.0850

Now, the Behaviors piece is only valid for text fields; but on this form, that is all we really need; but there are many instances where you may need a little bit more than that.0856

But we have our behavior set up for our Name field and our Email when they go to click the form.0869

What I am going to show you is another option available to you; and I am going to do a File, Save as, and this one is going to say Contact Us-HTML5.0877

I am going to take this one that had the behaviors and leave it alone; remember, I said I always make a new copy of a page before I do too much to it.0895

What I am going to do--instead of using behaviors, I am going to show you how to remove a behavior--and that is simply: select whatever it was that was selected that has the behavior attached; and I am going to select the behavior that has been assigned and click the - .0906

I don't want that behavior on that button any longer.0925

What I want to do is show you something that you can do using HTML5 instead.0930

So, you can see, HTML5 has some new form field pieces available to it; and we do need to go into code to use these--they are not quite integrated in everything yet, because HTML5 is not a full standard at this point.0936

But that doesn't mean we can't start using some of this; so what I am going to do is select the Name field, and I am going to click on Split View.0958

I'll go ahead and close that up by clicking those upper right arrows; and I'm going to close up my properties, so you can see what I am doing a little bit better.0969

Now, up in here, inside my input tag, what I am going to do is use a new feature of HTML5.0981

I don't need Javascript in order to do this: now, the key for using this is: first of all, it has to be an HTML5 doctype--which I do have on this form.0990

I can only use this if it has an HTML5 doctype.1003

I am going to go over here; and right before the final angle bracket for the Name field (which is this one right here--if you aren't sure, select it in Design View); I'll put my cursor right before that last bracket, and I'm going to say Required.1008

And notice, it does pop up as a code hint in Dreamweaver.1027

The other thing I am going to add is autofocus; that is another new HTML5 property.1031

And then, I am going to take those two and do a copy; I want to do the same thing inside my email address.1040

I set Name and Email to a required field; now, my Email is not going to be autofocus, so I am going to remove that from this area.1049

I don't want to try and autofocus two form fields (you will see in a moment what autofocus means).1062

I'll put this into the browser, and let me preview in Chrome, because I know Chrome supports this feature.1069

Notice, when I opened my form, not only did it place my cursor inside that Name field because I said autofocus, but it also highlights it for me in this yellow naturally, by default.1076

I didn't do any styling for that.1092

Now, watch what happens if we click the Contact Us button without filling this out: I'll click on that, and look at what the browser did--"Please fill out this field."1094

I set it to a required field, and required right here, and the browser took care of it--no Javascript needed (which is a pretty cool feature).1106

HTML5 has a lot of cool new form field pieces; it's just a matter of "will the browser support it or not?"1118

We know what it looks like; I'll tab into Email--you can see it highlights it also, because we have that same required field in here.1127

You saw that it worked for the name; let me type my name in.1137

I'll go ahead and try and submit, and you can see, email is required, as well.1142

Now, what happens if we go to browsers that don't support HTML5?1149

And I.E. 8, which I have on this system (which is a very, very old version of Internet Explorer)--let's see what happens with it.1154

Here is my form; I'll go down and click Contact Us, and it's submitting the form automatically.1164

There is nothing popping up or stopping me at all.1176

Let's take a look in Safari; we'll do one more browser.1180

You can see, it's highlighted based on the autofocus, so it puts my cursor in there and highlights it; Contact Us--no message popped up in this version of Safari.1185

So, personally, I think it's a little premature to be using pure HTML5 elements--as you can see, the browsers just aren't quite ready for it.1197

But I wanted to make you aware that that exists, and that is the required attribute for an HTML5 form.1207

We also looked at autofocus, which placed my cursor directly into the field.1216

That is some information on how you can add client-side form validation, either by using the behaviors to add Javascript through Dreamweaver, or you can type it in and use it (if you are purely referencing and planning on HTML5 browsers taking a look at your web page).1222

If that is the case, you don't need to use Javascript at all: you can use HTML5 features.1246

That is client-side form validation using Dreamweaver.1254