1 00:00:00,630 --> 00:00:06,120 In the last section we put together our validate function and added a validator around our title property 2 00:00:06,120 --> 00:00:07,690 coming out of our form. 3 00:00:07,710 --> 00:00:11,670 Remember this title property right here is intended to be the title of this survey that we're about 4 00:00:11,670 --> 00:00:12,990 to send out. 5 00:00:13,020 --> 00:00:17,760 Right now we're just checking to make sure that a user provided an actual title and if they did not 6 00:00:17,820 --> 00:00:20,550 we add a property to the heirs object. 7 00:00:20,550 --> 00:00:24,690 Now again we're going to come back and take care of validation on a couple a couple of the other values 8 00:00:24,690 --> 00:00:25,180 in here. 9 00:00:25,290 --> 00:00:29,970 But right now I want to figure out how to get the error that we returned from right here to somehow 10 00:00:30,000 --> 00:00:31,520 appear on the screen. 11 00:00:31,830 --> 00:00:37,320 So this is another one of the areas of redux form that's you know kind of hard to lead into in a natural 12 00:00:37,320 --> 00:00:37,560 way. 13 00:00:37,560 --> 00:00:38,590 I'll be honest with you. 14 00:00:38,610 --> 00:00:44,880 So we're going to kind of just jump right to the chase when we return this heir's object redux form 15 00:00:44,970 --> 00:00:48,350 looks at the properties on it which you know we had said that we've been over this. 16 00:00:48,420 --> 00:00:55,020 But what's more important is that if any of the errors on this object like the air title or air property 17 00:00:55,020 --> 00:01:02,040 name which in this case is title matches up with one of the fields that we are attempting to render. 18 00:01:02,460 --> 00:01:07,680 And remember it is for us we have a name of title right here and we're passing that to the field with 19 00:01:07,680 --> 00:01:09,460 the name name right here. 20 00:01:09,660 --> 00:01:16,320 Then redux form will automatically take the air that we set in there and pass it as a prop to our custom 21 00:01:16,380 --> 00:01:18,210 field component. 22 00:01:18,210 --> 00:01:24,580 So again because we have a name of title being passed to our field property right here. 23 00:01:24,990 --> 00:01:31,560 And because the air that we set on our air object is title redux form will automatically connect the 24 00:01:31,560 --> 00:01:38,370 dots and pass this error message to just the instance of the field that is controlling the property 25 00:01:38,400 --> 00:01:41,550 or the input that's controlling the name. 26 00:01:41,560 --> 00:01:46,090 So in other words long story short you know again this is kind of hard to explain naturally but long 27 00:01:46,090 --> 00:01:51,670 story short redux form automatically matches up the errors are returning from that function to the different 28 00:01:51,670 --> 00:01:52,660 fields you're rendering. 29 00:01:52,870 --> 00:01:55,290 So let's just see what this looks like in practice. 30 00:01:55,330 --> 00:02:01,330 I'm going to flip over to my survey field component inside of the survey field components prop's we 31 00:02:01,330 --> 00:02:06,820 get passed along a property called Mehta and we saw that just a moment ago when we canceled out some 32 00:02:06,820 --> 00:02:08,250 of the props inside the same. 33 00:02:08,530 --> 00:02:12,760 But let's count log that met a property right now and see what we're working with. 34 00:02:12,760 --> 00:02:15,860 So I'm going to change back over to my application. 35 00:02:15,880 --> 00:02:20,640 We'll wait for the reload to hit. 36 00:02:21,010 --> 00:02:24,820 And you'll notice that we instantly get a bunch of console logs right now for them one for each of the 37 00:02:24,820 --> 00:02:25,710 fields. 38 00:02:26,050 --> 00:02:30,280 Now I'm going to clear out the log by click in little clear console right there and then without putting 39 00:02:30,340 --> 00:02:34,260 any input into the form whatsoever I'm going to click Submit or next. 40 00:02:34,260 --> 00:02:39,580 In this case now we instantly see our four console logs one from each field. 41 00:02:39,580 --> 00:02:42,790 Right now we only have validation around the survey title. 42 00:02:42,790 --> 00:02:48,610 And so I suspect that the console log that came up first right here is being generated by the first 43 00:02:48,610 --> 00:02:50,110 field that we're rendering. 44 00:02:50,110 --> 00:02:55,010 So if I expand this thing right here number we are currently Konst logging the meta object. 45 00:02:55,150 --> 00:03:00,440 You'll notice that it has an air property that says you must provide a title. 46 00:03:00,700 --> 00:03:01,700 So that's pretty much it. 47 00:03:01,700 --> 00:03:03,680 Like that's a whole ballgame right there. 48 00:03:03,700 --> 00:03:09,130 If we just match up the property names on the air object to match the proper name that we pass to our 49 00:03:09,130 --> 00:03:14,530 field object the heirs will automatically be sent along to the appropriate field. 50 00:03:14,530 --> 00:03:16,930 So this is the console log for the survey title. 51 00:03:17,050 --> 00:03:21,330 If we look at the next one you'll notice that we have an air of undefined here. 52 00:03:21,490 --> 00:03:25,490 So we haven't added any validation around the subject line field just yet. 53 00:03:25,510 --> 00:03:27,280 And that's why we don't see an error here. 54 00:03:27,340 --> 00:03:33,290 And then it's the same thing for the third one and the fourth one. 55 00:03:33,300 --> 00:03:38,400 OK so then mind it's going to make our job of putting these validation errors on the screen just a little 56 00:03:38,400 --> 00:03:39,780 bit easier. 57 00:03:39,780 --> 00:03:45,000 So back inside the survey field component we're canceling out the Mehta property right here. 58 00:03:45,010 --> 00:03:47,250 Now there's one other property that I want to show you really quick. 59 00:03:47,280 --> 00:03:53,440 That's also very relevant on the metal object and that is the Touched property right here. 60 00:03:53,760 --> 00:03:59,760 The touch property means that a user has like clicked into it and then clicked out so it would be like 61 00:03:59,790 --> 00:04:01,830 I have now touched this field. 62 00:04:02,100 --> 00:04:06,110 I'm going to mention that right now because that's going to be pretty relevant in just one second. 63 00:04:06,420 --> 00:04:11,130 So again I really want to do right now is get the error message contained in the meta object to appear 64 00:04:11,130 --> 00:04:12,450 on the screen. 65 00:04:12,450 --> 00:04:19,640 So I'm going to remove the council log and then directly beneath the input I'm going to reference Medha 66 00:04:19,740 --> 00:04:23,320 dot err like so. 67 00:04:23,430 --> 00:04:27,970 So now let's refresh our application and see if we can get this air to print up on the screen. 68 00:04:30,230 --> 00:04:31,640 Now this is kind of interesting. 69 00:04:31,670 --> 00:04:36,550 The instant our application renders it looks like the air is already showing up. 70 00:04:36,560 --> 00:04:37,430 So here's the catch. 71 00:04:37,430 --> 00:04:43,550 Behind redux form when you first render the form like the user hasn't touched at all when you first 72 00:04:43,550 --> 00:04:47,350 render it the validation function automatically runs. 73 00:04:47,630 --> 00:04:54,220 And so the instant the form renders redux form automatically it considers everything in here to be invalid. 74 00:04:54,310 --> 00:04:56,570 And so clearly you know that's not really the best approach. 75 00:04:56,570 --> 00:05:00,800 I don't really want to show a validation message to the user before they've even touched the form at 76 00:05:00,800 --> 00:05:01,310 all. 77 00:05:01,520 --> 00:05:06,440 So to solve this we're going to use that touched property that we just saw a second ago on the meta 78 00:05:06,470 --> 00:05:07,370 object. 79 00:05:07,430 --> 00:05:14,100 So we're going to say until a user touches the field do not attempt to show the validation message. 80 00:05:14,120 --> 00:05:16,300 Now the validation is still going be running in the background. 81 00:05:16,310 --> 00:05:24,540 But again the entire point here is I don't want to show a nasty message to my user so now off my metal 82 00:05:24,540 --> 00:05:29,640 object I now want not only the air property but also that touch property as well. 83 00:05:29,940 --> 00:05:35,900 So rather than referencing like metadata air and metadata touched we can do a little bit more yes six 84 00:05:35,910 --> 00:05:40,070 destructuring to get those two properties out of the meta object. 85 00:05:40,080 --> 00:05:45,660 Now you'll notice that we are already destructuring the property off of our prop's object but we can 86 00:05:45,660 --> 00:05:52,480 use yes six nested destructuring to now reach into the meta object and pull a property out of there. 87 00:05:52,500 --> 00:05:55,800 So this is kind of like two levels deep destructuring that we're about to do. 88 00:05:56,190 --> 00:06:04,430 So we're going to say look into the metal object and give me the air and touched properties out of there. 89 00:06:04,550 --> 00:06:04,990 OK. 90 00:06:05,910 --> 00:06:08,660 Again a little bit of ESX right here. 91 00:06:08,670 --> 00:06:18,600 So now inside of our little block down here we can say if touched is true and the air exists then show 92 00:06:18,600 --> 00:06:19,970 the air. 93 00:06:20,040 --> 00:06:25,080 Now we're kind of abusing javascript here again in a similar way to me and the way that we did previously 94 00:06:25,250 --> 00:06:33,240 in one of our reducers touch straight here is going to be a boolean if touched is true then our javascript's 95 00:06:33,240 --> 00:06:36,640 interpreter will evaluate the entire statement right here. 96 00:06:36,660 --> 00:06:40,230 And if air contains a string that string will be returned. 97 00:06:40,230 --> 00:06:45,780 However if touched is false then the javascript interpreter will just automatically stop executing the 98 00:06:45,780 --> 00:06:47,270 entire boolean statement. 99 00:06:47,460 --> 00:06:53,520 So we're kind of abusing the way in which the javascript interpreter runs or executes boolean statements 100 00:06:53,520 --> 00:06:55,070 right here. 101 00:06:55,110 --> 00:06:57,620 In practice it's a lot easier to observe what's going on. 102 00:06:57,660 --> 00:06:59,110 So let's just save this. 103 00:06:59,380 --> 00:07:01,390 We'll flip backwards the application. 104 00:07:01,800 --> 00:07:04,220 Now at present touched is false. 105 00:07:04,320 --> 00:07:09,430 And so even though there still isn't air because the validation is still running touch is false. 106 00:07:09,450 --> 00:07:12,030 So the entire statement is not executed. 107 00:07:12,040 --> 00:07:15,120 However once I clicked into the field touched will be true. 108 00:07:15,120 --> 00:07:19,970 So the entire boolean statement will be executed and air will be returned. 109 00:07:20,550 --> 00:07:22,370 OK so let's give this a shot. 110 00:07:22,380 --> 00:07:26,180 Once I click on and then clicked out touched is now true. 111 00:07:26,190 --> 00:07:30,810 The Boullion statement returns a value that is inside of air which is the string you must provide a 112 00:07:30,810 --> 00:07:31,460 title. 113 00:07:31,770 --> 00:07:32,060 OK. 114 00:07:32,100 --> 00:07:32,870 So that's pretty much it. 115 00:07:32,880 --> 00:07:38,880 That's handling validation in a nutshell really at the end of the day it all comes down to writing your 116 00:07:39,120 --> 00:07:41,460 validate function right here. 117 00:07:41,460 --> 00:07:47,070 Make sure that you look at the Values property and then whatever property you're looking at right here 118 00:07:47,130 --> 00:07:52,560 make sure that you're adding the identical property name to the heirs object and then in your respective 119 00:07:52,560 --> 00:07:58,230 fields you're going to look at your property pull off the air and touch property and then use those 120 00:07:58,230 --> 00:08:02,960 inside the component to get something to actually appear on the screen at the appropriate time. 121 00:08:02,970 --> 00:08:04,210 So this is looking pretty good. 122 00:08:04,230 --> 00:08:05,960 We're getting the validation to appear. 123 00:08:06,060 --> 00:08:08,450 However it still looks pretty nasty right. 124 00:08:08,460 --> 00:08:09,360 Like validation. 125 00:08:09,360 --> 00:08:14,810 Usually we want to appear as read text to say like hey draw your attention up here. 126 00:08:15,000 --> 00:08:18,150 And the spacing all over this thing still looks real nasty as well. 127 00:08:18,180 --> 00:08:21,330 So we saw a little bit of work to do above both of those items. 128 00:08:21,330 --> 00:08:24,720 We also have to make sure we wire validation for all the other fields as well. 129 00:08:24,750 --> 00:08:27,080 So we still got a little bit of work cut out for us. 130 00:08:27,090 --> 00:08:30,250 Let's take a quick break and then tackle those tasks in the next section.