Building Data-Driven Web Apps with Flask 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 Well the view model sure cleaned this up, didn't it? And what I really like is it can continue to grow and it really doesn't get a lot worse here.
0:08 A lot of that growth happens down in the view model. But it would be nice if this was a better experience. Let's go over and try to register again.
0:15 Now, notice over the top you'll see a little refresh. If I try to submit this, we do get this great little error message
0:21 like hey you got to specify a name. And if I fill out the name it'll say you got to specify an email address.
0:26 But notice, every time this is going back to the server. It's super super fast. Like a couple of milliseconds right now.
0:32 But if we have a long ping time or a slow connection that could be annoying, right? And also wouldn't it be nice if we use a regular expression
0:39 to say validate the email. We'll see that we can actually use Client Side Validation like we don't even need to have the server stuff open.
0:46 Let's go over here to this register form and see what we can do. And let's, while we're at it let's add one more thing like their age.
0:52 so that is text for a minute. We'll just say your age in years. If we're going to add a field here in order for this to round trip
1:00 we do have to add that to our view model. Age like this. And, just put Age. Like that. This is just going to be a string. On the serverside.
1:12 We convert to an integer and so on. But let's just go ahead and have a look and see how this is working. We go open, load the page again.
1:21 My Age In Years, we're not validating that on the serverside, but, it's okay. We're just going to see the validation here.
1:26 So, it would be great if we could do this on the client side. And with HTML5, it's super super easy.
1:33 So we go over here, and you want to make this field something they have to fill out. All you got to do is say it's required.
1:38 They don't even have to actually enter, like a value like required equals true. Just the presence of this attribute is sufficient.
1:45 So let's just say everything is required. That's a good start. Now if we come over here and pull this up again and I hit start. I hit go.
1:52 Notice they all turn red, and it says you have to fill out this field. Ah, I didn't realize that. Got to fill out your email address.
1:58 Okay, there's some junk, and so on. But still a little bit better. So we can come down here, to this one and say
2:05 instead of just being text, there's actually a lot of options in here, like datetime or checkbox or Numbers, or Passwords or whatever.
2:12 We're going to just do email, and if we do this again. And here I put some stuff there. And if we just say my email is Michael
2:21 it say's no-no, you have to enter an email address. How cool is that? So we come down here and, make it a little further.
2:29 Now these are, of course required. The Password one is good. This Age In Years could definitely be better.
2:34 Let's suppose you have to be 18 to register on our site. We come down here and say, the min is equal to 18 And the max, I dunno, 120 or something.
2:43 Just so it's not crazy, right? Let's try this again. So, Michael, email address, a real one. Password, abc, and now if I just say Go.
2:52 It says please fill out this field. Try again. Ah... We haven't let's do one more thing. So we're sending the values, but this is still text.
3:03 Let's set this to a number. There we go. And go to typing out stuff, one more time. Your email address is going to be this. Password is abc.
3:14 And now notice it has this. So we really want it here so we don't want to set a value at all, for now. There was something weird with
3:24 actually this numerical control with the form control class? It wouldn't let me interact with it. And the placeholder wasn't working.
3:33 So I just took that off. There's probably some CSS issue. Don't really know what that is, come back to that.
3:38 But now if we come down here and try to register. It doesn't actually do the validation there. Let me go... I took the required off.
3:46 I'm going to put the required back. So now it says you have to enter a number. And if you try to enter this, it says no-no, a number.
3:56 Try and put in number five, it says the value selected is less than 18. And in fact, if I go in here and just hit the up arrow.
4:02 It automatically selects 18 as the minimum value. And it can't go below it. So that's great. You know maybe it's an age, and it only make sense
4:09 for adults to be 18 to... I don't know, you can put something crazy like 200. Whatever you're going to put here now we have proper validation.
4:17 So we can see we can add HTML5 validation to our forms. This does not remove the need to have serverside validation for a couple of reasons.
4:26 One, people can always skip the validation and just do direct post. Try to mess with your site. The other one is, some of the validation
4:34 can't reasonably be done on the client side. Like "auser@thatemail" already exists. Sure you entered valid data, but that doesn't matter.
4:42 It's not going to work. The user already exists right? That could use AJAX and whatnot, but it's better to sometimes let that happen on the serverside.
4:50 Do the quick and easy stuff. And then do this kind of validation. It's kind of a blend.

Talk Python's Mastodon Michael Kennedy's Mastodon