In the last video we figured out how to hook up an on Smith event handler using redux form.
Now in this video I want to show you something kind of interesting here.
If we load up our form with no inputs whatsoever we can click on submit and we see an empty object over
here.
So this would be a case in which a user is attempting to submit our form entering in any title or description.
Chances are we do not want to allow that.
We probably want to make sure that a user always enters in a title and a description before we allow
them to create a stream.
This process of making sure that the user has entered in some acceptable input is referred to as validation.
We can use validation to check for any type of element in the form so we can make sure that say a title
any description or enter if we had an email input we could make sure that a user entered in an email.
If you have a phone number input we can check to make sure the user entered in a valid phone number.
So any type of validation you can possibly imagine is going to occur during this validation step handling
validation once redux form is simultaneously kind of hard and kind of easy.
It's kind of hard because there's going to be a couple of moving pieces here and a little bit of magic.
But at the same time it's going to be a little bit easy because as long as you learn the pattern doing
the validation is going to be an absolute snap.
OK.
Sort of walk us through this process we're going to take a look at this diagram here.
Now the diagram is a little bit confusing.
So we're not going to go over the entire diagram right away.
Instead we'll go over it part by part and then write out some code for each step inside of here.
OK.
So the first thing to note here is that your form is going to be validated by redux form.
Just about every millisecond of the day you could possibly imagine.
Not really.
But essentially every single time that the form is initially rendered to the screen and every single
time that the user interacts with the form so it interacts with the form can be like selecting input
or typing in a character or selecting out of that input.
Just about every interaction you can imagine that occurs with your form redux form is going to attempt
to validate your inputs.
So at every one of those little events redux form is going to call a function automatically called validate
you and I have to define this validate function validate function is going to be called with all the
current values in the form of validate function is going to be essentially our opportunity to check
to see if the user entered isn't valid or invalid input.
So let's define this validate function really quickly.
I'm going to flip back over to my code editor.
I'm going to go back down to the very bottom of the file.
So this is not a function we are going to define inside of our component class.
Instead of going to define it outside the class right above the export default statement.
So I'll say Konst validate and this thing is going to be called with a form values object form values
is going to contain all the different values that exist inside of our form.
So as we saw just a moment ago when we type in some input here and then submit this form we saw that
we had this form values object right here with a key of the field name title.
Again that is title right there because we specified the name title on the field and we have a key value
pair of description.
Again we see description because we provided a name of description to our second field.
Now we see the appropriate text for each property.
So this exact same object is going to show up inside of our validate function right here.
So now this is going to be our opportunity to actually validate those foreign values.
All right let's flip back over to the diagram and walk to the next step.
So inside of validate we're going to essentially check to see if a user entered in any valid values
for those different inputs.
We're going to do that by inspecting the form values object.
This series of inspections that we're gonna do here to see if a user entered invalid input is going
to be very basic.
Essentially we just have to write out if statements will say if there is no form value is not title
property.
So that would do a check to see if a user entered in a title or not if they did not enter in a title
form values that title would be undefined.
And so the body of the if statement will only Rayyan if the user did not enter a title.
So that's how we're going to do very basic validation.
So after we do a series of statements like that where if a user entered an all valid inputs then all
we're going to do from this validate function is return an empty object.
When we return an empty object that essentially tells redux form that nothing is wrong with our form
and it's completely valid and the user can submit it if they want to.
Now if a user did anything incorrectly then we're going to return an object.
And this is where things get just a little bit complicated.
So we're going to return an object if a user entered in anything incorrectly for each invalid field
that the user entered.
We're going to put a key value pair on an object with the name of the fields that the user entered in
incorrectly and an error message to show to the user.
So for example if the user entered in an invalid title we're going to create and return an objects that
looks like this over here.
It's going to be an object that has a title property and it has a string containing the error message
when redux form sees this object right here that has a key value pair inside of it.
It's going to say oh I see that there is a value inside this object that means that the user must have
done something incorrectly number.
If we return empty object from validate redux form assumes that everything went OK.
So it's only when we put a key value pair into this object that redux form realizes that something just
went a little bit wrong.
All right let's write a little bit of code for this step right here.
So back inside my validate function at the very top of it I'm going to define an object called errs
like so.
So then inside of validate we will have a series of IF statements each IF statement can check a different
form value property.
Now again if a user did not enter in a title I'm going to say heir's title is some error message like
you must enter a title like so then we can write out another statement to make sure that the user entered
a description as well.
So I'll say if there is no form value description property let's say ersatz description equals you must
enter a description.
And then finally after we create that object we need to make sure that we return it after adding on
all the appropriate properties.
So at the bottom of validate I'm going to return errors like so OK.
So that's our validate function right there.
That's all we have to right now to wire this thing up to redux form and handle any error messages that
need to be shown to the user.
Let's take a quick pause right here and we'll handle that process in the next video.