#100DaysOfWeb in Python Transcripts
Chapter: Days 5-8: HTML and HTML5
Lecture: Client-side validation
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Well our form, it's looking good. It has this nice little options down here that we can pick. We can come down here and it has our email
0:09
but if you type a real email of course the placeholders drop away. Super nice but notice it will let us submit right away.
0:18
Oh and by the way this isn't too secure, right? So we want to do a couple of things. One, oh actually let's add one more column here
0:29
one more thing that we're asking for. Let's ask for age and that's just be age in years, something like that. Here we go.
0:38
So there's a couple things we want to do. Like it would be nice to only allow email addresses here, to make sure that they type
0:44
in a full name, to make sure they select an option, to make sure that the age is actually a number like 27 and so on.
0:52
So we can use client-side validation that's part of HTML5 really easy. We want to make sure they've selected an option you can say that is required.
1:01
You don't have to set a value, nothing like that just required. We can do that for all these if that's the way we want it.
1:07
We don't have to make them all required but it seems reasonable here. So now we should go and try to submit it
1:13
it says, "Whoa, whoa, whoa, you're going to have to have some stuff in here." And soon as I type it gives immediate feedback.
1:18
Take it away again, warning. Type it in, good. Of course if we reload it those warnings are gone. It doesn't start that way but soon as you try
1:26
to submit it, it starts telling you about what's missing. So let's put this in here. Let's go and select, actually, let's leave that one off.
1:33
Let's say if it was 10. Notice it won't let us go. It won't let us submit that when data is required.
1:42
One quick comment on all of this client-side validation. It's a convenience. It's here to help the experience be quicker and smoother for the user.
1:51
So as I type stuff it immediately, you know removes that little light of red around it. Let's do another, no, this part's good now.
1:59
That does not mean you can skip the validation on the server. We could entirely disable this validation.
2:06
We could change the HTML or we could just submit form posts directly to the server, entirely skipping this HTML.
2:12
So this is not enough but it is a really nice thing for our users. So this is nice but what if I put this? Well, it still thinks the email's okay.
2:23
So let's go and change that as well. We just said we want a bunch of text boxes but with HTML five we can do better.
2:31
We can say, "This is an email, a date, a file "a range, a check box," you pick it. So that's an email. This is a password.
2:38
That's been around for a while. This is a number. And with a number we can set cool things like the minimum must be 18.
2:46
So you have to be 18 in order to do this. And this one we could say min length is going to be six.
2:52
So you have to have at least six characters and so on. Well, let's try that again. Okay, so we come down here. Okay, this name is required. Cool.
3:02
We'll just put Michael for a moment. When we say register and it says, "No, no, no." It's not just required, it requires an email address.
3:12
Oh, well, that's good. Okay, ABC, how about the letter a? Just love the letter a. But even right away it tells us like "That's not going to work.
3:21
Please fill out with at least six characters and you're using 1, 2." Yep, now using 2. Register no, it takes the letter a six times
3:33
right, or more. So that's pretty cool. Down here I could put 16. It's like, "No, no, this is a number." Okay, 5. Nope, it has to be no less than 18.
3:46
All right, how about 45? Now it's happy, right? If you all the scroller down it stops at 18. And if it were empty and I come in here and hit
3:54
the up arrow to run the scroller it starts at 18. So that's pretty cool. And finally over here we can select an item
4:00
from the list which we'll gladly do. Finally our form is all valid. We fill it out correctly and none of that
4:07
happened doing a bunch of round trips to the server. It's all client-side. It's not even JavaScript. It's just HTML in HTML five.
4:15
All right, let's hit it. We better save that password. Here we have it. So we fill it out, Michael Kennedy michael@talkpython.fm.
4:23
I told you, the letter a six times, so secure. He's 18 and we heard of this on search. Pretty cool, right? And so all we had to do was go down here
4:32
and fill out the types and we could pick the extra types. We saw there are many options here. Text obviously is the default but there's a bunch.
4:40
Add some nice placeholders, some required values some minimum length for characters, minimum values for numbers, and even that there
4:49
was a required selection from our list. Well, that feels like we covered a lot. And this, these little, tiny attention to detail
4:58
this little, tiny attention to detail is really nice. I think it makes the experience from a user perspective feel much more professional
5:04
and polished than, you know, just something went wrong with your form post. Go scroll down and find it, right
5:11
which is a very common behavior on the Internet. And now that you see how easy this is it's even more frustrating, right?
5:18
Be like, "Oh, come on, just put a required in there. "Just do it, please." Anyway, here's the HTML forms. I think just a little attention to detail
5:26
and you'll make them super, super-nice. When we get to the server-side frameworks you'll actually see how to submit those
5:31
and process them and store 'em at a database and whatnot but, you know, here's half the story. The HTML half.