Building data-driven web apps with Flask and SQLAlchemy Transcripts
Chapter: Client and server-side validation
Lecture: Concept: Client-side validation with HTML5

Login or purchase this course to watch this video and the rest of the course contents.
0:00 We saw that we can add client side validation
0:02 and make the user experience a lot better.
0:05 The browser will, in real time, without putting extra
0:08 load or effort on our server
0:09 help the user get the data mostly right.
0:12 And in order to do that
0:13 we can just do a couple simple things.
0:16 We can add the required attribute
0:19 and we can also set different types.
0:20 So here we're setting the email type to be actually email
0:24 rather than text.
0:26 And that will tell the browser, when it's required
0:29 that hey, it should validate this stuff.
0:31 Some of the late for the password
0:32 we can say it's required
0:33 we have the numerical one as well and we can set a min value
0:35 and a max value and so on.
0:38 So it's super easy to just leverage html5 form values
0:42 or attributes, things like required in different
0:45 types of input to make most of the validation happen
0:48 before you ever see any form of submit for the form.
0:53 If they go and try to submit this without actually
0:55 putting in an email address
0:57 it'll say, hey it looks like you typed something
1:00 but it's not an email address
1:02 an email address has an @ in it and so on.
1:04 So would you please create a proper email address
1:07 maybe you thought was a username or your real name
1:09 or whatever.
1:10 Just remember this in it of itself is not enough
1:13 people could skip this in so many ways.
1:16 So you got to do the same validation on the server
1:19 it's why the view models are such a thing of beauty
1:22 but this definitely makes the experience
1:23 for the users nicer.