1 00:00:01,350 --> 00:00:06,450 In the last section we added some validation around the title field right here. 2 00:00:06,450 --> 00:00:11,200 Specifically we use the title dot touched and title dot heir properties. 3 00:00:11,790 --> 00:00:17,520 The source of the title dot heir property right here came from our validate function which we defined 4 00:00:17,520 --> 00:00:26,380 here at the bottom we said if the title did not have a value then we assigned ersatz tile to b enter 5 00:00:26,380 --> 00:00:34,080 a user name and this ends up as title dot air inside of our title configuration object right here for 6 00:00:34,080 --> 00:00:35,860 this particular field. 7 00:00:36,090 --> 00:00:40,470 We didn't implement any validation for the other two objects or the other two fields just yet. 8 00:00:40,470 --> 00:00:46,830 So let's go ahead and do those right now in practice they're going to end up being completely identical 9 00:00:46,830 --> 00:00:48,470 to the values. 10 00:00:48,540 --> 00:00:49,940 Title of validation as well. 11 00:00:49,950 --> 00:00:52,780 So let's go ahead and just bring them out really quick. 12 00:00:53,010 --> 00:01:06,360 So if values dot categories doesn't exist we'll say errors dot categories and htar categories and then 13 00:01:06,390 --> 00:01:21,510 if values content does not exist heir's dot content is enter some content like so then we need to make 14 00:01:21,510 --> 00:01:25,030 sure that we show the error messages in the form itself. 15 00:01:25,080 --> 00:01:33,330 I'm going to go ahead and just copy paste this div the text help div right here into the categories 16 00:01:36,360 --> 00:01:39,850 and down into the content as well. 17 00:01:39,850 --> 00:01:47,490 And then I'll make sure to update the field names on here so title here is going to become categories 18 00:01:47,700 --> 00:01:56,970 touched and categories on air and content not touched and content on air. 19 00:01:58,190 --> 00:01:58,850 OK. 20 00:01:59,010 --> 00:02:01,740 So let's go ahead and give this a shot in the browser. 21 00:02:01,740 --> 00:02:10,890 I'll go ahead and refresh and I can touch touch and touch and you can see that I automatically see the 22 00:02:10,890 --> 00:02:13,440 validation error on each field right here. 23 00:02:13,440 --> 00:02:21,060 In addition if the form is not valid and I click submit all the error messages automatically show up 24 00:02:21,240 --> 00:02:24,790 and the form is not submitted until I make the form valid. 25 00:02:25,200 --> 00:02:29,060 Perfect. 26 00:02:29,130 --> 00:02:32,470 So this is behaving basically just how we expect. 27 00:02:32,500 --> 00:02:34,360 There's just one more thing. 28 00:02:34,590 --> 00:02:41,310 When an input is invalid We should really show it as red with red text and make sure that the error 29 00:02:41,390 --> 00:02:47,040 or the error message right here is highlighted with red Texes Well it will just kind kinda highlight 30 00:02:47,090 --> 00:02:51,900 DEARDS the user and let them know hey you need to take care of something here before we go ahead and 31 00:02:52,160 --> 00:02:54,150 submit your form. 32 00:02:55,230 --> 00:02:57,050 OK. 33 00:02:57,060 --> 00:03:05,550 So to do that we're going to make use of one more little helper here on each of the configuration objects 34 00:03:05,610 --> 00:03:12,550 title categories and content and that little helper is a property called valid. 35 00:03:12,600 --> 00:03:19,590 So it's like you know title dot valid categories dot valid and content not validated. 36 00:03:19,590 --> 00:03:25,940 And this Valletta flag is just a boolean true or false that says hey is the form valid or not. 37 00:03:25,950 --> 00:03:28,490 Yes or no that's all it does. 38 00:03:29,400 --> 00:03:36,390 So we can use that helper to add on a class name onto our form group right here. 39 00:03:36,630 --> 00:03:43,680 And so we'll add on the class name that will just help us use some bootstrap magic to show whether or 40 00:03:43,680 --> 00:03:46,490 not the form is currently valid or not. 41 00:03:47,550 --> 00:03:55,470 So on this class name right here I'm going to take off the quotes and will instead wrap it in curly 42 00:03:55,470 --> 00:03:56,100 braces 43 00:03:59,460 --> 00:04:03,300 and we're going to wrap everything in the curly braces with a template string 44 00:04:06,450 --> 00:04:13,110 and then we'll say if the form or excuse me at the input has been touched. 45 00:04:14,370 --> 00:04:15,060 And 46 00:04:18,780 --> 00:04:20,560 the title is invalid. 47 00:04:21,240 --> 00:04:28,730 Add the class name has danger otherwise don't add a class at all. 48 00:04:29,040 --> 00:04:32,150 So we're just using a template string here and then in turn Airey. 49 00:04:32,340 --> 00:04:37,050 So we're saying if the title has been touched and the title is invalid. 50 00:04:37,430 --> 00:04:42,120 So the class name has danger hoops and you draw out that with quotes like so. 51 00:04:42,120 --> 00:04:44,130 Otherwise just to empty string. 52 00:04:44,160 --> 00:04:47,540 Don't use the has danger class name. 53 00:04:48,200 --> 00:04:50,320 So let's go ahead and repeat that process. 54 00:04:50,370 --> 00:04:52,100 On the other two divs. 55 00:04:52,830 --> 00:04:55,330 And I'm just going to go ahead to save us some time. 56 00:04:55,350 --> 00:05:03,990 I'm just going to copy paste so I'll copy paste it down to categories and updates like so 57 00:05:06,840 --> 00:05:15,710 and then I'll copy paste down to content and update it to content like so. 58 00:05:16,770 --> 00:05:22,220 All right let's go ahead and give this a shot in the browser and I'll click submit. 59 00:05:22,260 --> 00:05:24,830 And everything pops up as read. 60 00:05:25,290 --> 00:05:30,810 Just to let the user know hey you need to take care of this before you can actually submit the form 61 00:05:30,810 --> 00:05:31,210 . 62 00:05:31,230 --> 00:05:37,170 So if I enter some text the validation error goes away and then I should be able to submit the form 63 00:05:37,170 --> 00:05:37,720 . 64 00:05:37,740 --> 00:05:49,890 Let me grab some Lorem Ipsum again and we'll say I know their new blog post good posts and I can successfully 65 00:05:49,890 --> 00:05:50,370 submit it. 66 00:05:50,370 --> 00:05:53,640 You can see here's my new blog post submitted. 67 00:05:54,360 --> 00:05:54,770 OK. 68 00:05:54,780 --> 00:05:56,180 So just one more time. 69 00:05:56,220 --> 00:06:00,300 I know this logic right here on this line right here is really messy. 70 00:06:00,360 --> 00:06:05,150 If you want to extract it out to a little helper method on the class totally go for it. 71 00:06:05,160 --> 00:06:09,480 You know it is pretty darn confusing right here. 72 00:06:09,480 --> 00:06:15,200 Again all we're doing is saying if the if this particular field has been touched and it is not valid 73 00:06:15,570 --> 00:06:22,800 add on the has danger class and the has danger class is coming from Bootstrap it's just a helper that 74 00:06:22,800 --> 00:06:28,890 will highlight any of the text in the input inside of this div right here as read. 75 00:06:29,910 --> 00:06:30,540 OK. 76 00:06:30,540 --> 00:06:33,850 So I think that we're in a pretty good spot here. 77 00:06:34,200 --> 00:06:37,070 If the user tries to submit the form it shows up as invalid. 78 00:06:37,080 --> 00:06:39,840 And when we fix it the validation error goes away. 79 00:06:39,840 --> 00:06:40,640 This is perfect. 80 00:06:40,650 --> 00:06:42,300 I really like we're out. 81 00:06:43,230 --> 00:06:48,900 Let's look back at our marks really quick and let's look at they create form. 82 00:06:48,930 --> 00:06:50,760 We're pretty much where we need to be. 83 00:06:50,760 --> 00:06:55,350 You know we've got the title the submit button at the bottom but we're still missing the cancel button 84 00:06:55,360 --> 00:06:55,600 . 85 00:06:55,860 --> 00:06:58,750 So let's take care of that really quick here. 86 00:06:58,830 --> 00:07:04,060 The cancel button should just navigate the user back to the index page over here. 87 00:07:04,410 --> 00:07:10,230 And so we'll do that by using the reactor router link helper again just like we did with the ADD post 88 00:07:10,230 --> 00:07:12,090 button right here. 89 00:07:13,200 --> 00:07:25,080 So back in the code editor at the top will imports link from re-act router and then inside of our form 90 00:07:26,530 --> 00:07:30,190 will add a link next to the existing button. 91 00:07:30,300 --> 00:07:32,850 It will take the user back to the index page 92 00:07:36,150 --> 00:07:40,370 and will give it a class name of Button button danger. 93 00:07:40,370 --> 00:07:42,530 This will just make the button appear red. 94 00:07:42,840 --> 00:07:48,480 So they'll know hey like if I leave I'm going to lose my blog post if I haven't saved it already. 95 00:07:49,170 --> 00:07:52,270 And inside will just say cancel. 96 00:07:52,860 --> 00:07:53,270 All right. 97 00:07:53,400 --> 00:07:58,830 Let's save this refresh and I've got my cancel here let's click it. 98 00:07:58,970 --> 00:08:01,890 It takes us back to our list of blog posts. 99 00:08:01,890 --> 00:08:05,830 We can go back to the blog post for him by clicking out of post. 100 00:08:05,880 --> 00:08:07,330 And so this is working perfectly. 101 00:08:07,350 --> 00:08:10,650 The only thing that's a little bit weird is the two buttons are very close here. 102 00:08:10,980 --> 00:08:14,030 Let's add a little bit of CSSA to take care of that. 103 00:08:14,040 --> 00:08:18,170 So I've already got a CSSA file created here inside of the style directory. 104 00:08:18,510 --> 00:08:23,910 So we'll just say form ankar just add some margin left. 105 00:08:23,910 --> 00:08:27,320 We'll just take care of it in a very direct manner. 106 00:08:28,200 --> 00:08:30,900 So let's refresh and perfect. 107 00:08:30,930 --> 00:08:33,150 We've got our space there so we need. 108 00:08:33,600 --> 00:08:34,120 Cool. 109 00:08:34,170 --> 00:08:37,730 So our create Post forum is looking very good at this point. 110 00:08:37,830 --> 00:08:40,140 We've got our validation. 111 00:08:40,140 --> 00:08:45,150 And when a user fixes it we take care of it and we could then submitted or we can just go ahead and 112 00:08:45,150 --> 00:08:49,090 cancel and go back to our list of posts here just what we want. 113 00:08:49,230 --> 00:08:51,650 Let's go ahead and continue in the next section.