So far our form can successfully create new records. 2
But you may have noticed in the last section that we were able to successfully create a record without 3
any data in this field right here. 4
And if I wanted to you could even create one without a title or a content as well. 5
We really need to make sure that each input in our form has some amount of data in it before the user 6
can submit it. 7
Again this process is called form validation. 8
We need to validate the form before it can be submitted form validation is another feature that can 9
be handled by redux form to do form validation. 10
We're going to create a new function in here in our component that will be called whenever the form 11
needs to be validated depending on what we return from this function redux form will either mark the 12
form as valid or invalid. 13
So let's go ahead and give it a shot. 14
So underneath our component I'm going to define a new function called validate and validate is going 15
to be called with the values from the form. 16
Right now we're going to handle the simple case in which all the form's values are just 100 percent 17
valid. 18
We'll do that by creating a new object here called errors and we'll talk about what this object is for 19
in a second. 20
And we'll just immediately return it like so. 21
So validate gets called. 22
It has some values from the form. 23
We create a new object and we just pass it back. 24
Now we need to make sure that redux form actually uses this validation function. 25
We do that by just adding it to the configuration object down here. 26
So I'll add a comma and it will add validate validate being the function we just created right here 27
. 28
OK. 29
Let's add a little bit of validation for the title and then talk about what exactly is going on. 30
So we'll do. 31
If 32
values not title does not exist. 33
Title enter a user name. 34
Now if the title isn't defined so we have not values that title that means if the title does not exist 35
if it's no undefined falsie you know whatever add a property to the object with the key title that says 36
enter a user name. 37
So here's how validation with redux form works. 38
We return an object from the validate function if the object has a key that matches one of our field 39
names. 40
You can see right here we've got title title and that key has a object tied to it or a you know a truthy 41
object too tied to it be the string or the value true or you know anything whatsoever. 42
Redux form assumes that the form is not valid and so it doesn't allow you to show or to submit the form 43
in and also adds a couple of properties to the fields a configuration object up here. 44
So again if you want to mark the form as invalid. 45
All we need to do is add a property to the heirs object that we return and we just add a truthy value 46
to it. 47
In this case I added the actual error message that we want to display enter a user name. 48
So next we're going to go ahead and consume that air inside of our render method up here. 49
We want to show the user hey like you just did something invalid. 50
You need to fix this. 51
So I don't need the input I'm going to add another div with the class name of text help and then inside 52
of your all do title. 53
Err the title right here is again coming from the fields object here in the air. 54
Property is going to be the text that we returned down here in our validate function. 55
So let's go ahead and give this a shot. 56
You saved the form. 57
I'm going to refresh the browser and you'll notice that right here off the bat I see the error message 58
enter user name. 59
So by default redux form considers the foreign to be invalid. 60
You know there's no no content in here. 61
Therefore the form is not valid at all. 62
You'll notice that if I enter some context or some content the validation error automatically goes away 63
. 64
So whenever we change the form in any way shape or fashion the validate function immediately runs again 65
and validates the form. 66
And in this case since we added some content here the form is now valid. 67
And so the error message went away. 68
So I can delete that content and you'll see that it pops back up late so the validate function also 69
prevents the form from being submitted. 70
So if the form is currently invalid which it is right now I can click submit here and you'll see that 71
I'm not getting any network requests in my network requests log over here. 72
So if the form is not valid I can't submitted so very handy you know keeps the user from prematurely 73
trying to submit a form. 74
OK so that's kind of the you know low level rundown on how the validation is working here. 75
What we do want to make sure is that when the user first enter or opens a form up we don't really want 76
to you know scold them right away. 77
We don't want to tell them hey you did something wrong. 78
We want to make sure that they actually you know touch the form in some way enter some texts before 79
they before we showed them any error message. 80
So to handle that redux form gives us another little helper on the title object here on the field configuration 81
object called touched and what Touch does for us is it is a property that is false until the user touches 82
the field in some way and so that means they click into it and then they click out or they click into 83
it and enter some text you know basically they have in some way modified that form. 84
Or excuse me that particular input. 85
So we'll use that touched property to gauge whether or not we so this title dot air right here. 86
So to do that we're going to use a javascript ternary expression. 87
If you're not familiar with churn areas no problem we're going to do it here very slowly. 88
So first with the turn Airi will write a single expression that evaluates to either true or false. 89
So title that touched member touched is a property that we get for free from redux form it just means 90
hey as a user touches import input in some fashion then we'll add a question mark here with the space 91
on either side. 92
And then we'll put an expression to return. 93
If the first expression is true. 94
So if titled touched is true it will return titled dot air. 95
If title not touched is false will add a colon over here and then we'll add another expression in. 96
So this is a tertiary right here. 97
If titled touched is true return titled. 98
Err if it's false return empty string. 99
In other words just don't show anything at all. 100
OK so I'm going to go ahead and save this and let's go ahead and give it a sot in the browser so I refresh 101
. 102
You'll notice that the error message isn't here anymore because I haven't yet touched the form. 103
Now all click into it and then I'll just immediately click out that counts as having touched the form 104
that means hey the user like. 105
Tried to do something here but they kind of did a bad job of it so we should probably let them know 106
that they did something bad and show them an error message. 107
So again I'll refresh right now titled. 108
Touched is false. 109
So we're not showing any content. 110
I click in click out titled Not touched is now true and so we show the validation error right here. 111
So pretty straightforward but very powerful. 112
Let's go ahead and continue with the other fields in the next section.