WEBVTT 0 00:00.950 --> 00:01.940 There you go. 1 00:01.970 --> 00:03.830 I told you it wasn't that bad, was it? 2 00:04.460 --> 00:09.410 But now I want to get into a bit more complex built-in validation. 3 00:12.070 --> 00:15.310 I want to now look at the pattern attribute. 4 00:15.310 --> 00:19.240 And this pattern attribute is another very useful validation feature. 5 00:19.240 --> 00:20.420 And what does it expect? 6 00:20.440 --> 00:20.980 That's right. 7 00:20.980 --> 00:24.580 It expects a regular expression as its value. 8 00:24.610 --> 00:26.350 What is a regular expression? 9 00:26.500 --> 00:33.850 A regular expression or regex is just a pattern that can be used to match character combinations in 10 00:33.850 --> 00:34.720 text strings. 11 00:34.900 --> 00:36.160 What? 12 00:36.190 --> 00:38.280 What exactly is regex? 13 00:38.290 --> 00:42.430 Well, it is a very complicated topic and it's beyond the scope of this course for me to get into too 14 00:42.430 --> 00:43.060 much detail. 15 00:43.060 --> 00:49.060 But just bear in mind that every browser vendor has their own regex engine - 16 00:49.090 --> 00:55.990 a regular expression piece of software that is able to process regular expressions. And all a regular 17 00:55.990 --> 01:00.670 expression is trying to do, is its trying to match a pattern to a given string. 18 01:00.670 --> 01:04.480 "So Clyde, what is this regular expression engine called?" 19 01:04.480 --> 01:06.460 Well, it does depend on what browser you're using. 20 01:06.460 --> 01:10.360 So when we're looking at Chrome, Chrome uses the V8 engine 21 01:10.360 --> 01:16.250 when it executes JavaScript, and the developers put so much effort into that, they kind of ignored building 22 01:16.250 --> 01:18.530 their own custom code for regular expressions. 23 01:18.530 --> 01:20.330 Well, that was until a few years ago. 24 01:20.330 --> 01:25.700 So now Google Chrome uses their own regex engine called Irregexp. 25 01:25.820 --> 01:32.000 Another thing I want to mention to you is that not all input types with a certain pattern, need to have 26 01:32.000 --> 01:33.950 the pattern attribute specified. 27 01:33.950 --> 01:37.370 For example, we've seen the input where its type is set to email. 28 01:37.370 --> 01:41.450 In that case we don't have to write custom pattern regex. 29 01:41.450 --> 01:44.030 We can if we want to, but we don't have to. 30 01:44.060 --> 01:45.760 Why don't we have to? 31 01:45.770 --> 01:47.810 Well, because the browser does it on our behalf. 32 01:47.810 --> 01:53.450 When we use input of type email, the browser already uses a well-formed email pattern. 33 01:53.660 --> 01:56.230 So anyway, I just wanted to mention that before I move on. 34 01:56.240 --> 01:57.500 Let's get back into it. 35 01:58.040 --> 02:02.870 As I mentioned, regex's are quite complex, so I don't intend to teach you them exhaustively in this course. 36 02:02.870 --> 02:07.760 But I just want to give you a few examples here below to give you a basic idea of how they work. 37 02:07.790 --> 02:08.030 Okay. 38 02:08.030 --> 02:09.590 So what are some patterns we can specify? 39 02:09.590 --> 02:12.440 Well, here I'll just 3 very simple examples. 40 02:12.440 --> 02:18.530 If we just have the character "x", well that's going to match one character that is "x". Not "b". 41 02:18.560 --> 02:21.050 Not "xx". Just "x". 42 02:21.080 --> 02:28.310 If we specify a pattern "xy", that's going to match "x" followed by "y". 43 02:28.580 --> 02:31.970 And then of course, regex has their own syntax. 44 02:31.970 --> 02:38.420 We can use that line ( | ) to specify OR, so we can say x | y, and that's going to match one character that 45 02:38.420 --> 02:40.070 is "x" or "y". 46 02:40.250 --> 02:44.840 And there are many, many more possibilities and examples that I can't cover here. 47 02:44.840 --> 02:48.650 But the above are just a few simple examples to get you started. 48 02:48.650 --> 02:53.510 And while we are on this topic, why don't we hop back to that example we did earlier, and why did we 49 02:53.510 --> 02:56.300 put our own pattern attribute in there 50 02:56.330 --> 03:00.290 just to see how it works with our invalid and valid pseudo classes? 51 03:00.290 --> 03:00.920 Let's have a look. 52 03:00.920 --> 03:07.580 We are back at our original example and here we are asking the user if they would prefer a banana 53 03:07.580 --> 03:08.570 or a cherry. 54 03:08.600 --> 03:15.400 So I don't want the user to be able to write nothing and submit that. Right now, they can submit that. 55 03:15.410 --> 03:16.700 So how can we do that? 56 03:16.700 --> 03:19.850 Well, as soon as you start thinking about a pattern 57 03:19.880 --> 03:21.050 ding ding ding 🔔 ... 58 03:21.050 --> 03:23.420 we can think of regular expressions. 59 03:23.420 --> 03:29.750 So here we want to limit the user writing cherry or banana, right? 60 03:29.750 --> 03:32.570 Those are the only things we want the user to be able to do. 61 03:32.600 --> 03:37.160 So why don't we do that. And let's get rid of the gradient. 62 03:37.160 --> 03:38.390 I just want to remove some noise. 63 03:38.390 --> 03:42.560 Let's just have the invalid and the valid pseudo class here. 64 03:42.560 --> 03:43.550 How can we do it? 65 03:43.580 --> 03:45.040 Well, okay. 66 03:45.080 --> 03:47.270 Firstly, let me just make this a bit bigger. 67 03:47.360 --> 03:53.120 The first thing we can do of course, is add this pattern attribute to our input of type text. 68 03:53.150 --> 03:58.970 That's all it takes. And we know the value of this pattern attribute is a regular expression. 69 03:58.970 --> 04:00.110 So we could do this. 70 04:00.140 --> 04:05.210 We could say, well, the regular expression has to be banana or cherry. 71 04:05.240 --> 04:13.250 We could do this, save it, go to our browser, we can type here "nothing" and we can see that it's still 72 04:13.250 --> 04:15.560 got the invalid styling applied to it, 73 04:15.560 --> 04:16.100 right. 74 04:16.670 --> 04:17.930 Let's remove the outline. 75 04:18.660 --> 04:19.620 Save. 76 04:19.680 --> 04:21.700 Let's start typing "grass". 77 04:21.720 --> 04:23.970 We've still got the invalid class here. 78 04:24.270 --> 04:25.800 Let's type "cherry". 79 04:26.100 --> 04:28.110 We've still got the invalid class. 80 04:28.140 --> 04:29.190 Why is that? 81 04:29.220 --> 04:30.840 Oh, it's because, 82 04:30.840 --> 04:33.240 sorry, I put a space here, didn't I? 83 04:33.900 --> 04:34.920 Let's just remove the space. 84 04:34.920 --> 04:36.060 We don't want a space. 85 04:36.090 --> 04:36.960 Save it. 86 04:37.170 --> 04:38.990 If we type cherry, 87 04:39.000 --> 04:39.800 there we go. 88 04:39.810 --> 04:40.560 It's green. 89 04:40.560 --> 04:43.080 If the user types banana, it's green. 90 04:43.080 --> 04:44.490 And they are allowed to submit. 91 04:44.910 --> 04:50.040 But there's a problem with this in the sense that the user could do a capital B - Banana - and it's not 92 04:50.040 --> 04:50.730 going to work. 93 04:50.730 --> 04:53.370 So with regex, you've got to be very explicit. 94 04:53.580 --> 04:59.490 And what we could define here at the beginning before just defining a small "b", is a character set. And 95 04:59.490 --> 05:02.830 a character set is just defined in regex with the square brackets. 96 05:02.850 --> 05:05.690 It's basically an alternative for that straight line, OR 97 05:05.700 --> 05:06.270 right, 98 05:06.270 --> 05:09.960 so we could say, well, what characters are allowed, either a small "b" or a big "B". 99 05:09.960 --> 05:13.920 And then of course we don't want another "b", and then we can do the same with the "c". 100 05:14.160 --> 05:15.870 So we define a character set, 101 05:15.870 --> 05:18.910 the user can type either a small "c" or a big "C". 102 05:19.090 --> 05:24.390 Now if we save this and the user types Cherry with a capital C, it is going to be valid. 103 05:24.400 --> 05:25.900 How awesome is this? 104 05:25.930 --> 05:26.890 It's easy, right? 105 05:26.890 --> 05:28.720 This is not difficult code at all. 106 05:28.720 --> 05:30.700 We've just included the pattern attribute. 107 05:30.730 --> 05:36.190 We've now implemented our own client side built in validation. 108 05:36.200 --> 05:36.470 Whoo! 109 05:36.520 --> 05:38.080 This stuff is fun, isn't it? 110 05:39.010 --> 05:40.120 So well done. 111 05:40.150 --> 05:42.550 I've had a lot of lot of fun in this lecture, 112 05:42.670 --> 05:45.700 looking at built-in validation. 113 05:45.790 --> 05:50.050 Remember, there are two types of validation, inbuilt and JavaScript. 114 05:50.500 --> 05:54.220 We've looked at the most common inbuilt validation types in this lecture. 115 05:54.400 --> 05:57.760 But now why don't we start jumping into a bit of JavaScript? 116 05:57.760 --> 06:01.000 Why don't we look at how JavaScript validation works. 117 06:01.270 --> 06:02.950 See you in the next lecture.