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