All language subtitles for 017 Triggering Validation_en

In the last section, we spoke about how calling the validate function on the foreign state object finds

all the different text form fields and invokes the validator property that has been assigned to each

one of those text form fields.

So in this section, we're going to define our validator function on both our email field and the password

field as well.

So when the validator function is called, it receives as the first argument, the current value of

the text form field, so we can receive that as an argument to this function as simply something like,

I don't know, value.

And then since this is a text form field, that argument that comes in here is always going to be a

string.

And so optionally we can market as a string.

Otherwise, if you hover over it, it's going to say, yeah, this is you're going to receive a string

here.

And what the heck, I'll just market as a string for fun.

It's now inside the validator function, we need to look at the value of this thing and if it's valid,

valid, and if it looks essentially like an email address that we're happy with, we're going to return

nothing or return null.

Otherwise, we're going to return a string that represents the error message or something to tell the

user what is wrong with the value that they just entered.

So for you and me, just to keep life really straightforward, really simple.

You and I are going to say that an email address is valid if it contains an at symbol.

So if someone enters something like that for the sake of this application, this is a valid email for

us.

OK, we're just going to check to see if there's an at symbol in there.

If it has it great, that's a valid email and we're happy with it.

So inside of here, we're going to see if.

Value contains at and specifically, we want to find the case in which the string does not contain and

assemble, so I'm going to put a exclamation right before it to flip the value.

So now we're saying if.

The current value.

Does not contain an act then we consider this thing to be invalid and we need to return a string that

will tell the user what's wrong here.

So if that's the case, I'm going to return a string that says, please enter a valid email.

Like so.

Now, technically, we do not need to actually put in a return null case if we don't return anything

inside of here than by default, null is returned so we can really just leave this as is.

Or if you want to be really explicit, you can add on a return call at the bottom.

It's totally up to you, but I'm going to leave it off.

OK, so that's our validator for the email address, I am going to clean up the comment here.

And now we're going to go down to our password as well and add in a validator for that text form, feel

to so on my password fields to find my text form fields, I'm going to pass in a validator that's going

to be called.

With current value of the field and we need to look at this value and decide whether or not the user

has entered a valid password, and so, again, we're going to set up a arbitrary requirement here.

We're going to say that a password is valid if it has at least four characters.

So we're going to say if.

Password length is less than four or seven, not password value length, so if there are less than four

characters in there, then we're going to assume this is not a valid password.

And we'll return a string that says password must be at least four characters.

Like so.

Oops, forgot.

Come on, let's fix that.

There we go.

OK, so we've now defined our validator functions on both of our text form fields.

Which means we can now go back to our form state objects and call the validate method on it.

Sit down inside of my.

Submit button on press handler whenever a user presses this thing, rather than attempting to reset

the entire form.

I'm going to instead call validate and then to figure out whether or not this thing is actually working.

I'm going to put that inside of a print statement.

So if our form is valid now, we should see true printed out at the terminal otherwise that the form

is not valid.

We should see false printed out instead.

All right, so I'm going to save this.

We're going to do our refresh and we'll test this out in the emulator.

All right, so moment of truth.

So first off, as everything stands right now, form is not valid because our email does not have a

character in it and our password field does not have four characters.

So if I click on Submit, I should see something that indicates, hey, form is not valid and it cannot

be submitted.

So if I click on submit, I see in my terminal false printed, which means the form is not valid.

And I also see those two strings that we added inside of those validators appear on here as well to

indicate to our user, hey, something's wrong with the form and you need to fix it up.

So now if I enter in what we consider to be a valid email, which is anything that contains the symbol.

And then a password of four characters or more and then click submit again, our form is now valid and

we see true reflected down here to say, yep, form valid and you're good to go.

And then, of course, if I revert back to an invalid state where I've got to say one letter password.

It tells me, hey, not valid anymore, any of these four characters.

OK, so that's it, that's form validation.

Again, key thing to remember here.

When we want to access our form, we have to create that global key.

It's going to be tied to our form state object and then on the form state object.

We've got this validate function when we call validate, it's going to automatically find all the text

form fields that are nested inside of our form and attempt to call the validator function associated

with each one.

All right, so we're not quite done yet.

We have successfully validated those inputs, but we have not yet had the ability to somehow, like,

get the actual value out of them.

Yes, we are passing the value to the validator function, but that doesn't quite seem right.

So now that we have the ability to validate this thing, I now want to make sure that we also have the

ability to retrieve the values that the user entered and, I don't know, do something with them, you

know, say, hey, you're not assigned and or whatever else.

So let's take a quick break and we'll finish up with that in the next section.