Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Adding a behavior

From: Dynamic Dreamweaver Websites: Creating and Validating Forms

Video: Adding a behavior

Let's take a look at adding the Dreamweaver feature for client side validation. And that is known as a behavior, and the specific behavior we're going to work with is the Validate Form behavior. In order to do this, I'm going to open up the Contactus.php page, and I'm going to do a Save As, and save this as a separate page. So this one is going to be known as Contactus-behaviors.

Adding a behavior

Let's take a look at adding the Dreamweaver feature for client side validation. And that is known as a behavior, and the specific behavior we're going to work with is the Validate Form behavior. In order to do this, I'm going to open up the Contactus.php page, and I'm going to do a Save As, and save this as a separate page. So this one is going to be known as Contactus-behaviors.

I want you to have the option. To view any one of these pages individually, so you'll see we have quite a few here, and we'll add this one to the mix. You should see that pop up here shortly within Dreamweaver, the Files panel will update automatically. Should it not do that, you can see it just popped it in. If that does not happen fast enough for you, you can always click this blue button which is the refresh button for the Files panel. And we're going to take this Contactus-behaviors, I'll close up the regular ContactUs page.

And add some validation. Now, what we have are a bunch of different types of form fields. The Dreamweaver behaviors feature is only valid for text fields. Which means these two fields, name and email, or text areas, which is our comments area. Now I've named each of these form fields, the same name as the text to make it easier. Before you had a behavior in case your Behaviors panel is not open, you can access it by going to Window and go down to Behaviors.

If there's a check mark in front of it, that means it's already open. So it's not actually in a behaviors named tab, this tab has a couple of items in it. In order to use this, what I'm going to do is select the Contactus button. You select the item that's going to trigger this behavior to occur. The idea is, the user is going to fill out our form here and when they click this Contact Us button, that's when this behavior is going to run.

Java script is going to go through and test these text field areas. So, to our actual text fields this one is the text area, and make sure that information was added. Now we really don't need comments to be a required field. They can add comments if they want, but we really don't have to have them add a comment. So that's really up to you based on your form. Quite often these big open text areas, you're not going to necessarily make them required.

So we can decide if we want to make them required or not. I will go ahead and do that in this form, so you can see that the text area works exactly the same way as a text field. So my button is selected, I'll go over to the Behaviors panel, and go down to Validate form. Now once I choose this, what's going to happen is the form fields that you can apply this to, will pop up within this interface in the fields area.

So, if I had ten text fields or text areas total on the form, I would get ten of these different fields. And we kinda work with each one individually. So, I have input name, input is the actual coding in the HTML piece to create our text field here. Whats in double quotes, is what I named the text field, so you can see this one, I called name in lower case, email and comments.

So that's where the second word is coming from. If you named your form field a different name, that would pop up in here. So Dreamweaver automatically pulls into this area, the text area, and text fields within the form your working in. I'm going to make Name a required field, so it gets an r, meaning required, after it. For the email, I'm going to put required. I'm also going to list an email address. So I get the r for required and I get the words, is email, for the email test. Let's go ahead and make our comments area required, just so you can see a big open text area or its exactly the same way.

So, we've made these three fields required. Now, this is as far as these behaviors can get you. Quite often, forms only have text areas on them or text fields. If that's the case, then this validate form will be enough for you possibly you'll see in a minute. You can make that decision on perform basis. So I will click OK. Once I do that, you will see on the left hand side, is listed the event that has to occur.

In order to trigger this to happen, so, the idea is the on click event for the buttons, which is what we have selected is validate form. So when the user clicks that button, that's when this is going to occur. Let's save this page and put it in the browser, see you can see how it works. So here's our form. If I click the button without filling anything out notice it puts in name, email and comments.

Now this works just fine. Comments is required, not necessarily gramatically correct. We can't put much of a statement in here. So, some people like this. It's enough for them. I have a lot of clients who don't think this enough, so I may end up doing some custom validation for them. It varies based on client. I'll click OK. Now, what if I put a name in here? If I click Contact Us, it just says e-mail and comments.

Now, this is what I love about Firefox, If I've already entered some information in a field by this name, if I double-click inside, I can populate this field with whatever I've entered previously. Let me click Contact Us. I want to make sure I test every individual piece, independently. Let's take a look at the code on the page that Dreamweaver created. And here is a JavaScript, notice it says JavaScript now within our page. That's the JavaScript piece that Dreamweaver added when we did this. And this entire piece here, is what triggers that little JavaScript alert box to pop up.

Now, if you kind of search through this, you'll see there are some sentences being added, so there's one other piece. Let me not put in an email address. What constitutes not an email? The email address is looking for a certain number of characters. An at symbol, characters, a dot, and characters after it. So if I don't put that in, and click Contact Us, you can see the message. E-mail must contain an email address.

Now, checking for those characters does not guarantee it's a good email address. However, it's at least testing to make sure that the format, for whatever is entered in there, is correct. So that is our Dreamweaver behaviors in action. If I go to View Source again, this information is in here, and if you read this, must contain a number between two different values. So Dreamweaver is dropping in this information for us.

Now you can customize this just a little bit. What this is going to do, is plug in our field name before the word is required. So lets say I wanted to change this wording Just a little bit. I can go into the form. Scroll up to the top because this is all sitting on the page, and instead of just saying is required, I can say is a required field and that would at least take care of the comments piece.

So I'm right here and instead of just saying is required, I added this to say, this is a required field. 'll go back into the browser, and just make that comments piece look a little nicer. Name is a required field. Now you can see it adds that to each one of these. I made my field names lower case. It is adding that period in there, and this isn't a real sentence. So, one last little piece I'm going to get rid of this period right here, because we're not really working with it as a sentence.

And yes, maybe this is a bit over the top. People don't care about it. But I think we might just as well look a little more professional, so is a required field with no period. So, that is kind of the extent of what Dreamweaver's behaviors can do for you. As you're working in form validation, always test every form field independently, with information in the field, and again with information out of the field. Now, I haven't tested it in the field, so let's do that. I'll go down to Populate Form Fields, this is that great feature for Firefox that allows me let Firefox fill this in.

If I click Contact Us, here's my information so I know even if I put information in, it's still working even though I've added a behavior. And that is Dreamweaver behaviors in action.

Show transcript

This video is part of

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dynamic Dreamweaver Websites: Creating and Validating Forms.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.