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

Understanding the Password and Confirm validation widgets

From: Dreamweaver CS4 New Features

Video: Understanding the Password and Confirm validation widgets

In addition to the Radio Group, Dreamweaver CS4 comes with the Password and Confirmation Validation widgets as well. The Password Validation widget allows you to set a maximum and minimum number of characters and the Confirmation widget allows you to give the user the ability to check against the value of another field, typically a password. In our example files, I have gone into the 09 folder and I've opened up the contact.htm page from there. If I scroll down, I can see our contact form and there is the Spry Radio Group that we worked on the previous video.

Understanding the Password and Confirm validation widgets

In addition to the Radio Group, Dreamweaver CS4 comes with the Password and Confirmation Validation widgets as well. The Password Validation widget allows you to set a maximum and minimum number of characters and the Confirmation widget allows you to give the user the ability to check against the value of another field, typically a password. In our example files, I have gone into the 09 folder and I've opened up the contact.htm page from there. If I scroll down, I can see our contact form and there is the Spry Radio Group that we worked on the previous video.

It's already been added to the page. So what we're going to do is we're going to do add a Password and a Confirmation form element just above these. So I'm going to click right after the Skype Name form element and I'm going to hit Return to add a paragraph and here, we are going to insert a password combination field. Now, if I go back into my Spry Objects, I can find the Spry Validation Password and the Spry Validation Confirm, they're right next to each other. I'm going to go ahead and insert the Spry Validation Password widget. So I'm going to click on that and again, this is just like inserting any other form element. So for ID, I'm going type in pwd.

That would be the ID of this form element and for Label, I'm going to type in Choose a password. And place a little colon after that. I prefer to attach the label tag using the for attribute, but you can use whatever your preferred method is and I'm going to do it before the form item and although we could, I'm going to skip adding an Access key or a Tab Index. But if I was really concerned about my accessibility, I'd want to do that. So I'm going to go ahead and click OK, and it's going to add that to the page. Now, I'm going to do a really slight modification to these.

The first thing I'm going to do is I'm going to place a line break after the text, Choose a password, I'm going to hit Shift+Enter to give myself a line break so that the text field itself shows up on the next line. Now the reason for that is because the validation text is going to show up just to the right of the text field and I want to make sure I give myself enough room. So I'm going to select the text field itself and using the Properties inspector, I'm going to give it a class of text so that it looks just like all of my other text fields and that's a class that obviously was predefined. To actually set the options for our Validation widget, I'm going to click back on the blue tab that indicates this is a Spry Validation Widget.

Now again, I want to make sure it's Required and I'm going to change it so that it's validating on both the Blur and the Change. Currently, we are looking at the Initial states, so it's looking exactly as you would expect. Now we have a lot of options when we're determining exactly what the limitations of a password should be. Notice we have a minimum number of characters and a maximum number of characters. We can also be a lot more specific. We can choose minimum and maximum values for letters, numbers, uppercase and special characters. So if you wanted to do a mixture where you had to have at least two numbers and a certain number of letters, you could go and specify that.

Now we are going to keep it fairly simple. We are going to say four minimum characters and ten for our maximum characters. Notice that as soon as we added those, we've got two new preview states and if I click on my Preview states dropdown menu, notice that I have a Required value and it says, "A value is required." Let's go ahead and modify that. I'm going to go ahead and highlight "A value is required" and I'm going to go ahead and change this to say, "You must have a password." Now from time to time that text may break depending upon how long you have it but remember you can go back and modify the CSS so that the text looks exactly the way that you need it.

Now let's go back and take a look at a couple of our other states. Let's go to the Minimum # of Characters Not Met. So again the message says, "Minimum Number of characters not met" and of course, it's breaking on another line. So let's go ahead and highlight that and let's go ahead and type in, "4-10 characters please." So I'm being very specific about my feedback here and if you are putting any kind of limitations on your password, you want to be specific about the feedback, so the users knows exactly what to do. Like I want to say, "Hey, this has to have at least two letters and six numbers." You'd want to be very, very specific there.

