Python for Entrepreneurs Transcripts
Chapter: Build web apps with Pyramid: Applied web development
Lecture: Client-side validation demo
Login or
purchase this course
to watch this video and the rest of the course contents.
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 the@the.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 the@the.com, 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:07
"hey should I just skip this whole server-side validation thing and put it all in here in a JavaScript or HTML 5?"
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.