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