Hey there, what is up? This is Flutter Mentor
and today we're going to learn how to validate TextFormFields. This is a very simple UI,
just has a submit button to submit the form, which is just a two-field form. And
it's all wrapped within a Builder() for SnackBar purposes. And our goal will be to
create a validation method that only accepts names with over three characters and an age
that is over 18. We're gonna do it very simply, just so you can understand how the
validation works. And let's get to it. The first thing we're going to need is a form key.
I'm going to type in the more extensive way and also show you the shorter way. This will be it.
If you want to make it shorter just type in this instead. Either way, it will work the same. It's
entirely up to you and then you just wrap it. You could wrap the padding or the column, it would
be up to you but I'm going to wrap the Column (Padding*) with the Form widget. And the only thing you do with the
form widget, is you give it the key that you just created. Like so. And now let's actually define the
kind of validation that you want to happen. And by the way, this only works with TextFormField.
If you use TextField you will not have the validator property. TextFields are just used
for simpler use cases. In the TextFormField, you would use the validator property. And
this property takes an anonymous function that carries a value. And then as you can see, it's
already giving me squiggly lines. That's because this function has got to return something of type
String. And that String will be the message that you want displayed underneath the text field,
alongside your error. Which would be your error message. Now the order in which you define the
rules isn't too important. Sometimes it could be depending on what you use for validation, but
either way, when you want it to validate you need to return null instead of a String. That's how you
tell the validator that that's what you want to be accepted. I usually use return as the first case,
but you can use it as the last case if you want. In this case, for the full name I'm going to
type in "if value.isNotEmpty && value.length" is more or equal to three, or it could just
be is more than two, then I would like to return null. Which means we're a go. Accept the input and
let's go to the next stage. But if this isn't the case, then let me set up some rules. Else, "if value
.length" is less than 3 and "value.isNotEmpty"... (and you'll understand why I put in this just now)
then return "No way your name is that short". And this is just a joke, I know people who have two
characters in their name, I'm just messing around here. Else, and this is just in any other case
scenario, return "Please give us your name already". And the reason I added the "&& value.isNotEmpty"
here, is because I want this to display if the user tries to submit something completely empty.
But it's basically just to show you you're going to have multiple different rules for different
situations. And now let's do this to the age TextFormField. Once again, use the validator property.
Same thing here, an anonymous function... and now, to change it up, I'm going to return null as the
last case scenario. In this case, "if value.isEmpty"... (and I'm just trying to show you guys different
ways to do this) Return "Please enter your damn age" I wanted to create a validator that was a little
bit impatient because I feel that validators are just way too nice. And now, in this part, we're going
to focus on checking if the age is over 18 or not. Now, you got to remember that, whatever the user
inputs on the TextFormField is a String. And what we want is to measure the value of an int.
So what you need to do is "int." - you can use parse or tryParse, tryParse is usually safer, but
either way you should be fine - and then you input the value. And then all you gotta do is say if
this value is lower than 18, well in that case return "This ain't for kids under 18". And as you
can see, the squiggly line still shows up because you just have to end it in an else statement. So
there are no open possibilities and, in this case, I just returned null because I want to accept all
other case scenarios. Of course this could be more complicated. This could have Regex, I could say
I'll only accept if it's possible to parse it into an int, etc. I'm trying to keep it simple. And if you
think we're done, you would be wrong. Because over here on the TextButton, all the onPressed does is
a Snack pretty much. You click it and there it is. So, this isn't what we want. We need to create
a logic to first check if it's validated and then, if it is, it can run the remaining code. And
it's not complicated at all. All you gotta do is type in "if", and basically, what you need to do
here is access the "_formKey.currentState .validate()". Now this returns a bool and if it
validates the form it will be true. So, what you want is to check if it's false. If it is, then you
just return here. In this case, I don't want to run any of the other code. So, I just do that. But
the submission logic is something that will be specific to your project. In this case, if it
doesn't validate, it doesn't run the SnackBar. If everything's working, the SnackBar shows up.
That's the logic behind it. Let me restart the app, and everything should work just fine. If I submit
it like this, there you go. The two errors are right there. As you can see, "please give us your name
already" and "please enter your damn age". Both in case it's empty and both used in different ways.
Now let's type in just two letters and say we're 15 years old. Let's see what happens now. There it
is, "no way your name is that short" and "this ain't for kids under 18". Everything seems to be working
properly. Now let's do it with three letters and make this kid 18. What would happen now? We're validated
and we got your name and age. So, personally, I would say we nailed this one. Thank you for watching,
please drop a like if this helped you. Subscribe if you want to keep on learning Flutter. That's
it for now, this is Flutter Mentor aand out.