Again, let's go back and click on this and let's go to the Exceeding Maximum # of Characters and I'll go and highlight that and we are just going to make this a little bit more simple. We are just going to say, "Too many!" And I might go ahead and give that an exclamation point. OK, there we go. One of the things you may have noticed is that when I'm highlighting this text, I'm being very, very careful. It is really, really easy to highlight more things than just this text, and you'll find that you are replacing some of the other elements on the page. So I'm always very, very cautious with how I highlight that validation text and you want to make sure that you're being equally as careful.

So let's go ahead and save the file and when I do that, again Dreamweaver is indicating that I'm saving two additional files to my site, my SpryValidationPassword CSS file and my SpryValidationPassword JavaScript file. It's going to add those to our SpryAssets directory. Again, if we did not have that on our site already, it would go and create it for us. So I'm going to go ahead and click OK and it's just going to add it to that folder. We are not quite done yet, because in addition to having our Password text field, we want a Confirmation widget there as well. If somebody types in a password, if they hit a misspelling or hit the wrong key, they might think that they have set their favorite password only to find out later on when they log in that they did not.

We want to make them confirm that they have indeed entered the password that they want. After our password, I'm going to hit Enter again to give myself a new paragraph and we'll go up to our Spry Validation Confirm widget. You can find that again up in your Spry Objects. Let's go and click to insert this and our ID on this one is going to be confirm, is the name of the element. That's the ID of the element. The Label is going to read Confirm password. And we'll type in a little colon again. We're going to attach the label using the for attribute, and we'll position the text before the form item. Let's go and click OK.

Now, exactly like we did with the last one, I'm going to go ahead and enter a line break right after the text. Select the text field and apply the class of text so that it looks like all of our other text fields. Perfect. Let's actually go in and set our Validation widget option, so I'm going to hit the Spry Confirm tab and my Properties inspector changes. Again, I'm going to validate that on both the Blur and the Change. This one is fairly simple. Notice that you need to tell it which element to validate against. It's smart enough to find the password file, but if you wanted to validate it against another form element, you could simply choose the form element from the pulldown menu, but most of the time it will go ahead and choose the right one by default.

Again, let's take a look at our preview states. Let's go to Required and I'm just going to highlight that value and I'm going to type in something little bit more tongue-in-cheek, "Give us something," and again maybe an exclamation point there. Now, in addition to the Required, what happens if they type in the wrong thing? So instead of this invalid text, we are going to type in, "They need to match." OK, perfect. Again, let's save the file and in addition to the password validation files, we now have our confirm validation files.

Notice that it's giving us both the CSS and a JavaScript file. We'll click OK and it's going to add it to our SpryAssets directory. Now that we have both of those widgets done, let's just preview it in our browser and make sure that they are working. So I'm going to go up and preview this in Firefox. And again, I'll scroll down to the form and I'll just submit it without actually filling anything in. And now we're getting a lot of feedback. If I look at my password section that says, "Hey, you have to have a password" and my Confirmation widget says, "Give us something!" and getting neither of them have been filled out. So if I click in the Choose a password and I began to type, just going to type in 1-2, now look what it's doing. It's giving me the feedback that I need to have 4-10 characters and this is great because if I'm a user of the site now, I know exactly how many characters my password needs to be and if there were any special requirements, like a certain number of numeric values or characters, I would now know that. So I'm going to type in 1-2-3-4, there I go, I get them.

So if I click into the Confirm password section and I began typing, 1, notice it says one, notice it says, "Hey, they need to match." 234, they match, I hit 5, they don't match. So again, it's giving me that feedback that yes, they do match, or yes, they don't match. So that's perfect, that's exactly what we want. So these Confirmation widgets make it easy to apply robust feedback to form users without employing complex server-side validation. If we wanted to change the look and the feel of this, we could certainly do that very easily by modifying the CSS files that were copied over.

Show transcript

This video is part of

Image for Dreamweaver CS4 New Features
Dreamweaver CS4 New Features

16 video lessons · 18618 viewers

James Williamson
Author

 

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 Dreamweaver CS4 New Features.

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.