Building Data-Driven Web Apps with Pyramid and SQLAlchemy Transcripts
Chapter: Client and server-side validation
Lecture: Client-side validation with HTML5
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
View models are awesome for validating server-side code but me might as well do as much validation as we can
0:08
in the browser before it ever touches our server before it ever even leaves the browser in the form of a request.
0:14
This won't allow us to entirely skip server-side validation cuz people could always turn that kind of stuff off use scripts and so on and get around it
0:23
but at least it will give our users a slightly better experience. So let's go back to our PyPI validation version of our demo code
0:32
and let's add some client-side validation. First of all, let's just run it and see where we are so let's go try to register.
0:39
Now, if I put "abc" here, and I hit Go notice you'll see a little flicker and then a message comes down here
0:45
and this is actually ridiculously fast, like it's if we look at what's happening this is in less than a millisecond, pretty incredible.
0:55
That's cuz there's zero milliseconds being timed between me and the server, right? If we're halfway round the world that could be much, much longer.
1:03
Either way, this is going back and hitting my web server. It'd be nice if it'd just, as users type, it would say
1:11
"This is valid, this is invalid," and so on. So, let's go and change that so as much as possible this will validate on the client side
1:19
turns out it's super easy. Over here, in Register, we have this form, right? Let's go way to the end here, and on this form
1:26
we can come over here and say Your Name you know what that is, Required we don't even have to set a value just put the attribute of Required on them.
1:36
The other thing we did is we set the type to be various things. Here we set the Type of e-mail to be text but we can upgrade it to be of type email
1:46
or number, or things like that. Now, if we just save, we can come over here and refresh. Let's refresh like this, and if we hit Go
1:55
notice no POST back, and here it says "Please fill out this field." Okay, so Michael, great, and I hit this. Okay, whatever, I don't care.
2:05
It says, "No, no, no, e-mail address." C'mon Michael that's michael@talkpython.fm yeah, sure give it a password
2:13
and then I'm going to go over here and go It does appear that we're missing a little validation there, doesn't it cuz it let that submit
2:21
but let's also fix that really quick. Where do we do validation? We saw we do that in our view model so we can go to our user_service
2:32
and say, find_user_by_email. It doesn't exist, but it will in a second. Write that really quick. You know what, it's so much like that
2:48
but here we just say, email and that's going to be email. We can say that's a string, and what we get back
2:56
an optional of user. Now, let's try one more time. Log out and try to register one more time with that. Boom, this user already exists, so notice
3:08
if this is missing altogether, it never even goes back there's no flicker up here, it never goes there. Let's actually load it up fresh.
3:18
Okay, so when I click it, it never goes back but if I fill this out and then I hit it you'll see it flicker and it falls back
3:25
to the server-side validation cuz the client-side we're not really checking. We're not going to access the database through java script.
3:30
We're just going to let the server do that so there you can see that's going back to the server once it passes client-side validation
3:36
so it's not all or nothing on client server it's this blend much of the time.