WEBVTT 0 00:00.230 --> 00:05.090 I'm excited about this lecture because in this lecture we're going to be moving away from HTML5 1 00:05.090 --> 00:12.500 builtin validation to JavaScript validation, and by JavaScript validation I just mean using JavaScript 2 00:12.530 --> 00:14.480 to validate your form. 3 00:14.480 --> 00:20.780 And let me be clear you must use JavaScript if you want to take control over the look and feel of native 4 00:20.780 --> 00:27.620 error messages or to deal with legacy browsers that do not support HTML's built-in form validation. 5 00:27.620 --> 00:32.930 And if you don't know what JavaScript is, or how it works or where it comes from, then please check 6 00:32.930 --> 00:35.570 out my JavaScript Complete Grandmaster Course. 7 00:35.570 --> 00:38.180 But don't worry, it is going to be quite simple in this lecture. 8 00:38.180 --> 00:42.470 So even if you don't know how JavaScript works, you should be able to follow along. 9 00:42.470 --> 00:42.910 Okay. 10 00:42.910 --> 00:43.300 Okay. 11 00:43.310 --> 00:44.810 So how does this work? 12 00:44.810 --> 00:50.570 Well, with forms, it's common to use JavaScript with the Constraint Validation API. 13 00:50.960 --> 00:51.830 What? 14 00:52.130 --> 00:55.670 Don't worry, this is provided to you by the browser. 15 00:55.670 --> 01:00.930 Most browsers today support the Constraint Validation API. 16 01:01.110 --> 01:07.830 You can view it as a set of methods and properties that are given to us automatically by the browser, 17 01:07.830 --> 01:13.590 and there are many different web APIs available to us by the browser, like the Fetch API when we're 18 01:13.590 --> 01:14.840 dealing with AJAX. 19 01:14.850 --> 01:18.570 What about Web Sockets API, what about the DOM, etc etc. 20 01:18.570 --> 01:23.310 So this Constraint Validation API is just one of many. 21 01:23.340 --> 01:23.880 All right. 22 01:23.880 --> 01:26.850 Well, how can we use this Constraint Validation API? 23 01:26.880 --> 01:32.370 Well, we limited in its use on a few form element DOM interfaces. 24 01:32.370 --> 01:38.220 So what I mean by this is that we can only use the Constraint API on the following interfaces, and each 25 01:38.250 --> 01:40.830 interface represents a different element. 26 01:40.830 --> 01:46.800 For example, the HTMLButtonElement interface of course represents the button element and so on and 27 01:46.800 --> 01:47.280 so forth. 28 01:47.280 --> 01:48.500 It's pretty intuitive. 29 01:48.510 --> 01:52.830 So what's really cool, my dear students, is that when we're dealing with these elements, with the 30 01:52.830 --> 01:58.620 input element, for example, we have access to the Constraint Validation API automatically. 31 01:58.620 --> 02:01.140 We don't have to do anything to access it. 32 02:01.320 --> 02:01.710 "Okay 33 02:01.710 --> 02:07.140 Clyde okay, so we've got access to the Constraint Validation API, but what does that mean in a practical 34 02:07.140 --> 02:07.470 sense? 35 02:07.470 --> 02:08.640 What does it give us?" 36 02:08.670 --> 02:13.410 Well, it gives us certain properties and methods automatically. 37 02:13.410 --> 02:18.120 For example, we can access the validationMessage property. 38 02:18.120 --> 02:18.600 What is that? 39 02:18.600 --> 02:22.560 Well, it's a read-only property that returns a validity message. 40 02:22.560 --> 02:27.870 In other words, it's going to return the error message describing the validation constraints that the 41 02:27.870 --> 02:30.030 control doesn't satisfy. 42 02:30.030 --> 02:35.730 If the element's value does satisfy all of its constraints, aka it's valid, then this is just going 43 02:35.730 --> 02:37.760 to return an empty string. 44 02:37.770 --> 02:40.830 We've also got this validity object. 45 02:40.830 --> 02:47.970 This is a really useful one, and this returns a validity state object that contains several properties 46 02:47.970 --> 02:51.750 describing the validity state of the actual element. 47 02:51.780 --> 02:53.580 What kind of properties can we access? 48 02:53.610 --> 02:58.920 Well, we can access the patternMismatch property that returns true if the value does not match the 49 02:58.920 --> 03:00.960 specified pattern attribute. 50 03:00.960 --> 03:03.420 And it's going to match false if it does match. 51 03:03.420 --> 03:08.490 And remember, right, if the value doesn't match the pattern attribute, we also going to match the 52 03:08.490 --> 03:10.140 invalid CSS pseudo class. 53 03:10.140 --> 03:12.690 So a lot of these are going to be working in tandem. 54 03:12.810 --> 03:19.590 So let me say that again - this pattern mismatch will return true if the value does not match the specified 55 03:19.590 --> 03:20.490 pattern attribute. 56 03:20.520 --> 03:25.410 We're going to get this patternMismatch error and the form will be prevented from being submitted to 57 03:25.410 --> 03:25.830 a server. 58 03:25.830 --> 03:30.840 But at the same time, because the pattern is not being matched, we know that the invalid CSS pseudo 59 03:30.840 --> 03:33.120 class is also at play. 60 03:33.150 --> 03:34.200 It's quite interesting. 61 03:34.290 --> 03:39.480 Another property of this validity object is this tooLong property that returns true if the value is 62 03:39.480 --> 03:44.310 longer than the maximum length specified by the maxlength attribute? 63 03:44.310 --> 03:51.210 Again, if it's true, the element's also going to match the invalid CSS pseudo class. Very similarly 64 03:51.210 --> 03:52.680 to tooShort, 65 03:52.710 --> 03:57.930 that's going to return true if the value is shorter than the minimum length specified by the minlength 66 03:57.930 --> 04:02.010 attribute. And rangeOverflow, rangeUnderflow, 67 04:02.040 --> 04:03.210 they are very similar. 68 04:03.240 --> 04:10.410 They're going to return true if the value is greater than the maximum value specified by the max attribute. 69 04:10.410 --> 04:14.370 Or of course if we're dealing with range underflow, it's going to return true if the value is less 70 04:14.370 --> 04:17.700 than the minimum specified by the min attribute. 71 04:17.700 --> 04:22.380 But what's interesting now with rangeOverflow and rangeUnderflow error messages is that we're going 72 04:22.380 --> 04:24.510 to have a few pseudo classes that are matched. 73 04:24.540 --> 04:25.800 Can you guess which ones? 74 04:25.830 --> 04:31.710 Well, yes, the invalid pseudo class is going to apply, but now we've also got the out-of-range pseudo 75 04:31.710 --> 04:33.540 classes that are going to apply. 76 04:33.570 --> 04:34.410 Quite interesting. 77 04:34.410 --> 04:34.920 Right? 78 04:34.920 --> 04:40.440 Another property on this validity object is this typeMismatch property or error message. 79 04:40.440 --> 04:44.280 This is going to return true if the value is not in the required syntax. 80 04:44.280 --> 04:49.590 For example, if we have an input where its type attribute is set to email or URL, and the user doesn't 81 04:49.620 --> 04:51.480 type in the correct format. 82 04:51.480 --> 04:58.200 If this is valid, if it returns true, we know that the invalid CSS pseudo class is also going to apply. 83 04:58.200 --> 04:59.880 And then we've got this 84 04:59.990 --> 05:06.650 "valid" property that returns true if the element meets all of its validation constraints and is therefore 85 05:06.650 --> 05:08.200 considered to be valid. 86 05:08.210 --> 05:15.380 So when this valid is true, we know that the valid CSS pseudo class is also going to apply. 87 05:15.560 --> 05:20.360 And last but not least, what happens when we have this required attribute on an element? 88 05:20.390 --> 05:26.180 Well, in that case we've got this valueMissing property and that is going to return true if the element 89 05:26.180 --> 05:29.930 has a required attribute, but no value has been specified. 90 05:29.980 --> 05:30.530 Whew. 91 05:30.560 --> 05:31.490 I know, I know. 92 05:31.490 --> 05:33.170 This is a ton, right? 93 05:33.170 --> 05:34.790 It's very, very useful. 94 05:34.820 --> 05:39.350 But you know me - actions speak louder than words, so why don't I quickly go to the console, 95 05:39.350 --> 05:40.950 let's look at a quick example. 96 05:40.970 --> 05:45.890 Let me access this validityState object and show you its properties. 97 05:45.920 --> 05:48.290 Hopefully then it will become more intuitive to you. 98 05:48.290 --> 05:49.250 Let's have a look. 99 05:49.520 --> 05:52.100 So here we are, a very, very simple example. 100 05:52.100 --> 05:57.650 I've just wrapped an input where its type is set to text in a form. And of course we've got a button 101 05:57.680 --> 06:00.360 of type submit, which is the default by the way. 102 06:00.360 --> 06:01.650 So we don't even need that. 103 06:01.920 --> 06:05.280 And of course right now the user can type anything and submit anything. 104 06:05.280 --> 06:07.020 There's no validation constraints. 105 06:07.020 --> 06:11.340 But I want to show you how this Constraint Validation API works. 106 06:11.370 --> 06:16.980 Remember that it only applies to certain interfaces and one of those interfaces it applies to was the 107 06:17.250 --> 06:23.040 HTMLInputElement interface, which gives us access to this API on the input element directly. 108 06:23.040 --> 06:24.020 So how does it work? 109 06:24.030 --> 06:27.300 Well, remember the two types of client side validation? 110 06:27.300 --> 06:32.970 We had the built-in validation, which is just HTML5, but we've also got the second type and that 111 06:32.970 --> 06:34.080 is using JavaScript. 112 06:34.080 --> 06:38.580 And in order to use JavaScript we need to write everything within these script tags. 113 06:38.610 --> 06:40.350 From here, what do we do? 114 06:40.350 --> 06:46.170 Well, we need to grab that input element, don't we, in order to access the Constraint Validation 115 06:46.170 --> 06:46.650 API. 116 06:46.680 --> 06:48.270 So how do we grab that input? 117 06:48.300 --> 06:54.960 Well, let's define it in a variable called text, and let's start by accessing our document object. 118 06:55.590 --> 06:56.130 On here, 119 06:56.130 --> 06:58.260 we can getElementsByTagName(), 120 06:59.550 --> 07:02.390 the tag name we want to get is input. 121 07:02.400 --> 07:02.760 Right. 122 07:02.790 --> 07:05.250 And this returns a collection if you've done my DOM course. 123 07:05.250 --> 07:10.140 So we access the first item in the collection, which is that input element itself. 124 07:10.140 --> 07:14.910 And what's really cool, what's really cool is we've pretty much done it. 125 07:14.910 --> 07:15.360 You know what, 126 07:15.390 --> 07:18.600 instead of calling it text, let me call it textInput, because that's what it is. 127 07:18.630 --> 07:23.790 And what we can do now is we can access this Constraint Validation API directly. 128 07:23.790 --> 07:25.500 We don't have to do anything else. 129 07:25.500 --> 07:26.670 It's really, really cool. 130 07:26.670 --> 07:28.440 So we can grab our textInput. 131 07:28.440 --> 07:30.360 And what are some of the properties I spoke about? 132 07:30.360 --> 07:38.730 Well, the one that is very important to us is the validity object, very, very important to us. 133 07:38.730 --> 07:43.740 And in order to see it, why don't we just console log this to the screen. 134 07:43.740 --> 07:44.970 That's all we have to do. 135 07:45.660 --> 07:48.450 Go to the browser, inspect this document. 136 07:51.480 --> 07:52.630 Let's go to the console. 137 07:52.650 --> 07:55.500 And here is this validityState object. 138 07:55.530 --> 07:58.490 How awesome is this, my dear students. 139 07:58.500 --> 08:00.240 (sound effect: Yeah) Very, very cool 140 08:00.270 --> 08:00.630 right? 141 08:00.630 --> 08:06.150 And these are some of the error messages or properties that are shown within this validityState object, 142 08:06.150 --> 08:06.480 right. 143 08:06.480 --> 08:09.990 I spoke about some of these ... tooLong, tooShort, typeMismatch. 144 08:10.020 --> 08:15.120 It's valid property is set to true now because it doesn't have the required attributes on it. 145 08:15.150 --> 08:16.980 Why don't we put the required attribute on it? 146 08:16.980 --> 08:18.720 Let's get into our input, 147 08:19.560 --> 08:21.330 and post the required attribute on here. 148 08:21.600 --> 08:27.570 Now we've got this validityState object again, but now it's valid property is set to false. 149 08:27.570 --> 08:28.800 It's not true anymore. 150 08:28.800 --> 08:34.500 And of course we've also got this valueMissing property and remember that returns true if the element 151 08:34.500 --> 08:37.980 has a required attribute, but no value. 152 08:38.190 --> 08:39.840 That's so much fun, isn't it? 153 08:40.110 --> 08:41.710 This is all I want to show you for now. 154 08:41.730 --> 08:46.380 I just wanted to show you how to actually physically see this validityState object. 155 08:46.860 --> 08:51.030 Right now, we still been discussing only the properties of the Constraint Validation API. 156 08:51.060 --> 08:55.650 There's just another one I want to mention to you, and then I want to move on to some important methods. 157 08:55.650 --> 08:57.330 So let's jump back into the lecture.