WEBVTT 0 00:00.440 --> 00:02.910 As always, I'm going to Visual Studio Code. 1 00:02.930 --> 00:03.650 I just love it ♥♥. 2 00:03.650 --> 00:04.730 It's easy to use. 3 00:04.760 --> 00:08.420 So here we are, a blank index.html file. 4 00:08.510 --> 00:12.110 All I want to do is create a very, very simple form. 5 00:12.260 --> 00:12.770 Okay. 6 00:12.800 --> 00:13.940 Nothing crazy. 7 00:13.970 --> 00:15.650 We don't need an action. 8 00:15.680 --> 00:17.510 We're not submitting this to the server. 9 00:17.600 --> 00:21.640 All I want to show you is the novalidate attribute in action. 10 00:21.650 --> 00:28.310 So let's just say, for example, we're wanting a user to insert an even number. 11 00:28.460 --> 00:29.630 How would we do that? 12 00:29.930 --> 00:35.630 Well, firstly, let's use the input control, but its type now is not "text". 13 00:35.660 --> 00:37.930 Normally we set type to "text" or type to "email". 14 00:37.940 --> 00:42.730 Here we want the user to write in a number, specifically an even number. 15 00:42.740 --> 00:44.030 Let's just call it number. 16 00:44.060 --> 00:47.980 We don't need an ID because we're not wanting to style it or link it to a label. 17 00:47.990 --> 00:53.300 There's an attribute called "step", on the input widget that the browser will display when you click the 18 00:53.330 --> 00:59.720 up or down arrow, because it's a number input type, it's going to incrementally or decrement-ally... 19 00:59.780 --> 01:02.550 if that's a word, go in steps of 2. 20 01:02.610 --> 01:03.870 So that's all that that's saying. 21 01:05.370 --> 01:11.640 Um, and then of course we want a button of type "submit" because I want you to see this validation logic 22 01:11.640 --> 01:12.360 in action. 23 01:12.600 --> 01:13.620 Right, so here's submit. 24 01:13.650 --> 01:15.300 Let's open up the Live Server. 25 01:15.330 --> 01:16.320 Let's go to the browser. 26 01:18.660 --> 01:19.220 Here we go. 27 01:19.230 --> 01:20.490 Insert an even number. 28 01:20.530 --> 01:22.430 Okay, so here are the up arrows ⬆ and down arrows ⬇. 29 01:22.440 --> 01:25.080 Remember I just said, and it's going up in even numbers. 30 01:25.080 --> 01:32.430 But if the user submits 1, which we know is not an even number and we click submit, we get validation 31 01:32.430 --> 01:32.820 logic... 32 01:32.820 --> 01:36.410 applying! The browser won't let us submit - "please enter a valid value. 33 01:36.420 --> 01:40.470 The two nearest values, valid values, are 0 and 2." 34 01:40.980 --> 01:41.910 How cool is that? 35 01:41.910 --> 01:47.250 If we type a 9, try and submit the browser again will tell us that the nearest valid values are 36 01:47.250 --> 01:48.300 8 and 10. 37 01:48.300 --> 01:54.030 And this is what I meant by the fact that browsers automatically validate inputs. 38 01:54.060 --> 01:56.340 We didn't have to turn anything on, did we? 39 01:56.430 --> 02:00.120 No. But sometimes, like I mentioned, you want to turn it off. To turn it off, 40 02:00.120 --> 02:00.810 it's super easy. 41 02:00.810 --> 02:08.340 If we go back to our form here, and on the form itself, we can just include this boolean attribute. And... 42 02:08.340 --> 02:09.930 this is why we don't need to give it a value. 43 02:09.960 --> 02:10.980 We can just have it there. 44 02:10.980 --> 02:12.570 It's either there or it's not. 45 02:12.660 --> 02:13.860 Go back to the browser. 46 02:14.400 --> 02:17.040 Now let's try and insert the number 9. 47 02:17.040 --> 02:21.030 Submit (yahoo) and it has allowed us to do so. 48 02:21.030 --> 02:25.920 You can see there in the GET request, in the URL, we've got the "number", our variable name, and that's 49 02:25.920 --> 02:27.510 assigned the value of 9. 50 02:27.510 --> 02:28.950 So there we go. 51 02:28.980 --> 02:30.990 Is that starting to make sense? 52 02:31.020 --> 02:32.000 I hope so. 53 02:32.010 --> 02:38.310 But now I know I just mentioned a few minutes ago that, you know, this attribute can be placed on 54 02:38.310 --> 02:41.610 the form, or a per-widget basis. 55 02:41.610 --> 02:43.800 And although it's true, it's kind of a half truth. 56 02:43.800 --> 02:44.970 And I'll show you why. 57 02:45.000 --> 02:50.640 Because if we go back to our code, we cannot take this novalidate attribute, and place it on this input 58 02:50.640 --> 02:50.970 element... 59 02:50.970 --> 02:55.410 for example. If we save this, go to our browser, insert 1, try and submit, we're going to be 60 02:55.410 --> 02:56.640 stopped from doing so. 61 02:56.670 --> 03:02.550 In other words, that novalidate is not working when we place it on the form control itself. 62 03:02.550 --> 03:04.440 Whaaat? Weird, 63 03:04.440 --> 03:04.650 right. 64 03:04.650 --> 03:08.250 Well then why did I say you can put it on a per-control basis? 65 03:08.250 --> 03:12.180 Well, you can in a very limited number of cases. 66 03:12.180 --> 03:15.510 So firstly it's not called novalidate. 67 03:15.540 --> 03:16.980 Well, what is it called? 68 03:17.030 --> 03:17.970 Let's get rid of it here. 69 03:17.970 --> 03:19.690 And let me just write a comment here. 70 03:20.170 --> 03:29.410 You can insert a attribute called, I think it's called, formnovalidate... 71 03:29.960 --> 03:38.300 but only on 3 widgets, and they are buttons, input with type of submit... 72 03:38.300 --> 03:40.460 and I think it's input with image. 73 03:41.060 --> 03:41.650 Whew, I know. 74 03:41.660 --> 03:42.500 So there's that comment. 75 03:42.500 --> 03:45.320 You can insert an attribute called "formnovalidate". 76 03:45.320 --> 03:48.560 So not just "novalidate", but only on three widgets. 77 03:48.590 --> 03:48.880 Okay. 78 03:48.890 --> 03:51.710 So it's kind of limited, but it is possible. 79 03:51.710 --> 03:56.870 So for now, when we want to use novalidate, we throw it on the form itself. 80 03:56.870 --> 03:59.360 That's how it's supposed to look. 81 03:59.510 --> 04:00.650 Okay, enough said. 82 04:00.650 --> 04:02.690 I think this attribute is pretty straightforward. 83 04:02.690 --> 04:03.680 Let's move on.