WEBVTT 0 00:37.230 --> 00:40.830 But when it comes to validation, it is not complete. 1 00:40.830 --> 00:45.720 And by complete, I mean it's not good for a security and logic. 2 00:45.750 --> 00:51.420 We already know that server side code is required to make sure your site is secure. 3 00:51.450 --> 00:58.170 You don't want hackers coming in and writing malicious code into your input fields and submitting that 4 00:58.170 --> 00:59.400 onto a server. 5 00:59.560 --> 01:01.080 Okay, so that's security. 6 01:01.320 --> 01:07.200 But the logic itself is also not complete when we use the email type. 7 01:07.200 --> 01:10.210 And what do I mean when I say the logic is not complete? 8 01:10.230 --> 01:17.250 Well, x@y will be a valid email address according to the default provided constraints. 9 01:17.250 --> 01:22.290 And this is because the email input type allows intranet email addresses by default. 10 01:22.290 --> 01:28.950 And please note my dear students, it's actually not possible to verify if the address provided is in 11 01:28.950 --> 01:30.000 existence. 12 01:30.300 --> 01:32.220 You cannot do this on frontend. 13 01:32.250 --> 01:36.640 This is actually an issue that you have to handle by your server side scripts. 14 01:36.670 --> 01:42.070 A good way to test for a valid email address is to send a link to that email and that when the user 15 01:42.070 --> 01:44.470 clicks it, confirms that the email is valid. 16 01:44.500 --> 01:49.150 We've all seen this in action with many sites that you and I sign up to. So just bear that in mind, 17 01:49.150 --> 01:54.160 that using this type of email won't ensure that it is actually a valid email address. 18 01:54.190 --> 01:57.070 This is not to say we can't do anything on the front side. 19 01:57.070 --> 02:03.220 We've already seen the use of the pattern attribute in other areas of code in this course, and this allows 20 02:03.220 --> 02:07.720 us to of course implement different validation behavior on our emails. 21 02:07.720 --> 02:12.640 And of course we can also use the title attribute to display custom error messages. 22 02:12.670 --> 02:14.410 Let me show you this in action. 23 02:14.950 --> 02:21.370 As I mentioned, what we can do, is we can improve ourselves validation rules. 24 02:21.370 --> 02:26.680 One way we can improve frontend validation is to use the pattern attribute. 25 02:26.680 --> 02:31.210 And we did get into the pattern attributes when we were talking about passwords. 26 02:31.210 --> 02:35.590 So I don't want to get into it here again, but I'll just show you a very, very quick example. 27 02:35.590 --> 02:42.210 So, say we have a site and you require, for whatever reasons, the user to have a Gmail account. 28 02:42.220 --> 02:49.270 So instead of saying enter your email, let's say "Enter your valid gmail account email". 29 02:49.450 --> 02:52.120 So it has to be Gmail. 30 02:52.570 --> 02:54.000 How can we implement this? 31 02:54.010 --> 03:01.870 Well, we know that Gmail is just text, and we know that the pattern attribute is a regular expression 32 03:01.960 --> 03:06.640 allowing us to define rules and check patterns within text. 33 03:06.640 --> 03:11.260 So this will be a very easy rule to define with the pattern attribute. 34 03:11.260 --> 03:12.670 So let's include the pattern 35 03:12.670 --> 03:18.880 attribute. And regular expressions aren't only applicable with JavaScript, but when it comes to HTML, the 36 03:18.880 --> 03:22.660 regular expression it expects is in JavaScript syntax. 37 03:22.660 --> 03:24.580 So what we do is we wrap it in a string. 38 03:24.820 --> 03:27.280 We can have any characters, right? 39 03:27.280 --> 03:36.960 But at some point we are going to have to have the @ symbol, and the "gmail.com". And that is it. 40 03:36.960 --> 03:38.130 That's our pattern. 41 03:38.160 --> 03:44.340 We can also put on the required attribute, making this a required field before a user can submit the 42 03:44.340 --> 03:45.060 form. 43 03:45.060 --> 03:51.210 And of course we can provide a custom error message to the user by using the title attribute. 44 03:51.210 --> 03:55.860 So here we can say "Please provide a valid Gmail 45 03:56.670 --> 03:57.810 email address". 46 03:58.490 --> 04:00.170 Let's go back now to the browser. 47 04:00.470 --> 04:01.760 Let's expand the browser. 48 04:02.320 --> 04:03.940 And let's go abc 49 04:03.970 --> 04:04.900 @abc. 50 04:04.930 --> 04:08.650 We click submit, and now we are prevented. 51 04:08.650 --> 04:09.820 How cool. 52 04:10.360 --> 04:13.510 Please match the requested format and there is our title, 53 04:13.540 --> 04:13.810 right? 54 04:13.810 --> 04:14.680 Our title attribute: 55 04:14.680 --> 04:17.980 "Please provide a valid gmail email address". 56 04:18.130 --> 04:23.530 So of course if the user goes back and writes @gmail.com and clicks submit, 57 04:24.130 --> 04:25.870 this will work. 58 04:26.260 --> 04:26.980 So there we go. 59 04:26.980 --> 04:33.220 That's just a very, very rudimentary, very high level example of us using the patent attribute to 60 04:33.220 --> 04:36.520 enhance and improve our client side validation. 61 04:36.910 --> 04:38.320 Ooh, this is fun, isn't it? 62 04:38.350 --> 04:45.010 So just remember, that patent attribute is used to specify a regular expression that the input elements 63 04:45.040 --> 04:51.310 value is checked against. And this patent attribute does work well with an input of type email. 64 04:51.310 --> 04:53.170 We've actually used it in previous lectures. 65 04:53.170 --> 04:55.450 I think it was with the password type, remember that? 66 04:55.450 --> 04:59.290 So here, we've seen another example of using the pattern, but this time on email. 67 04:59.290 --> 05:04.360 And just to refresh your memory, a regular expression is nothing more than a sequence of characters 68 05:04.360 --> 05:08.020 that forms a search pattern, right? 69 05:08.020 --> 05:09.610 So don't get overwhelmed. 70 05:09.760 --> 05:15.220 But moving on, let me just summarize what we've learned with this type of email. 71 05:16.570 --> 05:20.650 Firstly, the email type makes web development easier. 72 05:20.680 --> 05:21.820 Why does it make it easier? 73 05:21.850 --> 05:25.320 Well, because validation work is done automatically by the browser. 74 05:25.330 --> 05:30.910 If the required attribute has been specified as well, the browser will not even accept the form to 75 05:30.910 --> 05:34.030 be submitted until the user types in an email. 76 05:34.360 --> 05:39.250 It just means we have to write less JavaScript business logic ourselves. 77 05:39.430 --> 05:43.780 And secondly, you can choose to style the email input type. 78 05:43.810 --> 05:50.800 Of course you want to do this because you want all your styles to appear standard across the board and 79 05:50.800 --> 05:55.480 it's very easy to apply CSS styling to an email. 80 05:55.600 --> 06:01.510 All you got to do is target your input with type email and of course apply your own CSS styles. 81 06:01.540 --> 06:02.570 Very intuitive. 82 06:02.590 --> 06:10.570 And finally, another benefit of using type email is that touch devices will show the appropriate keyboard. 83 06:10.570 --> 06:16.090 For example, when the type is set to email, you're going to be seeing the @ symbol and the period 84 06:16.190 --> 06:20.710 symbols easily, and it just helps you fill in the fields. 85 06:20.720 --> 06:21.650 So there you go 86 06:21.680 --> 06:26.030 my dear students, we've looked at the input of type email. We've looked at the benefits it brings. 87 06:26.030 --> 06:27.580 We've looked at examples. 88 06:27.590 --> 06:30.200 I hope it's starting to become more intuitive. 89 06:30.320 --> 06:32.090 See you in the next lecture.