WEBVTT 00:00.940 --> 00:07.810 So this time around, we want to change our front end, which is found in bronze dash plan page go HTML, 00:07.810 --> 00:13.340 inside the templates folder, inside the web folder where you want to use our validation. 00:13.450 --> 00:17.880 So here in the fetch and in my code, it's line one sixty four. 00:17.890 --> 00:22.490 This is where we call APIs create customer and subscribe to plan. 00:23.020 --> 00:26.040 Well obviously the first thing we want to do is to check, to see if there's an error. 00:26.050 --> 00:33.310 So we'll say if data error is exactly equal to false, then we'll do what we've been doing right along. 00:34.120 --> 00:39.990 So we'll wrap that here, tab all that in and we can get rid of this council log data. 00:40.000 --> 00:43.540 We don't need that anymore or else something went wrong. 00:43.930 --> 00:47.920 And I'm going to assume for the sake of argument right now, that validation failed. 00:48.050 --> 00:54.820 OK, so what I'll do here is, first of all, I want to obviously make some changes. 00:54.820 --> 00:56.120 So is my application running? 00:56.920 --> 00:57.630 Yes, it is. 00:58.000 --> 01:04.670 So if I go over here right now and I fill out this form, it's going to change all of these to green. 01:04.690 --> 01:05.850 Everything looks great. 01:05.890 --> 01:10.720 Then it calls fetch because it has a client side validation first, then it calls fetch. 01:11.050 --> 01:14.190 And of course, I don't want the problematic things to stay green. 01:14.230 --> 01:22.090 So the very first thing I'm going to do here in my clothes is say remove the bootstrap class was validated 01:22.090 --> 01:23.150 from the entire form. 01:23.350 --> 01:24.420 I can do that really easily. 01:24.430 --> 01:29.560 Document element, but ID and my form is called charge 01:31.960 --> 01:38.530 underscore form and I'll get its class list and I'll remove was validated. 01:41.420 --> 01:45.970 OK, so that will get the form back to no green, no red. 01:46.000 --> 01:47.480 It's just a basic form. 01:48.700 --> 01:53.650 Now I want to get all of the information that's inside data errors. 01:53.650 --> 01:54.790 And you remember that's a map. 01:54.940 --> 02:00.640 So in JSON that's just going to be a list surrounded by curly brackets so I can use object dot entries 02:01.360 --> 02:07.540 to get the values that are in data errors and turn them into something I can use for each one. 02:08.860 --> 02:13.540 And the foreach I'll say and I'll wrap the first parameter in passing in parentheses. 02:14.650 --> 02:21.070 I want to execute this on every single entry in the errors part of my data object. 02:21.490 --> 02:30.400 So I'll declare a constant key and value and that will be populated from I, which I passed to the inside 02:30.400 --> 02:31.390 of this foreach loop. 02:31.520 --> 02:40.780 OK, now for right now, let's just say console that log and log using JavaScript templates key. 02:43.880 --> 02:51.310 And that's equal to the value on that close it with a back tick and put a semicolon there. 02:51.620 --> 02:52.640 So let's save this. 02:53.300 --> 02:59.180 Let's stop our application, make stop, make a start, OK? 02:59.930 --> 03:00.980 And see what we get back. 03:01.340 --> 03:02.570 Make sure this actually works. 03:03.600 --> 03:06.260 So everything is running now, so go back to my Web browser. 03:06.300 --> 03:13.320 I'll open my JavaScript terminal and I'll reload this page and I will clear the JavaScript console and 03:13.320 --> 03:15.260 I'll put it revalidate in there X. 03:15.600 --> 03:16.890 That's only one character along. 03:16.950 --> 03:18.030 The rest of it doesn't matter. 03:18.060 --> 03:22.110 This has to be an email, otherwise it won't pass client client side validation. 03:22.110 --> 03:31.150 But exit X.com a work name X an our test credit card number zero for say thirty three three three three. 03:32.160 --> 03:35.460 So if we get everything right I should get something written to the JavaScript console. 03:37.260 --> 03:42.550 And there it is, first underscore name must be at least two characters, and of course, this keeps 03:42.550 --> 03:44.520 spinning because we haven't told it to do anything else. 03:44.760 --> 03:45.410 Well, that's fine. 03:45.420 --> 03:48.560 At least I know I'm getting my errors back in the correct format. 03:49.670 --> 03:55.700 And looping through them appropriately in JavaScript, so now we do have one thing we're going to have 03:55.700 --> 04:03.410 to change here, and it's pretty simple in handler's Dash API, when I do my validation, I'm passing 04:03.410 --> 04:09.530 the first parameter as first underscore name and back in our JavaScript console, that's exactly what 04:09.530 --> 04:11.720 we got first underscore name. 04:12.460 --> 04:19.370 If we look at our form back on brons dash planned page, go out and we find the part where you enter 04:19.370 --> 04:19.990 first name. 04:20.450 --> 04:22.070 I need to do something with this. 04:22.070 --> 04:26.080 I want to change the way that everything in here appears. 04:26.630 --> 04:29.780 In other words, I want to give it the red outline. 04:29.780 --> 04:32.240 I want to display some text underneath it. 04:32.270 --> 04:35.690 I actually want to give more information, which means I need to get a reference to it. 04:36.530 --> 04:41.930 And of course, I used ID first Dasch name and name, first underscore name. 04:42.200 --> 04:43.650 So I need to be consistent here. 04:43.670 --> 04:49.730 So what I'm going to do is change every occurrence of first name to first underscore name, so I will 04:49.730 --> 04:52.360 copy it and change it everywhere it exists here. 04:52.970 --> 04:55.250 So this becomes an underscore. 04:55.280 --> 04:59.330 Doesn't matter for that one, but I like to be consistent and this becomes an underscore. 05:00.230 --> 05:04.700 And I will just search for first underscore or first dash. 05:05.240 --> 05:06.470 First dash. 05:06.710 --> 05:07.310 So there's one. 05:07.520 --> 05:08.360 So let's fix that. 05:08.370 --> 05:11.340 Make that underscore and find the next one. 05:11.420 --> 05:12.170 There it is. 05:14.420 --> 05:16.100 And find the next one if there's any more. 05:16.460 --> 05:17.130 So that's it. 05:17.960 --> 05:24.830 So down here, now that I'm getting first underscore name and everything, has the idea of first underscore 05:24.830 --> 05:27.440 name where it's needed, I can actually do something. 05:27.650 --> 05:34.400 So rather than just doing a console log now I can say document, don't get element by ID and look for 05:34.400 --> 05:40.730 key and that's going to find me a reference to first underscore name and now we have that ID, so we'll 05:40.730 --> 05:42.890 see ad for a class list. 05:43.970 --> 05:48.040 The ad we want to add is invalid. 05:48.470 --> 05:53.120 OK, and I also want to put some help text underneath it. 05:53.210 --> 05:57.920 If you look at bootstraps forms, go to the forms package here for bootstraps. 05:58.910 --> 06:03.100 We actually have this kind of thing and this right this is right in bootstraps documentation, other 06:03.110 --> 06:08.300 forms of validation and this sort of thing where we have div class equals valid. 06:08.300 --> 06:10.280 Did collective class equals invalid. 06:10.520 --> 06:12.710 I'm going to copy this, copy this one. 06:13.430 --> 06:19.070 Go right back to my ID, go back up to where first name is in my form and I'm just doing first name 06:19.490 --> 06:25.340 and I'll put that right here, which is the same placement that loosestrife has it in their documentation. 06:25.940 --> 06:33.290 I'll just tab that over and I'll give this the ID equal to first underscore name Dasch help. 06:34.820 --> 06:37.750 So now I have a means of getting a reference to this pretty easily. 06:37.750 --> 06:39.170 Go ahead and come back down here. 06:40.080 --> 06:43.740 In my first statement and change that is necessary. 06:46.180 --> 06:54.300 So what I can do is say I'll just duplicate this document, get a little bit, but ID key plus dash 06:54.310 --> 06:59.710 help and that gives me a reference to the text, which can be green or red as necessary. 07:00.520 --> 07:07.180 And what I want to do is remove the class that will automatically be added by bootstrap after it passes 07:07.180 --> 07:12.100 client validation, which is valid feedback that'll make it green. 07:12.760 --> 07:21.430 I'll remove that class, then I'll duplicate this line and say add in valid feedback and I'll duplicate 07:21.430 --> 07:31.870 this and get rid of this part and set its text, its inner text text equal to value whatever we receive 07:31.870 --> 07:33.110 back from the JSON file. 07:33.790 --> 07:37.150 And the last thing I want to do, of course, is let them fix their error. 07:37.150 --> 07:39.130 So I have to say show buttons. 07:39.310 --> 07:43.040 And that's a little function we wrote a while ago that will put everything back the way it should be. 07:43.750 --> 07:45.480 So let's open our terminal and try this out. 07:45.850 --> 07:46.570 Next stop. 07:48.710 --> 07:49.400 Mr.. 07:53.000 --> 07:58.310 And see if we get everything right back to our Web browser and we'll go back to bronze plan. 07:59.660 --> 08:00.860 And we'll refresh this. 08:02.660 --> 08:10.310 And away we go, so X invalidated X, the rest of it doesn't matter except X.com ex and four two four 08:10.310 --> 08:15.190 two zero three three three three three three. 08:15.830 --> 08:19.220 Clear the JavaScript console because I often make typos in JavaScript. 08:21.930 --> 08:22.780 And there it is. 08:23.070 --> 08:23.560 OK. 08:23.580 --> 08:28.010 Now, that didn't turn red, so I must have a typo there, but it's pretty close. 08:28.050 --> 08:31.080 This went back to read it highlighted appropriately. 08:31.080 --> 08:32.030 It showed the text. 08:32.040 --> 08:33.800 So let's go fix the last little bit here. 08:34.380 --> 08:40.010 Bring this up, hide that and see what we got wrong here in the violet. 08:40.050 --> 08:40.560 There we go. 08:41.880 --> 08:44.750 Invalid feedback and that will take care of it. 08:45.390 --> 08:45.750 All right. 08:45.760 --> 08:50.610 And hopefully this gives you enough information that you can add as much validation as you need. 08:50.880 --> 08:57.780 The key thing to remember is when you're doing your validation here in your handler, make absolutely 08:57.780 --> 09:03.930 certain that this is the ID of the field in question, OK, because you're going to use that. 09:03.930 --> 09:10.290 And doing that allows me to generalize what I do here in this loop to give the appropriate classes, 09:10.290 --> 09:15.750 to remove the other classes and to set the message that you want displayed to the end user underneath 09:15.750 --> 09:17.130 the field in question. 09:17.940 --> 09:18.270 All right. 09:18.420 --> 09:19.170 Let's move on.