WEBVTT 0 00:00.200 --> 00:02.330 As always, let's start with an empty file. 1 00:02.330 --> 00:05.090 We're going to have a head section in here, a style section. 2 00:05.090 --> 00:09.290 But for now, let's just build our form very quickly, right? 3 00:09.290 --> 00:11.540 So within the body, let's have a form. 4 00:11.540 --> 00:12.980 We don't need an action attribute. 5 00:13.010 --> 00:15.830 We're not worried about submitting it to a server just yet. 6 00:15.860 --> 00:18.020 Let's have a label attribute here. 7 00:19.000 --> 00:21.700 We can just give it a for attribute value of "choose". 8 00:21.910 --> 00:27.400 "Would you prefer a banana or cherry?" 9 00:28.700 --> 00:29.390 I know, I know. 10 00:29.390 --> 00:30.250 It's random. 11 00:30.260 --> 00:31.700 I just want to give you an example. 12 00:31.700 --> 00:35.900 And then, of course, let's have an input where it's type attribute is set to text. 13 00:36.440 --> 00:37.130 Got it. 14 00:37.430 --> 00:43.760 And then we can give it a name attribute of "i_like". And I'm giving it a name attribute of "i_like" because 15 00:43.760 --> 00:46.020 if we don't, it won't be submitted to a server. 16 00:46.040 --> 00:50.300 Remember, in order for data to be submitted to a server, we need name:value pairs. 17 00:50.300 --> 00:56.030 So the name we're giving it here is "i_like". We know the ID value has to match the for attribute's value 18 00:56.030 --> 00:57.260 of "choose". 19 00:57.290 --> 01:03.320 The last thing I want to do is add a button of type submit, and we can just have submit. Save it, refresh 20 01:03.320 --> 01:05.240 the browser and there we go. 21 01:05.270 --> 01:06.880 We've literally got our input. 22 01:06.890 --> 01:14.090 As I mentioned in the lecture, one of the most simplest HTML5 validation features is the required 23 01:14.090 --> 01:20.810 attribute. And to make an input mandatory, we just need to add this attribute to the element, right? 24 01:20.810 --> 01:26.780 Because right now the user can submit this form - "i_like" gets appended to the URL, but there is no value. 25 01:26.810 --> 01:28.380 If we want to make it required, 26 01:28.380 --> 01:34.230 all we have to do is add the required attribute to this input element. 27 01:34.230 --> 01:36.810 It's a boolean attribute so we don't have to assign it a value. 28 01:36.810 --> 01:38.400 It's either there or it's not. 29 01:38.430 --> 01:43.110 Now, if the user tries to submit, the browser will prevent the user from doing so. 30 01:43.110 --> 01:50.280 And what's really cool is that when this attribute is set, the element is going to match the :required 31 01:50.280 --> 01:52.260 UI pseudo class. 32 01:52.380 --> 01:55.470 It's going to match this whether or not there is a value. 33 01:55.470 --> 01:57.510 And remember, the form won't submit, 34 01:57.540 --> 02:03.420 it's going to display an error message when the value is missing, when the value is empty. And while 35 02:03.420 --> 02:11.190 the value is empty, the input is also going to be considered invalid, matching the :invalid UI pseudo 36 02:11.190 --> 02:11.730 class. 37 02:11.730 --> 02:14.430 So right now when the user tries to submit, 38 02:14.460 --> 02:20.790 notice how the input box gets focus, and we get this error message displayed to us by the browser. 39 02:20.820 --> 02:23.670 Let me prove that some of these pseudo classes are working. 40 02:23.880 --> 02:32.150 Firstly, what we can do is we can target the input element where its state is invalid. 41 02:32.150 --> 02:33.860 And let's just be very simple here. 42 02:33.860 --> 02:38.120 2 pixels, pixels solid red border. And this is the default starting point. 43 02:38.120 --> 02:43.400 The default when we've got a required attribute on an element is that it's going to match the invalid 44 02:43.400 --> 02:46.550 state because it's value attribute is empty, right? 45 02:46.550 --> 02:53.270 But once the user starts typing, say they want a banana, it's not red anymore, aka it's not invalid 46 02:53.270 --> 02:55.010 and the user can submit the form. 47 02:55.010 --> 02:58.520 But of course once it's submitted it goes back to that invalid state. 48 02:58.550 --> 03:00.020 What are some other things I can show you? 49 03:00.020 --> 03:05.060 Well, why don't we target the input, right, where its state is invalid? 50 03:05.060 --> 03:10.850 But remember I said it's also going to match the required state. 51 03:10.850 --> 03:16.850 So why don't we target this and we can give this a cool background image styling. We can give it a 52 03:16.850 --> 03:23.690 linear-gradient and let's just say pink, and light green, save that. 53 03:23.690 --> 03:24.470 So there we go. 54 03:24.470 --> 03:32.040 We know now that it's matching the required state and it's matching the invalid state at the same time. 55 03:32.040 --> 03:36.540 Can you see how the pink is flowing from top to bottom? If you don't want that, 56 03:36.540 --> 03:42.720 for example, with this linear-gradient method, we can just say here "to right". 57 03:42.720 --> 03:44.760 And of course it's going to go left to right 58 03:44.760 --> 03:49.530 now - the pink starts at the left, gradually turning into green from left to right. 59 03:49.560 --> 03:51.000 That's just a bit of FYI. 60 03:51.750 --> 03:57.180 And then finally, we can also target the input, but this time when it's state is valid and let's just 61 03:57.180 --> 04:00.270 give it a border of 2 pixels solid green, right? 62 04:00.270 --> 04:03.000 We save this. When the user starts typing banana, 63 04:03.820 --> 04:06.880 can we see, or can you see that there is a green border? 64 04:07.240 --> 04:11.200 Of course, it's hard to see because we've also got an outline - that black outline. 65 04:11.200 --> 04:13.060 So why don't we remove the outline. 66 04:14.420 --> 04:15.200 Set it to none. 67 04:15.350 --> 04:16.940 User starts typing banana. 68 04:16.940 --> 04:17.690 And there we go. 69 04:17.720 --> 04:20.120 We know now it is valid. 70 04:20.240 --> 04:22.580 You got to got to be enjoying this stuff. 71 04:22.610 --> 04:25.070 It is so interesting and it's so fun. 72 04:25.070 --> 04:29.570 Once it clicks, like it's just becomes very intuitive, very easy to start styling your forms in a 73 04:29.570 --> 04:30.530 very, very fun way. 74 04:30.530 --> 04:36.170 But anyway, these are the simple built-in validation pseudo classes, but they are more. 75 04:36.170 --> 04:40.160 And in particular, there's one I want to discuss with you now. 76 04:40.160 --> 04:41.630 So let's jump back to the lecture.