Python for Entrepreneurs Transcripts
Chapter: Build web apps with Pyramid: Applied web development
Lecture: Client-side validation demo
0:03 We've seen that we can use view models
0:08 to add very nice and elegant server-side validation.
0:11 Now, if I come over here, I can click this and you'll see it in action.
0:15 Notice, in the background it's saying "hey you called the server for a POST",
0:18 but it didn't let us register, "you must specify a password".
0:22 OK, I'll put something nice, now it says they don't match,
0:25 now I'll try it again, and so on.
0:28 So it says "you must specify an email address" but notice if I put just "kj"
0:32 it thinks that's great, because we didn't actually validate
0:35 that it was a proper email address, we probably should do that.
0:39 however, let's go back over here and see if we can take
0:42 a little bit of the load off the server and make it a little nicer experience for our users,
0:47 let's add client side validation using HTML 5, this is super easy, folks.
0:51 So all of these fields, are going to be required, and in HTML 5 in modern browsers,
0:57 we can say that they are required by adding the "required" attribute.
1:01 Literally, this is all we have to do. Like this.
1:04 Now, if I come over here and I reload, reload the HTML and I hit go,
1:09 notice all the required ones turn red and fill out
1:12 and if I bring up the server here again, as I click this,
1:16 notice, there is no going to the server, this is purely client-side,
1:20 so I can put a, b and notice as I interact with it, the red goes away.
1:24 How nice, huh?
1:27 The other thing we want to do is we want to validate
1:29 that this is not just required up here, but is an email,
1:33 so in HTML 5 we have a few new types, one of them being email.
1:38 So if I refresh this again, I can come over here and I can put "the", "the", if I say go,
1:45 well it looks like 1password thinks I am creating account,
1:48 that's not what I am up to, go away.
1:50 Here I've disabled 1Password.
1:52 So if we have some kind of password here
1:55 and say go and it says "you have to fill out this field",
1:57 also this one, notice it got good if I just put something like the I register,
2:01 It says "no no, you must enter an email address, not just some text",
2:04 how cool is that? And I'll say email@example.com
2:08 notice, apparently that is still valid, because maybe it's an internal domain,
2:13 but at least it does a little bit of validation,
2:15 here we go, put something like that, now if it works,
2:18 this is going to go all the way the server
2:20 and the server actually did further validation set
2:22 what you typed here did not match what you typed there, OK,
2:26 this should let us through, cool,
2:28 now notice this actually looks different in different browsers
2:30 so here this is Firefox and you saw how this was represented,
2:35 now notice if I do the same thing over here in Chrome,
2:38 refresh this, and I try to register, it says "please fill out this field"
2:42 and I put "the", it says "please include an @ in the email address, "the" is missing the @"
2:48 and so each one has a slightly different way of working with those
2:51 so we'll say firstname.lastname@example.org, abc,
2:55 so now of course if I type in the passwords correctly, it will let us in.
3:00 So you can see with a little bit of "required" and a little bit of type="email",
3:04 everything is good, you might wonder
3:06 "hey should I just skip this whole server-side validation thing
3:13 No, it's super easy to take these things and just HTTP post them to the server,
3:18 as some sort of app or something like requests,
3:21 and entirely skip the whole client side validation
3:23 so you are going to need the server-side validation too,
3:26 but you will probably give your users a slightly nicer experience
3:29 with the little sprinkling of HTML 5 validation.