New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

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

Are you sure you want to delete this note?

No

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.