WEBVTT 0 00:01.010 --> 00:01.850 Welcome back. 1 00:01.850 --> 00:02.690 Welcome back. 2 00:02.720 --> 00:04.220 I'm super, super excited. 3 00:04.220 --> 00:09.480 As you will recall in the previous lecture, we discussed that there were two types of client side validation. 4 00:09.500 --> 00:10.760 Do you remember what they were? 5 00:11.180 --> 00:16.130 The first was built-in form validation and the second type was JavaScript validation. 6 00:16.130 --> 00:21.290 We're going to be looking at JavaScript shortly, but before we do, I just want to discuss built-in 7 00:21.290 --> 00:24.110 form validation in a little bit more detail. 8 00:24.110 --> 00:25.640 So let's get into it. 9 00:25.670 --> 00:33.620 One of the most important or the most significant features of HTML5 form controls is the ability to 10 00:33.620 --> 00:38.540 validate most user data without relying on JavaScript. 11 00:38.870 --> 00:40.420 And how is this done? 12 00:40.430 --> 00:45.710 Well, it's done by using validation attributes on various form elements. 13 00:45.860 --> 00:52.070 We've seen a lot of examples of this in the course, but to recap, here are some of them. 14 00:52.160 --> 00:58.700 The required attribute specifies whether a form field needs to be filled in before the form can be submitted 15 00:58.700 --> 00:59.390 to a server. 16 00:59.390 --> 01:02.450 We've also got minlength and maxlength. 17 01:02.450 --> 01:03.410 Quite intuitively, 18 01:03.410 --> 01:09.110 they specify the minimum and maximum length of textual data strings. 19 01:09.730 --> 01:11.020 We've got min and max. 20 01:11.020 --> 01:11.920 What's that about? 21 01:12.790 --> 01:13.420 Very intuitively, 22 01:13.420 --> 01:19.540 it specifies the minimum and maximum values of numerical input types, like the type of number, for 23 01:19.540 --> 01:20.110 example. 24 01:20.110 --> 01:21.910 And then we've got this type attribute. 25 01:21.910 --> 01:23.740 This type attribute was amazing, wasn't it? 26 01:23.740 --> 01:30.610 Because that specifies whether the data needs to be a number, email address, or some other specific preset 27 01:30.640 --> 01:36.280 type. And we can get more complex with built-in client side validation. 28 01:36.280 --> 01:38.200 We can use the pattern attribute. 29 01:38.230 --> 01:43.720 We're going to see an example shortly, but this specifies a regular expression that defines a pattern 30 01:43.720 --> 01:48.670 the entered data needs to follow. Whew, I know. And these are only a few of them that we've looked at. 31 01:48.700 --> 01:49.810 We have looked at more. 32 01:49.810 --> 01:56.530 And these attributes are important because if the data entered in a form field, follows all of the rules 33 01:56.530 --> 02:02.890 specified by these attributes, it's going to be considered valid and the browser will allow the user 34 02:02.890 --> 02:04.860 to submit the form to the server. 35 02:04.870 --> 02:05.920 Is it making sense? 36 02:08.140 --> 02:14.010 So, when an element is valid, the following things are going to happen. 37 02:14.020 --> 02:21.850 Firstly, the element is going to match the :valid CSS pseudo class, which lets you apply a specific 38 02:21.850 --> 02:23.770 style to valid elements. 39 02:23.770 --> 02:26.950 We've seen many examples of us using this in the course. 40 02:26.950 --> 02:33.880 And the second thing that's going to happen when an element is valid, is that the browser will submit 41 02:33.880 --> 02:38.890 the form when the user tries to send the data, of course, provided there's nothing else stopping the 42 02:38.890 --> 02:42.280 form from doing so, like when you use JavaScript for example. 43 02:42.670 --> 02:45.700 So that's when an element is valid. Well, 44 02:45.710 --> 02:48.200 Clyde, what happens when an element is invalid? 45 02:48.220 --> 02:50.890 I know this might sound obvious, but I like to recap. 46 02:50.890 --> 02:56.500 It's going to solidify everything we've learnt. Similarly to the valid state, 47 02:56.530 --> 02:59.830 when an element is invalid, two things are going to happen. 48 02:59.830 --> 03:06.130 Firstly, the element is going to match the :invalid CSS pseudo class and sometimes it's going to match 49 03:06.160 --> 03:10.070 other UI pseudo classes as well, for example out-of-range. 50 03:10.070 --> 03:12.470 And this all depends on the type of error. 51 03:12.500 --> 03:18.380 The beauty of having this :invalid pseudo class of course, is that you can apply a specific style to 52 03:18.380 --> 03:20.420 elements that are invalid. 53 03:20.450 --> 03:25.640 The second thing that's going to happen is that if the user tries to send the data, the browser is 54 03:25.640 --> 03:32.390 going to block the form from submitting and the browser will display a native error message. 55 03:32.420 --> 03:33.830 Very, very useful. 56 03:33.860 --> 03:38.990 Before I move on, I just want you to know that there are several errors that will prevent the form 57 03:38.990 --> 03:43.940 from being submitted. And we're going to be looking at some of these shortly, especially when we look 58 03:43.940 --> 03:45.560 at using JavaScript. 59 03:45.560 --> 03:51.470 But anyway, we've got different types of errors like badInput, tooShort, typeMismatch, valueMissing, 60 03:51.800 --> 03:54.080 stepMismatch, rangeUnderflow, 61 03:54.080 --> 03:54.470 etc 62 03:54.470 --> 03:54.850 etc. 63 03:54.860 --> 03:59.000 There are a whole lot of different errors associated with different types of inputs, and when those 64 03:59.000 --> 04:01.550 errors occur, the browser will not submit the form. 65 04:01.550 --> 04:01.850 All right. 66 04:01.850 --> 04:06.080 So that's what happens when an element matches the invalid state. 67 04:06.320 --> 04:11.390 But one of the most common and we've seen this tons in the course is what? 68 04:12.350 --> 04:12.920 That's right, 69 04:12.920 --> 04:14.900 it's this required attribute. 70 04:14.900 --> 04:20.720 And when we have this required attribute on a form element, it's going to match the :required pseudo 71 04:20.720 --> 04:21.350 class. 72 04:21.380 --> 04:22.400 What does this mean? 73 04:22.430 --> 04:29.690 Well, it means if that form control has a value that's empty, an error message is going to be displayed 74 04:29.690 --> 04:32.000 when the user tries to submit the form. 75 04:32.270 --> 04:36.970 And of course, we know that the :invalid pseudo class is also going to match. 76 04:36.980 --> 04:38.270 But ... enough 77 04:38.270 --> 04:38.900 speaking. 78 04:38.900 --> 04:40.970 I want to jump over to the text editor. 79 04:40.970 --> 04:44.270 Let's code up an input of type text. 80 04:44.300 --> 04:49.550 Let's target the :required pseudo class, the :invalid pseudo class and the :valid pseudo class. 81 04:49.820 --> 04:53.990 You'll see how easy it is and then we can continue on with this lecture. 82 04:53.990 --> 04:55.220 So let's quickly do that now.