Building data-driven web apps with Flask and SQLAlchemy Transcripts
Chapter: Client and server-side validation
Lecture: Client-side validation with HTML5

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