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