Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
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.
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.
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.
Your file was successfully uploaded.