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