Building Data-Driven Web Apps with Flask and SQLAlchemy Transcripts
Chapter: User input and HTML forms
Lecture: Getting the submitted values
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Now, things are going really well with our login form here, but there's a couple of things we notice. First, if I click it right away
0:07
it just seems to submit. It doesn't tell me anything went wrong and actually nothing has gone wrong but we need to validate that.
0:14
And, if I have some values in here like if I had my name there and I typed in some other stuff but then I hit submit and maybe I need to come back
0:21
and fix this, all the values are gone. That's super annoying, so need to work on round-tripping the values and also just using them
0:29
in terms of some form of validation. So, those are both super easy here. So, what we can do is we can say, when these values
0:35
are submitted, we don't need to print them anymore. We'll do a little test. So, we'll say, if not name or not email or not password
0:45
any of those things, we're going to return some kind of error. So, the way we're going to do that is
0:50
use a little response conversion from a dictionary over to the values and what do we do? Well, we're going to go in here and have an error and say
0:59
some required fields are missing. Yes, we could do better client-side validation and we will in a little bit, but we still
1:08
no mater what, need to do server-side validation. Now, how do we show this? Let's go over here and at the bottom it'll have a little div.
1:16
And, we'll say if error. We'll have a div here like this. That just shows the error. And, we'll have a class error message.
1:34
So, let's go and first set that in our CSS in our site. Our color is red, but not quite that red. Let's darken it a little like so.
1:47
And, let's see how this works. Well, if we come over here and we say, Michael. I click this, some fields are missing
1:56
and if I do hard refresh, we now get our CSS refreshed and now that's the right color. But, watch this.
2:03
Click over here, it's not quite there, so that's okay. We have our little test and it looks like it's okay. So, when everything's all right, not fine
2:12
but if we try to submit something some errors are missing here. And, maybe let's go to our account and just do a not.
2:23
Center just for this particular form. There we go, so our error feedback is good. Maybe even should be above the button but I think this is okay.
2:32
The other thing is if I type in some of the values and hit enter, oh, that's not so fun. So, we can fix that real quick as well.
2:40
What we can do over here is way at the end we can say, value equals double curly. We scroll over, you can see this is going
2:47
to be whatever we pass for the name. And, you guessed it, same for email and password. So, let's go over here and register.
3:02
Everything looks fine when we request it but we need to still pass those values back. So, they're submitted here and we have them
3:12
but what we need to do is also submit the name as name and email as email is on. All right, let's try again.
3:22
Still some errors if I say Michael and submit. Ooh, some are missing. We're getting close. So, this and then if I put the letter a
3:30
it should pass the validation, which, eventually will do something interesting. For now, we're just going to refresh the form.
3:37
Boom, all right, that's working really well. So, we're coming here, we're doing some validation.
3:41
We could do better validation like your name is required your password, and so on. But, again, we'll do some client-side as well.
3:47
Finally, the question is if we pass the validation we have all the info, what are we going to do? Well, we need to do a few things
3:54
to create the user in the database and to login browser as session. So, some kind of cookie that says, anywhere you go
4:06
on the site, this is the current logged in user. And, what do we do when they're logged in? Well, we don't leave them on this form.
4:11
That's kind of silly. We're going to go over here and say flask.redirect over to /, let's say, just send them to their account.
4:19
They're logging in, maybe they care about their account details. All right, let's try one more time. Michael, no, some fields are missing
4:27
but my value's still here. Now, it should pass, we're not going to actually create the account but it should pass all the validation
4:34
if I put a password in here. Ready, set, go. Boom, just like that, we're redirected over to our account page.
4:42
So, that's how we're able to use our values over here that we got from the form post. So, we got name, password, and email. We make sure they're valid.
4:51
If they're not, we send back an error message and we also roundtrip the values. Eventually, we're going to create the user.
4:57
That's a little bit separate, we'll get to that in a moment. And, we're going to set a cookie so they're logged in and redirect them.
5:02
But, other than these little to-dos we have our whole user form story completely written.