Building data-driven web apps with Flask and SQLAlchemy Transcripts
Chapter: User input and HTML forms
Lecture: Getting the submitted values
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.