-: Our signup form is coming along pretty well.
We've got a form at least put on the screen
with the correct email password
and password confirmation fields to display to the user.
And then once the user clicks on the submit button,
presumably it's gonna try to submit the form.
Now remember,
we need to do kind of a two stage validation here.
First, we need to make sure
that the user has entered a password
that matches the password confirmation,
and that's a validation
that we're going to do on the client side.
Once we have validated that the user
has entered correct information,
then we can send it off
to the server and attempt to actually create the account.
So in other words, whenever a user submits our form,
we kind of want to hijack that event, so to speak.
We kinda wanna say,
"hey, before you actually really submit this form,
let's validate all the different inputs in here
and make sure that the user has entered kind of correct
or relevant information to create this account."
So luckily, a Redux Form makes it really easy
to handle validation on the client side
for any form that we might create.
Let's take a look at a diagram
that's gonna help us understand exactly
how Redux Form does validation.
So inside this diagram, we've kind of the process
by which Redux Form does validation.
On the top left, we've got our actual form.
It has the email password and password confirmation.
And notice in here that I've got some just inputs
that shows some kind of default text to display.
The email is test@example.com, password of abcdefg,
and a password confirmation of 12345.
So note in this case that the two passwords do not match.
And so we'd really consider this form
as it stands right now to be invalid
or something that should not be submitted to the backend.
So whenever a user makes any change to the form,
say they enter a key or they click into an input
and then click out of it,
or if they click the signup button itself,
if they try to submit the form,
Redux Form is going to automatically try
to validate these inputs for us.
The way that validation works in Redux Forum is as so.
Redux Forum is gonna take all the different fields
and all of their current values, and it's gonna send them
to a function that we are going to create called validate.
So that's this kind of validate box over here.
This is a function that we are going to make ourselves.
Redux Form is going to automatically
take all the different fields
off of our form and pass 'em to validate.
Now, this is very important.
The object that gets passed to validate
by Redux Form is an object where the keys are the names
of our fields and the values are the current inputs
inside each of these fields.
So in this particular case, because we have an email field,
a password field, and a password confirm field,
the object that we get to validate against has keys,
email, password, and password confirm.
And then they've got the matching values
to whatever's currently inside of our inputs up here.
So here's how we actually do validation.
You know, we're getting the data
inside of the validate function here.
What we're going to do is we're gonna create a new object.
So we're gonna create an entirely new object.
This object is gonna have a couple different keys to it.
It's gonna have a key email password, and password confirm.
So we're kind of making an object
that's gonna look just like this.
But here's the trick.
The value of each of those keys is a validation message
to show to our user.
So for example,
if a user tries to just fill out an email here
and then passwords that do not match,
so that's as is the case right here,
we would return an error object that has two keys,
a key password and a password confirm,
and then the value for each of those keys
would be something like,
"hey please enter matching passwords here."
So essentially what we wanna do is just return an object
from this validate function that has a key
of the field that we're talking about
and a value of the message that we wanna show to the user.
Now, if a user tries to submit the form
and there are no errors, like they did everything correct,
all we have to do in that case is return an empty object
and that tells Redux Form,
"hey, everything here looks good."
"Don't need to worry about doing any validation."
So with this knowledge in mind,
let's try putting it to application in the next section.
I'll see you there.