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