1 00:00:00,630 --> 00:00:06,530 In the last section we added on one field for each different property of a blog post we'll now continue 2 00:00:06,540 --> 00:00:12,000 by making sure that we handle a user submitting the form and also make sure that we validate the input 3 00:00:12,000 --> 00:00:13,860 that a user submits. 4 00:00:13,920 --> 00:00:18,360 One thing that I want to do a quick aside here for I want to mention that I've been referring to tags 5 00:00:18,370 --> 00:00:22,220 here incorrectly the property that we're working with is not called tags. 6 00:00:22,230 --> 00:00:24,020 It is called category's. 7 00:00:24,300 --> 00:00:26,090 I have definitely been misspeaking there. 8 00:00:26,100 --> 00:00:34,350 I apologize for that so I'm going to replace label and name with categories here so hopefully that alleviates 9 00:00:34,350 --> 00:00:35,330 some confusion. 10 00:00:35,330 --> 00:00:36,580 I probably introduce there. 11 00:00:36,660 --> 00:00:38,240 Again my mistake. 12 00:00:38,880 --> 00:00:39,160 OK. 13 00:00:39,180 --> 00:00:44,460 So our goal right now is to make sure that we can handle some middle of the form and also handle validation 14 00:00:44,460 --> 00:00:45,610 of the form as well. 15 00:00:46,420 --> 00:00:51,040 Looking back at the form inside the browser I really want to make sure that a user has entered some 16 00:00:51,130 --> 00:00:56,170 input for every single one of these fields whenever they attempt to submit it. 17 00:00:56,170 --> 00:01:03,880 So for example if a user enters in some categories and some post content but not a title I want to not 18 00:01:03,880 --> 00:01:05,470 submit the form to the back end. 19 00:01:05,620 --> 00:01:11,350 I want to stop the submission and I want to show an error message to the user directly underneath this 20 00:01:11,410 --> 00:01:12,490 input right here. 21 00:01:12,520 --> 00:01:13,340 So that's the end goal. 22 00:01:13,360 --> 00:01:19,740 I want to show some validation on an individual input if that input is not correct or not invalid. 23 00:01:21,870 --> 00:01:26,560 Validation of our form is part of what redux forum handles automatically for us. 24 00:01:26,640 --> 00:01:33,340 So we don't need to inspect any values manually inside of here or add in any custom GSX per se. 25 00:01:33,570 --> 00:01:40,050 We're going to hook into the redux form system validation that's going to make validation a lot easier 26 00:01:40,050 --> 00:01:41,590 for us. 27 00:01:41,670 --> 00:01:43,320 So let's get to it. 28 00:01:43,350 --> 00:01:49,140 I'm going to first start off by defining a helper function underneath my component so underneath the 29 00:01:49,140 --> 00:01:56,800 component I'll define a function that I'm going to call validate on then going to take this validate 30 00:01:56,800 --> 00:02:05,860 function and pass it to the redux form helper right underneath it as a configuration option called validate. 31 00:02:05,860 --> 00:02:08,720 Now of course the key and the value here are identical. 32 00:02:08,730 --> 00:02:12,360 So all condensed down to just be validate by itself. 33 00:02:13,890 --> 00:02:19,680 The validate function will be called automatically for us at certain points during the form's lifecycle. 34 00:02:19,690 --> 00:02:24,040 Most notably when ever the user tries to submit the form. 35 00:02:24,040 --> 00:02:28,720 So whenever the user presses the enter key or presses some button that's labeled Samit or something 36 00:02:28,720 --> 00:02:35,410 like that the validate function will be called automatically for us the validate function is given a 37 00:02:35,410 --> 00:02:43,780 single argument which we by convention referred to as values values is an object that contains all the 38 00:02:43,780 --> 00:02:48,460 different values that enter the or excuse me that a user has entered into the form. 39 00:02:48,490 --> 00:02:54,010 So if we were to cancel log this thing and I'm not going to actually cancel log it I'm going to show 40 00:02:54,010 --> 00:02:55,370 you an example. 41 00:02:55,900 --> 00:03:08,400 I would expect to get back an object that contains a property's title categories and content and then 42 00:03:08,400 --> 00:03:12,960 the values for each of these three different properties would be whatever the user had entered into 43 00:03:12,960 --> 00:03:14,550 the form itself. 44 00:03:14,550 --> 00:03:19,680 So I'm saying hey maybe they have values of a SDF right here that would correspond to me going into 45 00:03:19,680 --> 00:03:28,110 the form and putting in SDF on all three and then clicking some submit button in here in order to validate 46 00:03:28,110 --> 00:03:32,830 these inputs and then communicate any possible errors back to redux form. 47 00:03:32,880 --> 00:03:38,150 We have to return an object that we create from the validate function. 48 00:03:38,160 --> 00:03:43,410 So this is part of redirects form where I think that it's a very simple thing but it can be a little 49 00:03:43,410 --> 00:03:47,110 bit challenging to grasp exactly what we're doing inside the validate function right here. 50 00:03:47,110 --> 00:03:48,960 So let me give you a very clear example. 51 00:03:48,990 --> 00:03:53,850 OK let's do a very clear example of what we're supposed to do inside this function. 52 00:03:53,850 --> 00:03:57,700 We're always going to start off by creating an errors object. 53 00:03:57,960 --> 00:03:59,780 So we're going to say Konst errors. 54 00:03:59,820 --> 00:04:02,670 That is an empty object. 55 00:04:02,790 --> 00:04:10,100 Then we'll do some logic to validate the inputs from the values object. 56 00:04:10,560 --> 00:04:16,560 And then at the very bottom of the function we will return the errors object like so. 57 00:04:16,980 --> 00:04:20,880 So where does the validation happen per say like where do we actually communicate. 58 00:04:20,880 --> 00:04:22,020 Validation errors. 59 00:04:22,020 --> 00:04:24,010 Back to redux form. 60 00:04:24,030 --> 00:04:27,620 Well it's all through this heir's object right here. 61 00:04:27,720 --> 00:04:33,480 If we return an empty object from the validate function which is exactly what we're doing right now 62 00:04:33,930 --> 00:04:38,780 redux form assumes that there is absolutely nothing wrong with our form. 63 00:04:39,090 --> 00:04:45,990 So if errors I'm going to put a comment on here just to make sure it's really clear if Ayer's is empty 64 00:04:46,710 --> 00:04:49,860 the form is fine to submit. 65 00:04:49,880 --> 00:04:57,030 However if that object has any properties assigned to it whatsoever redux form will assume that in fact 66 00:04:57,060 --> 00:05:02,460 there is an issue with the form and that it fails validation and that it should not submit the form 67 00:05:02,460 --> 00:05:03,500 at all. 68 00:05:03,600 --> 00:05:14,360 So will say if heir's has any properties redux form assumes form is invalid. 69 00:05:14,790 --> 00:05:21,520 So in practice to do validation of forms managed by redux form we define this object. 70 00:05:21,540 --> 00:05:27,600 We expect our values object and then if there is anything wrong with the form we append some properties 71 00:05:27,600 --> 00:05:29,110 to that object. 72 00:05:29,430 --> 00:05:33,350 So let's walk through this and practice and see exactly what it looks like. 73 00:05:33,360 --> 00:05:39,480 Remember that for us we really just care about making sure that a user has entered some valid input 74 00:05:39,570 --> 00:05:41,360 for each of the different properties. 75 00:05:41,520 --> 00:05:44,050 Title categories and content. 76 00:05:44,130 --> 00:05:52,800 So for us we'll say if a user did not provide values not title The not going to add on a property to 77 00:05:52,800 --> 00:05:54,080 my ears object. 78 00:05:54,080 --> 00:05:55,400 So I say errors. 79 00:05:55,410 --> 00:06:01,380 Title is enter a username are not user usernames season but enter a title 80 00:06:04,120 --> 00:06:04,400 OK. 81 00:06:04,440 --> 00:06:09,460 So a lot of this is I know this code right here is very simple but I feel as though it's really really 82 00:06:09,460 --> 00:06:10,080 nuanced. 83 00:06:10,090 --> 00:06:13,220 So I want to walk through this very closely. 84 00:06:13,330 --> 00:06:16,880 The object started out as completely empty. 85 00:06:16,960 --> 00:06:23,600 We then looked at some particular value on the values object and we said if this is not valid. 86 00:06:23,620 --> 00:06:30,430 So if a user did not pass in the title here then I'm going to add a property to the heirs object of 87 00:06:30,520 --> 00:06:31,190 title. 88 00:06:31,450 --> 00:06:39,010 And I'm going to assign it a message that will be displayed to the user because the object now has a 89 00:06:39,310 --> 00:06:40,570 property assigned to it. 90 00:06:40,570 --> 00:06:46,090 So because it's no longer empty when we return it from this function redux form is going to look at 91 00:06:46,090 --> 00:06:47,160 the arrows object. 92 00:06:47,320 --> 00:06:49,140 It's going to see Dot title. 93 00:06:49,150 --> 00:06:55,270 It's going to say oh well there's a string here that means the form is not valid and I'm not going to 94 00:06:55,270 --> 00:06:57,910 submit it to the back and are not going to submit it at all. 95 00:06:57,910 --> 00:07:01,130 So no further submission the form must not be valid. 96 00:07:02,730 --> 00:07:06,930 So if nothing else if all this doesn't quite make sense I can tell you that all you really need to be 97 00:07:07,650 --> 00:07:12,630 worried about here is putting together some if statements and then assigning a property to the errors 98 00:07:12,630 --> 00:07:13,230 object. 99 00:07:13,230 --> 00:07:17,580 In practice that's really all we're doing all this extra explanation I'm giving you here is just to 100 00:07:17,580 --> 00:07:21,390 tell you a little bit about what relaxed form is doing internally. 101 00:07:21,420 --> 00:07:27,930 So again in practice we really can just repeat these statements for each additional property inside 102 00:07:27,930 --> 00:07:29,520 of our heir's object. 103 00:07:29,610 --> 00:07:39,810 So I can say if a user did not provide values dot categories then errors dot categories is enter some 104 00:07:39,810 --> 00:07:41,440 categories. 105 00:07:42,360 --> 00:07:52,500 And finally if the user did not provide values Dom content then ersatz content is enter some content 106 00:07:52,520 --> 00:07:54,090 please. 107 00:07:54,420 --> 00:07:58,170 Now you can easily imagine how we might expand the validation on here. 108 00:07:58,170 --> 00:08:03,080 We might also put in a rule and say well maybe it's high last we like three characters long. 109 00:08:03,330 --> 00:08:14,040 So maybe if there is no title or if values Dom title dot length is less than you know three characters 110 00:08:14,630 --> 00:08:22,440 well then maybe you want to say Please enter a title that is at least three characters like so. 111 00:08:22,830 --> 00:08:28,290 So we can easily kind of add on additional validation checks in here by manipulating the if statements 112 00:08:28,500 --> 00:08:34,450 to check additional properties much more explicitly than just making sure that they exist. 113 00:08:34,470 --> 00:08:39,390 Now do note that we could also as well we don't have to combine these validation checks into a single 114 00:08:39,390 --> 00:08:40,350 if statement. 115 00:08:40,350 --> 00:08:42,460 I can easily also add on here. 116 00:08:42,590 --> 00:08:51,180 I could break out this less than 3 so I could say if length is less than 3 then aerostat title should 117 00:08:51,180 --> 00:09:00,300 be tyle must be at least 3 characters and then for the other checks that I did down here I could say 118 00:09:00,690 --> 00:09:04,080 just enter a title. 119 00:09:04,110 --> 00:09:08,400 So I don't have to combine all I'm trying to say there is I don't have to do all my validation inside 120 00:09:08,400 --> 00:09:09,800 of a single if statement. 121 00:09:09,840 --> 00:09:14,970 I can break it out into multiple if statements and then customize the title or the air that's shown 122 00:09:14,970 --> 00:09:18,720 to the user inside each of those different if statements. 123 00:09:18,720 --> 00:09:23,160 Now for my application I really don't care about the length the titles so personally I am going to delete 124 00:09:23,160 --> 00:09:25,840 the extra check in here because I really don't care about it. 125 00:09:27,440 --> 00:09:33,200 OK so in this section we defined our validate function and passed it to the redux form helper at the 126 00:09:33,200 --> 00:09:40,040 bottom as an option called validate the validate function will be called automatically by redux form 127 00:09:40,190 --> 00:09:44,260 whenever a user attempts to submit the form inside of here. 128 00:09:44,270 --> 00:09:46,600 We created an empty air object. 129 00:09:46,670 --> 00:09:53,270 We then inspected the value of each input out out of the form and then we appended some properties to 130 00:09:53,270 --> 00:09:54,790 the heirs object. 131 00:09:54,890 --> 00:10:00,670 If the object comes back from the validate function as empty then that means that the form must be valid. 132 00:10:00,860 --> 00:10:06,170 If there are any properties assigned to it then read X form assumes that the form is not valid and that 133 00:10:06,170 --> 00:10:08,160 it should not submit the form. 134 00:10:08,720 --> 00:10:13,700 OK so I know this is when a lot of talking over what might seem like a very simple subject but to me 135 00:10:13,700 --> 00:10:18,110 this is something that is very nuanced and I really want to make sure that everything was very very 136 00:10:18,110 --> 00:10:19,740 clear as to what was going on. 137 00:10:20,120 --> 00:10:22,270 So now we've got some validation added in here. 138 00:10:22,370 --> 00:10:28,400 We need to somehow think about how we are going to reflect these different error messages to the user. 139 00:10:28,430 --> 00:10:30,920 So let's take care of that in the next section.