Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In many cases, you will want the user to fill out specific information before submitting a form. To assist the user in his process, you can use what is known as form validation. Enabling form validation will disable form submittal until specific elements or requirements have been filled out properly. Good validation also gives clear user feedback; we have supplied some feedback prior to form submittal by giving the required notice to the email address. Now we will add actual form validation to make sure users are adding an email address to their request. There are two types of form validation, client side and server side.
I am going to scroll down and I see right in this list, we have Validate Form. I am going to choose that and this nice little dialog box that comes up and all the elements on the page that can respond to Form Validation are listed and we have three; we can make the name required, the email required or the text area required. Well, we have only told the users that the email is required, so I am going to select that and for Value I will choose Required. You can see there is a little R beside it. But we just don't want to make it required; we want to let them know that they need to type in an email. We also want Dreamweaver to write a script that will check to see if any email address has been used.
So instead of accepting anything, I am going to click on the Email address radio button and you can now see it says required is email. So we will go ahead and click OK. When you create a behavior, it will list itself in the Behaviors panel and you can see that it says onClick Validate Form. If we ever wanted to change the behavior, all we have to do is double-click it and the same dialog box we had opened will come right back opened again. We could also change the event. Right now the default is onClick. But if I grab the pulldown menu beside it, I could choose onBlur, onFocus, onKeyDown. I could really pass along any event that I wanted to this behavior. That's all there really is to Dreamweaver's client side form validation.
Let's save our file, preview it in browser, and now as I fill my form out, scroll down so I can fill it out. If I go ahead and enter a name and start clicking around and adding some more comments, and if I click on send request, notice that now I get a little popup message that comes out that says hey, the following error has occurred: - email is required. So a client side validation really only gives us the ability to have this popup come up. But often times that's all the feedback the user really requires.
I can click OK. So I could type in genericName@generic.com and even though I haven't filled out anything else in the rest of the form, I hit send request and I don't get that error message. So there you have client side form validation brought to you by Dreamweaver's behaviors, really quick, very easy way to add a little bit of functionality to your page. Now our final form's exercise is going to be taking a look at the new Spry validation widgets.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.