1 00:00:00,990 --> 00:00:06,480 In the last section we added on a Validate function that will inspect the form when ever it is submitted 2 00:00:06,480 --> 00:00:07,780 by the user. 3 00:00:07,800 --> 00:00:12,120 Now that we have some validation messages to say to the user we need to make sure that we somehow get 4 00:00:12,120 --> 00:00:14,520 these displayed inside of our component. 5 00:00:14,880 --> 00:00:22,050 So remember that by default redux form is really just responsible for showing or seemy for managing 6 00:00:22,050 --> 00:00:23,400 the state of our form. 7 00:00:23,400 --> 00:00:26,240 It's really just handling the data side of things. 8 00:00:26,310 --> 00:00:31,790 It's up to us the developer to actually show some markup on the screen that represents the form. 9 00:00:31,830 --> 00:00:35,330 And so that's why we created the field component in the first place. 10 00:00:35,370 --> 00:00:41,040 So it's very easy to now kind of take that one step further and say that it is also our responsibility 11 00:00:41,370 --> 00:00:45,340 for making sure that we show validation errors to the user as well. 12 00:00:45,360 --> 00:00:51,040 So it's up to us to make sure that these error messages somehow get displayed on the screen. 13 00:00:51,450 --> 00:00:58,830 So let's start real simple I just want to somehow get these air messages to show up to do so we can 14 00:00:58,830 --> 00:01:03,750 reference the field object that is passed to the render field function. 15 00:01:03,750 --> 00:01:09,420 Remember that this field object right here represents a single input or a single piece of state that 16 00:01:09,420 --> 00:01:12,640 we are attempting to communicate to the user. 17 00:01:12,690 --> 00:01:19,410 We've already seen that the field object right here can be given some arbitrary properties like we added 18 00:01:19,410 --> 00:01:22,470 on a label which we specified in the field. 19 00:01:22,500 --> 00:01:28,310 It also gets some automatically created properties like an input right here. 20 00:01:28,320 --> 00:01:33,750 There's one more property that is automatically placed on the field object that is responsible for handling 21 00:01:33,750 --> 00:01:35,800 validation as well. 22 00:01:36,080 --> 00:01:39,800 To get this error message to show up I'm going to place my curly braces. 23 00:01:39,840 --> 00:01:45,800 And then we will reference field dot mete dot air like so. 24 00:01:47,610 --> 00:01:55,540 This method dot air property is automatically added to that field object from our validate function. 25 00:01:56,040 --> 00:02:00,590 So this is where this is why I spent so much time in the last section talking about exactly what this 26 00:02:00,600 --> 00:02:01,790 heir's object was doing. 27 00:02:01,800 --> 00:02:06,740 I know some of your thinking guys spent so long on that but really it was for a very good reason. 28 00:02:07,080 --> 00:02:12,120 Remember that we specified or we added some properties to this heir's object right here like Aerostar 29 00:02:12,150 --> 00:02:14,900 title categories in content. 30 00:02:15,060 --> 00:02:17,070 I didn't pick these names out at random. 31 00:02:17,070 --> 00:02:25,320 These were very specific property names that I chose when we specify a property Aerostar title and then 32 00:02:25,320 --> 00:02:28,420 return heirs from the validate function. 33 00:02:28,440 --> 00:02:35,490 When redux form goes to render say this field right here it looks at the Name property that we provided 34 00:02:35,490 --> 00:02:43,740 to that field and it says if the heirs object has a property assigned to it of title I'm going to call 35 00:02:44,130 --> 00:02:50,400 render field right here and I'm going to pass along whatever error message exists on that as object 36 00:02:50,490 --> 00:02:53,130 with a power under the property title. 37 00:02:53,130 --> 00:03:00,540 So really this name right here of title is what connects to our validate function to the title that 38 00:03:00,540 --> 00:03:01,760 is right here. 39 00:03:01,950 --> 00:03:09,000 If we changed the title up here to like blog title or something like that no longer any communication 40 00:03:09,000 --> 00:03:11,840 from the validate function to this particular field. 41 00:03:11,970 --> 00:03:17,070 So again I'm really trying to communicate here is that this name property and the property that we use 42 00:03:17,070 --> 00:03:21,750 inside that validate function must be identical for all these errors to show up correctly. 43 00:03:23,520 --> 00:03:29,220 So because those two properties were identically named the field object automatically gets this field 44 00:03:29,240 --> 00:03:35,820 dot metadata error message right here and this error right here is going to be the exact same string 45 00:03:36,630 --> 00:03:41,860 that we assigned inside of the validate function which is enter a title OK. 46 00:03:42,130 --> 00:03:47,500 So yes there is a lot of kind of I don't want to call it magic per se but there's definitely a lot of 47 00:03:47,500 --> 00:03:51,730 assumptions that you are naming all these properties that you're using very consistently. 48 00:03:51,730 --> 00:03:56,890 So when you're working on your own project stuff is not working correctly it's just not showing up really 49 00:03:56,890 --> 00:03:59,890 do make sure you double check all your property names. 50 00:04:00,280 --> 00:04:03,820 OK I think we're ready for a little bit of a test now. 51 00:04:04,090 --> 00:04:07,890 I do want to say that probably everything is not going to work the way we expect. 52 00:04:07,900 --> 00:04:13,570 The reason for that is that we are not really tying redux form into the middle of our form just yet. 53 00:04:13,570 --> 00:04:16,010 So on second thought rather than testing anything. 54 00:04:16,030 --> 00:04:17,340 Let's take a quick break. 55 00:04:17,350 --> 00:04:22,060 We're going to come back and wire up the Submit of our form and then we'll be able to do the actual 56 00:04:22,060 --> 00:04:25,810 test and make sure that all of our validation is working correctly. 57 00:04:25,810 --> 00:04:30,000 So let's handle some middle with redux for them in the next section.