Instructor: In the last section,
we add in a little helper to make sure
that our password confirmation is actually getting validated
against the password that the user entered.
We're still a little bit short on validation messages though
because our users can actually get away
without entering an email, password,
or password confirmation at all.
So we need to make sure that when a user clicks Submit,
or when they start entering text in here,
that they actually are entering some text
and aren't leaving these inputs blank.
So to handle that, we'll add another validation rule
to our validate helper down here.
And this one's gonna be a little bit more straightforward.
(key clacking)
So all we want to check here is to make sure
that the user has actually entered some text
for each of the form props that we have available in here.
So we can add in some simple logic
that looks a little bit like this.
We can say if formProps.email.
And then we're gonna say, if this does not exist,
then say errors.email, Please enter an email,
and then we can repeat the process twice again.
Password, errors.password, please enter a password.
And finally, if formProps.passwordConfirm,
errors.passwordConfirm,
Please enter a password confirmation.
So for each of our different fields that we have in here,
if they have not, so note the exclamation here,
if they have not provided this property, you know,
if they haven't typed anything in,
then give them the error message
that says you need to actually enter some text here.
Now this is definitely,
we've got some pretty repetitive code here,
and so this can definitely be condensed up a little bit,
or use a little bit of a recur, or excuse me,
iteration to check each of these different properties,
and make sure they actually exist.
But I'm gonna leave that kinda as an exercise to you.
This would be a great use of the, for each helper,
over the object, or you can map over it, or reduce,
or whatever you'd like to do, just to check each field here,
and if the field or property name does not exist,
just assign an error message to it.
So definitely something that can be done to kind
of dry up this validation logic here a little bit.
Now we're validating each of these fields,
but we still have to display an error message.
So for each of our different field sets,
for our email, password, and password confirm,
we're gonna make sure that we duplicate the same logic here
to say if the field has been touched,
and it has an error, then display that error to the user.
So I'm gonna duplicate it up to the email field set.
I'll say email.touched && email.error
&& div className error,
and this div should contain the text, email.error.
And then one more time, we'll duplicate that
down to the password confirmation as well.
passwordConfirm and passwordConfirm.error,
place a div, with a class name of error,
and it should contain the text passwordConfirm.error.
So again, this is a definitely,
you're probably starting to see a pattern here.
This is really another location where we've kind
of got three of these different field sets,
and they're completely duplicated,
nearly completely duplicated three times over.
The only difference between them is
that the two password fields have a type of password here.
And so this is definitely another location,
where we could probably get away
with approaching this in a much more clever fashion.
So perhaps create an object
to describe each of these fields,
and then do a little bit of iteration
over the object to produce each of these field sets.
That's definitely something that we could work towards.
Alright, we've got all of our validation logic in here.
Let's now test it out inside the browser.
So I'm gonna flip back over,
and you'll notice that right away,
we've got Please enter a password confirmation.
This error message showing up here,
which is making me think that we might have not quite
gotten our validation logic just right.
So we have passwordConfirm, and we did not, actually,
I made a typo here.
I didn't actually check to make sure
that the passwordConfirmed was touched.
So I'm gonna add on passwordConfirm.touched.
Now when I refresh, okay, the error message goes away.
It definitely shouldn't be visible right away.
Only when a user actually clicks
into the field, and then clicks out,
do I wanna start showing that error message.
So I'm gonna refresh, make it go away.
It looks like each
of our fields are working as far as the touch goes.
And if I start to enter in, say an email,
and then a password, passwords must match, there we go.
But then if I go back and delete the email,
all of a sudden it tells me again, Hey,
Please enter email address here.
So exactly the behavior that we'd wanna see
out of a form like this.
So this is looking pretty good.
Definitely has the validation logic that we're looking for.
Now, the next step inside of our signup form is to make sure
that when a user tries to submit the form,
we take the information from the form,
and actually submit it to the backend.
So let's start working on that inside the next section.