Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In our last exercise, we added client side validation to our page using Dreamweaver's behaviors. What if you could give your user interactive feedback as they filled out the form, when they were on a form element they need to be validated, for example, if they switched to the next one, maybe they could get some feedback at that moment. Now, we used to have to use server side validation in order to achieve that type of behavior, but Dreamweaver has added four validation Spry widgets to our form objects. So I am in the contact. htm exercise file and I want you to go up to the Insert toolbar and click on your Forms tab if you are not really looking at those. The four icons at the very right hand side, the ones that are sort of green in color, for that we have a Spry validation text field, we have a Spry validation text area, checkbox and a pulldown menu, a select validation.
So anytime you are using one of those particular types of form elements and you want to apply some interactive validation to the element itself, these are great tools to do that with. Now, what we are going to do is we are going to replace our existing email form object on the page with one of the Spry validation text field elements. Now to do that, I am going to go ahead and delete the entire email including the user feedback, we are going to replace all that with some Spry feedback. So I am going to switch to Code View. In Code View, on line 62 we can find our email object. Now I am going to go ahead and empty out the entire paragraph that the email element is inside of. So the label, the span tag, the input tag, I want to make sure I go ahead and get that all cleared out and that's why I am doing this in Code View. So we will go ahead and hit Delete and that will clear that out. From that point we can just go back in the Design View and work from there. So we have this blank line, where our Email element used to be, and here is where we are going to insert our Spry widget.
So here we have another text field on the page and it looks exactly the way our last one did. But we see an outline around it and a blue tab that says sprytextfield1. Go ahead and click on that tab. That's going to give you control of your Spry widget. Notice the Properties inspector now populates with all the properties of the Spry widget. The first thing we are going to change is Type. Right now it says None and that would mean nothing is required. So I am going to grab the pulldown menu and I am going to choose Email Address from the data type. We want to make sure that this is checking for an email address. Now as soon as we do that, we notice that the visual state of the Spry widget has changed. Well, these are preview states on the right-hand side and you can see that if you click on Initial, you can see what the Spry widget looks likes initially. Then you click on the Required and that's the message that's going to get passed for one value is required and the same with in Valid format and Valid gives that a nice sort of green background.
Well, let's change some information here. Click on the Required and I actually want to highlight, A value is required and I am going to type in, An email address is required. So you can pass along that user feedback the way that we were doing prior to this through this means, and the text itself was in a span tag just like our previous text was. So screen readers will still pick up on this, so we still have that accessibility that was necessary prior to this. I will click back on the Spry text field so that I get my properties populate back in the Properties inspector and I could keep previewing these states.
A few of the other properties that I can change on the Properties inspector are right underneath my Preview states. Notice that, by default, Submit is always checked for validation. But I can also check when users might change this text field or when they establish focus on another element such as tabbing away from it and that would be Blur. Well, I am going to click the checkbox for Blur and that's going to give users feedback after they have filled this in and they move on to their text field. If they did it correctly, they will get a clean background. If they did not enter in an email address, it would give them that feedback. So this is interactive user feedback, interactive validation that's going to occur while the form is being filled out. So I am going to go up to File and choose Save.
I could also copy those styles and place them in my own style sheet and not have to rely on having that external document. So now we are ready to test this. So we will save our file and we will test it in our browser and as I scroll down, it looks exactly the same as it did before. But if I click in Email and if I just tab off of it, notice that I am getting some user feedback, saying, nope an email address is required. So I can type back in that and I will just go ahead and type my name in and Tab, and it says no, that's an invalid format. Oh, okay, fine. So maybe if I type in firstname.lastname@example.org. How does that work? I get the green background that tells me that's fine.
So our Spry widget doesn't take a lot of time and effort to put it on a page, but what it does for us is it allows us to have that dynamic user feedback as they fill out your form and it's a nice thing to do for your required elements. So when creating your forms, be sure to plan with web standards in mind. Creating standards-compliant forms not only allows your form content to be accessible to a larger audience, but it makes styling it a little bit easier and it certainly makes it easier to maintain. Be sure to take advantage of Dreamweaver's accessibility and form validation tools; both can speed up development time and ensure properly constructed forms.
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.