Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Our login form is now built. However, we don't have any validation for this form. If I put this in the browser. There is nothing stopping the user from just putting in things such as this and logging in. We don't have this page actually going out to an action page right now. Our action area is blank but if we did we'd be sending bad data and inserting all kinds of new users or trying to authenticate users on the server side. When we want to prevent that.
We want to make sure that a user enters an email address as best we can in this area, and, the correct password. So, how do we go about adding form validation to this form? Well, there is client side form validation we can do in two different ways using Dreamweaver. There is also server-side validation, however that server-side validation requires quite a bit of hand coding in PHP. So we're going to use the client-side version, and Dreamweaver has two ways to add client-side validation, but I want to show you one in particular.
And I'm going to open up my insert bar once again by going to Window, Insert. And that is this bar up across the top of this area. Now, if you are not in Classic View, you will not have the Insert bar in this upper section. So when you install Dreamweaver. The view is set up for Designer View and what I did was switched it to Classic View which moves my Insert bar up here. I think it's easier for you to see what I'm doing and it's also easier for you to see what's in the PHP portion of this Insert bar. So I'm going to use that.
I do have an extra paragraph set up between the legend and the form. I also have one underneath the header one. So if I go into Split View, that's what's causing the space, here. And we have a space here in our form. This paragraph, I do not need. So I'm going to get rid of. This one. And you'll see it moves our form up. The other one I want to get rid of is this area here, and I'll just hit the backspace or the big Delete key.
Now, I'll let you fine tune this form as you like. The important piece is, I get my cursor inside our form itself. So I need to be inside the form tag and Dreamweaver shows you it's a form tag by adding the red dotted line. That does not show up once we get into the browser. Now I can do everything I need to in Design View here. So I'm going to go up to the Spry tab. Within the Spry tab there is this Spry validation text field and that's what we're going to be adding. I will click on that icon and this is very similar, the exact same interface you would get for a standard HTML form.
So the ID is going to be email. Label will be email. The label is the text that's going to show. And we get a Spry text field. Now, as soon as I have added this, I have Spry text field in my properties' area. If I select the box only, within this area, not the tab, but the box. I get my character widths, and since our database allows 50 characters here for username, that's this field we're doing.
I'll set it to 50 and 50 just like I would a standard HTML form. The distinction is I'm going to select this by Text Field tab and I can click on it here or once I'm inside this field I can click on it right here. This is known as the Tag Selector. Sometimes it's easier to select it here. And I'm going to say. This needs to be an email address under Type.
And you can see what that does is adds some information here. Now, I generally like to go into Code View to do this piece. You'll be able to see, it does say a value is required. It also says invalid format, which is the text we're looking at, so I'm going to say, let me, plug into here please, enter a valid email address. So well set up instead of the word Format, we'll put email address.
The reason I like to do it in this area, is because it's very easy to accidentally delete this entire message if you are doing it InDesign view. You can always select the text in this area on your page and it will pull you right to that section here. So there's our email address. I will select that text field again. And the preview states is what you want to walk through. So, in this drop down, this is what it's going to look like when the page first loads to the user.
This is what it's going to look like if they don't enter anything into the field. If they don't enter an email address this is what it's going to look like, which is what we're looking at right now and if it's valid it will turn to look like this. So let me go through these. When it initially loads for the user it will be white like this. When they don't enter the correct data this is what it's going to look like. And this particular message here is not the nicest. So I'm going to say, an email address is required.
When I click off of this, you'll see that here. I'll select my text field again. So, this is what it looks like when they first come into the page. This is what it looks like if they don't enter data. This is what it looks like if it's not an email. And if they entered an email correctly, it's going to turn green like this and this is how all of the Spry fields work. So you plug in what you want. You can put minimum and maximum here. I have done it in the HTMP piece and then each item you add down in this area. We'll add another message, and you'll want to go through and make sure you double check all of those messages.
I can put a break in fornt of this so it goes underneath instead. So we have a few options in terms of working with this and if I put my proper email address in here and click Submit it turns green and submits the data. So go ahead and add the password field for this Spry on your own. If you have difficulty doing that. Come back through and watch the beginning of this movie to show you how to work with that.
And that is the log-in form that we're going to work within our Scuba2You website for form validation
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101504 Viewers
61 Video lessons · 88266 Viewers
71 Video lessons · 72134 Viewers
56 Video lessons · 103896 Viewers
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.