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