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