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
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.