Full Web Apps with FastAPI Transcripts
Chapter: Users and HTML forms
Lecture: Client-side validation
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Let's talk a little tiny bit more about validation. We saw that we're getting lots of validation in this section here on the server side,
0:08
but a better experience for the user would just to be have the form as they type, give them a little feedback. Like
0:15
hey, you know what? Your password has to be five characters before you hit submit, your email field has to be an email,
0:20
not just some random text, those kinds of things. So in order to let you see the server side validation, I turned off the client side validation.
0:28
You might have noticed it was here actually before, but what we're gonna do is we're gonna do a couple of things just in HTML to
0:34
make this a little bit better. So let's just check, for example, if we go register. I try to register, it's posting back, and if I go Michael and
0:43
it's really quick, so it's not a horrible experience, but if I go and type this, oh it's required. How about that?
0:49
No. Still no. And it would be nice if it would give us information like if I just type this, it would say: oh, you know,
0:54
that's not a real email, you gotta do better than that. So let's make just a couple of little changes.
0:59
I already pointed out that you can't rely on this to validate all your data.
1:04
Somebody could entirely skip this and just use Requests or something like that to jam
1:08
data straight at your server. So you gotta have service side validation, always. But you can make the experience nicer.
1:13
Like I can come over here and say, in this section here, that this is required, right? So all these fields that are required, we just say they're
1:20
required and all we've gotta do is put an empty attribute They don't have a "values" or anything like that.
1:26
And then, we try again. We refresh, without a POST. We just try to submit it, notice all the things are in red,
1:33
it says this one is required, put stuff in there and you see the red goes away as I work with it. Really nice experience, right? OK, so that's great.
1:41
Let's put in the letter "a", gotta put a number into this one now, password's required. Now we went back to the server,
1:48
but we can do more. Let's have another look, what else could we do? Well, did it let me type in junk for the email?
1:53
It did. That's because we said is this is the "text" type, but it also, there's many other types, like email, months, numbers and so on.
2:01
So if we say that this is an email, and this age. You know, the age is already number so that's good. So it'll make sure it is a number.
2:08
We'll be in better shape here. Actually, that's not. Submit it again. So if I say my name is Michael and I just put Michael here and the
2:16
password is "a", notice, it's trying to, trying to suggest something. What is the problem here? Yeah, I don't know if I can get it to show you
2:26
but it says this must be an email. So if I put some, oh there we go! Perfect, finally got it to come out. So if we go and put that in there,
2:32
it'll now the red goes away. This must be a number, so I'll say that. And this one, it tried to submit it back. We can do more. Still with this one,
2:41
we could say at the client side, this must be five characters. Over in the password we can say minlength has to be five. That's good. And then also,
2:50
while we're at it, let's say that you have to be 18, at least to register. So what
2:54
we can go over here and say that the minimum for this is 18 and let's go and set a max so it's a reasonable age, 120 or something like that. All right,
3:04
let's go look at this again. All right, gotta fill out our name. Sure, we can do that. With the letter "m", "a". Nope, it's gotta be an email address,
3:14
email address. Okay, it is. The password, my favorite, the letter "a". You're currently using one character. OK,
3:22
That's right. It's five a's and then down here, it says your age has to be a number. but watch if I hit up arrow. Remember? It did 1, now does 18.
3:30
If I hold it down, he goes up to 120 and if I say 121, no, no, it's too big. Let's go 40 or something reasonable. Now we can register.
3:41
We got a chance. That's the first pass of all this validation right on the client side, users get a little better feedback as they're working on it.
3:48
And then off it goes. We've registered, redirected over to the account, tada! we've got our form working really, really well.