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