WEBVTT 0 00:00.440 --> 00:07.520 Welcome to this very cool challenge where I want you to try and use this Constraint Validation API all 1 00:07.520 --> 00:08.030 by yourself. 2 00:08.030 --> 00:11.810 And I'll be honest with you, I don't expect you to get this correct, but just give it a go. 3 00:11.810 --> 00:14.060 Try and get as far as you can go. 4 00:14.090 --> 00:15.350 What do I want you to do? 5 00:15.380 --> 00:16.670 What is the challenge? 6 00:16.670 --> 00:19.250 Well, let me just zoom in slightly. 7 00:19.460 --> 00:25.370 I just want to create a text input field where the user has to enter the username, but the username 8 00:25.370 --> 00:32.810 has to have at least one lowercase, and one uppercase letter. If the user just tries to submit it as is 9 00:32.840 --> 00:34.460 without typing anything. 10 00:34.700 --> 00:36.350 I want a custom error message. 11 00:36.350 --> 00:37.190 "Silly billy, 12 00:37.190 --> 00:38.900 you have not typed anything." 13 00:38.900 --> 00:43.790 If the user now starts typing just lowercase letters and tries to submit. 14 00:44.940 --> 00:47.250 We get another custom error message. 15 00:47.410 --> 00:48.000 How awesome. 16 00:48.000 --> 00:55.200 But of course, when the user now has a capital letter in there and click submit, the browser allows 17 00:55.200 --> 00:56.220 it to go through. 18 00:56.340 --> 00:57.680 Very simple example. 19 00:57.690 --> 00:58.280 You know what? 20 00:58.290 --> 01:03.210 Let me just give you one hint, and that one hint is going to be the regular expression that I used, 21 01:03.330 --> 01:05.790 aka the value of the pattern attribute. 22 01:06.090 --> 01:07.340 Let me show you what it looks like. 23 01:07.350 --> 01:08.130 So there you go. 24 01:08.130 --> 01:12.240 I want you to use that value in the pattern attribute. 25 01:12.270 --> 01:13.650 Let me just quickly explain it to you. 26 01:13.650 --> 01:18.000 Firstly, we got the brackets, the two brackets, which are two sets of groups. 27 01:18.780 --> 01:19.070 Okay. 28 01:19.080 --> 01:22.290 We start off each group with a question mark and equal sign. 29 01:22.320 --> 01:25.830 This is just known in RegEx as a positive lookahead. 30 01:25.830 --> 01:30.630 All I'm trying to achieve here is I'm trying to say we can either type lowercase and then uppercase 31 01:30.630 --> 01:34.800 or we can type uppercase and then lowercase - the order doesn't necessarily matter. 32 01:35.400 --> 01:39.780 The next thing you'll notice there is we've got this full stop. 33 01:39.780 --> 01:45.550 The full stop matches any single character. And we've got an asterix - the asterix matches the preceding 34 01:45.550 --> 01:47.530 character zero or more times. 35 01:47.530 --> 01:52.030 And then we've got the square brackets, which we've already seen in this course many times with the 36 01:52.030 --> 01:53.320 characters A-Z. 37 01:53.350 --> 02:00.190 Basically it's just allowing a range of lowercase characters between A and Z. 38 02:00.730 --> 02:07.780 So all I'm trying to say in that first group is that the user can type as many characters as they want 39 02:07.810 --> 02:09.010 between A and Z. 40 02:09.040 --> 02:13.120 And then I finish off this entire pattern by a quantifier. 41 02:14.410 --> 02:22.180 I have those curly braces, which is basically telling the regex to match the preceding groups at least 42 02:22.180 --> 02:24.970 one times and at most 50 times. 43 02:25.900 --> 02:26.710 That's all that that means. 44 02:26.710 --> 02:27.940 So that is my regex. 45 02:27.970 --> 02:29.350 That's the pattern I used. 46 02:29.560 --> 02:36.070 Feel free to just copy that, paste it, and then try and figure out how I did this solution. 47 02:36.130 --> 02:39.040 I'll give you a hint ... on that input type 48 02:39.400 --> 02:42.910 I'm going to be listening for the invalid event. 49 02:43.060 --> 02:49.060 Remember I mentioned that that type of mismatch property will fire an invalid event when whatever is 50 02:49.060 --> 02:52.030 entered does not match the pattern field. 51 02:52.690 --> 02:55.180 So that's why I'm listening for an invalid event. 52 02:55.210 --> 03:00.280 When that invalid event fires, of course I want to check whether the value is nothing because when 53 03:00.280 --> 03:01.870 it's nothing I just want that error message 54 03:01.870 --> 03:02.110 "Silly 55 03:02.110 --> 03:06.880 billy, you have not typed anything". Remember. If I try and submit now I want that error message. 56 03:06.880 --> 03:10.750 So we've got to check whether the actual value is an empty string. 57 03:10.780 --> 03:14.320 If it is an empty string, but we're still getting that invalid error, 58 03:14.320 --> 03:19.720 we know then that they haven't provided at least one uppercase and one lowercase letter. 59 03:20.170 --> 03:20.800 For example 60 03:20.800 --> 03:25.870 we know that this is going to happen, and we need to tell them that they need one uppercase and one lowercase! 61 03:26.050 --> 03:26.650 Whew. 62 03:26.680 --> 03:28.210 I know, there's a lot to take in. 63 03:28.210 --> 03:31.450 Give it a go, see how far you can go and I'll see you in the solution video.