All language subtitles for 016 Validating via FormState_en

In the last section, we managed to use our form key right here to get a reference to the form St. instance

that belongs to this form.

Once we had that reference to the form states, we then called the reset method on the form states and

we very clearly saw that that reset every one of the inputs within our form.

So if we reference back to our diagram that we were looking at a little bit ago over here, we've clearly

accomplished part number one of this.

We have direct access to the form St. instance that represents our form on the screen.

So now we can move on to part two of this, which is to tell it to validate all the text form fields

that are nested underneath it to do so.

Let's first take a look at some documentation and get a better sense of how we're going to use the form

states to tell it to validate all the text form fields that are inside.

OK, so I've got my form state documentation up, I'm going to go down to my method section, so in

the last section we called Reset, there it is right there.

So we're looking at the same section.

And right underneath that, you'll notice that there's a method, another method called validate.

So if we call validate, that's going to apparently validate every form field that is nested within

this form.

And then if they are all valid, if all those foreign fields are valid, then the overall validate call

that we're going to make is going to return true.

Otherwise, it will return false to indicate that one of our inputs has some invalid input inside of

it.

Now, when you look at this method right here and the description for Validate, this is a function

that is tied to our form state class, you'll notice that the documentation doesn't say anything at

all about how this validation is actually done.

In other words, how are we going to make sure?

That the text form field that represents our password actually is a password, like we need to make

sure that whatever gets entered into this field right here specifically looks like a password.

And so maybe it has to have a certain number of characters.

And likewise, we need to make sure that when this validation step occurs, this text form a field that

represents the email has to look like an email.

So it has to have like, you know, an at character, at symbol inside of it or something like that.

So the documentation here is kind of lacking in that regard.

The documentation is not telling you how you set a validation up.

And in fact, in my opinion, all the documentation, if you're not super clear on how you set up this

validation stuff.

So rather than trying to reference any documentation, I'm going to show you a diagram that's going

to make this entire validation flow a little bit more obvious.

OK, here we go.

All right, so here's what happens right now, we're inside of our login screen or more precisely the

login screen states, we've created our global key, which represents or kind of references the form

state objects.

And as we just saw, the form state has a method tied to it called validate.

So that's the documentation we're just looking at.

That's the validate function right here.

So when we call validate, here's what happens, they validate function is going to look at all of the

children of the form widget and it's going to find every single instance underneath the form of a text

form fields.

And so they validate function is going to automatically find this text form field and this text form

field.

Then on both of those text form field instances that validate function right here is going to call a

function that you and I can optionally pass into the constructor of the text form field called validator.

The validator function right here is what is actually responsible for looking at the value that has

been entered into the text form field and saying whether or not it is valid.

OK, so this validator right here might seem a little bit confusing, so let's go make one quick change

inside of our code editor and you'll see where this validator thing comes into play.

So I'm going to go back to my code, Ed. I'm going to find my email fields, here is the text form fields

and as an additional property to the constructor.

I'm going to pass in a function called validator.

Or a property called validator to know a function to the validator property.

There we go.

So now this function right here is going to be automatically called any time we call the validate function

on form state.

So now inside that validator function, we're going to have the opportunity to inspect the value that

was entered into our text form field.

And if that value is valid and we like it, we're going to return nothing.

Otherwise we will return a string that represents the error message that we want to show to the user.

So essentially on this validator function, we're going to return null if valid.

Otherwise string with the error message if invalid.

OK, so hopefully now that makes a little bit more sense, so when we call validate on the form St.

Instance, Validate is going to find all the nested text form fields.

It's going to call the validator function on each one.

It's going to collect all those things together.

All the responses are all the return values from these different validator functions.

And it's going to say, hey, are any of you not null like did any of you have an issue?

And if there is an issue, then the validate function back up here belongs to the form St. instance

is going to say, oh, sorry, no, that form is not valid.

Like one of these fields is wrong and the user is going to have to go fix it.

All right.

So that's the behind the scenes look at what is going on with this validate stuff.

So let's take a quick pause here.

We're going to come back the next section and we're going to write out our validator function for both

our email fields and our password fields.

So quick break and I'll see you in just a minute.