Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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, 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.
Get unlimited access to all courses for just $25/month.Become a member