Form Validation in Vuelidate

[00:00:00]
>> Now what we're going to do is review some validation. So what we're gonna do is we're gonna go into we're clear the server. We're gonna go up a directory. We're gonna go CD, food app dot and then it's gonna be the final validation and I am going to start up a local server.

[00:00:29]
So yarn Dev, and I'm also gonna open it up, so I'm gonna open up a new tab code now if we go back here, we're gonna talk about vuelidate. So, let's finish up the cart. We added the cart to the link in the menu, and then we're gonna review validation In vuelidate.

[00:00:58]
The way that vuelidate works is that it kind of connects to V model, which is really interesting. It gives you some computed properties. So it what the library does is not just like hand you like, okay, everything's validated for you. What it does is it gives you a few things that you can do that.

[00:01:15]
To check some things and then you show what you need to do to show and hide things. So if we go to our Nuxt Food App that's online and we look at this piece, what we wanna make sure of is that we can't add to the cart unless some add on was added, right?

[00:01:38]
We wanna make sure that the user does that. So if I add to the cart, we're gonna pipe through that app toast. Remember, we had that app toast component with a slot. Where we could say like, okay, anything, any content that we have goes into the slot so instead of saying, order submitted and, go to checkout restaurants, we can say, please select options and Add Ons before continuing.

[00:02:03]
And so now I can add something here and add to the cart, and now it's the order added. And that cart adds to that. So let's look at these. Let's look at the validation here in the vuelidate. I have this article called form validation and under an hour with vuelidate, and in it, I have some like really basic examples if I open this really basic example in code sandbox, and this is, vucli, not Nuxt, we are importing vuelidate and view use vuelidate.

[00:02:41]
But if you wanted to do this and next what you would do is create a plugin that says import vuelidate from vuelidate and view, use vuelidate and I'll show you that in a plugin in just a moment. And now if we have this app, what we're gonna do is we're gonna import required from vuelidate validators.

[00:03:02]
And there's a bunch of different options. There's like min length and you can, state a bunch of different things that you're looking for in that, in this case, all I'm looking for is required. So I have. Data return name is an empty string. And typically, what we would do is V model and that has a relationship with name.

[00:03:21]
But instead of saying v model name, what I'm gonna say is $v.name.$model. And what that allows me to say is look in another a new area called validations. For this name property, if I open this in another window, what I will see here in view is typically, we have this name, if I write like.

[00:03:53]
Sarah. I'm given my name as Sarah. But what I'm really attaching to is this computed object. In this computed object, we've got this V dollar sign, and it has a bunch of things that it's going to let you know. So that first V object is gonna tell you a bunch of things about the whole thing.

[00:04:12]
So anything in that form, anything in that component, a whole thing. So I find out if it's dirty and dirty and vuelidate means if I've touched any inputs at all, then it will be true. Do I have any errors that's false, and a few other pieces here, but that name that name goes into this one in particular.

[00:04:35]
So if you have multiple fields, so let's say you have a form and a component with just tons of fields, this first v dollar sign is gonna be everything. And then that name is gonna be just the things that you're looking for here. You can see we have the model is Sara.

[00:04:52]
As you you might have met and notice, and then we have weather we have errors are dirty. And you could see how this would be really useful especially if you did something like the model dot lazy. We talked about those modifiers. So if we're writing things in forms, and we wanna show something conditionally, you can access that piece and show conditionally based on those pieces.

[00:05:18]
Some things and you can, have it wait to validate until the model lazy don't do it until they're done typing because it is kind of annoying when you're filling out a form and like the validations going off like, your name isn't allowed to be one character. I'm like I'm not done yet.

[00:05:34]
[LAUGH] So it keeps that in mind as well so basically you're able to build, these kind of complex experiences where you say something like, this field is required like I can. I'm really just manually writing that right I'm going into it. It's very flexible this way. We're going into.

[00:05:59]
In here and I have that input. But I also say, have these like this is required that I show conditionally on a V if or if it doesn't have the right min length. So you can see, I have I'm capturing some form responses here. And I have I'm bringing in required and min length here.

[00:06:19]
And so I'm saying like, your name is required, the min length is two. And then you can show these different errors, depending on the errors that you have in the app. So it's pretty powerful for building these conditional pieces of logic. So if we wanted to do that on our app, and we totally do, because we don't want people to be able to like order tacos without saying they're a carnie Asada taco or a pojo taco or something like that, then we can go into our ID, our underscore ID page and we can.

[00:07:01]
I'm in the wrong one. Let me open up the right one. This is the final validation. So if we go into the components. And we go into the pages, item ID What you'll notice here is that instead of the V model connecting to item options, we're connecting to dollar sign item options model.

[00:07:28]
And if we go down here we have the import required from you vuelidate validators and then I have this validations object where I'm saying okay for item options and item Add Ons, those are the two things that we wanna make required. And I'm making them required. So we've got item map, item options and item Add Ons.

[00:07:48]
You have to name them. It's kind of like watch where you have to name them the same thing as the model that you're looking for. And so there we go. For each one of these for the add on we have, we modeled the dollar sign item Add Ons .model.

[00:08:05]
And here dot model if we look at this in our nuxt food app if we do our local host and we go to our Soup Dumplings. We can see here in our view area, we can like go into the whoops. In our view area in side the next page item ID you see all of these pieces of the data that you're used to, and then you see this V dollar sign.

[00:08:45]
And you can see that main area that we said, dirty is false because I haven't touched it yet. And invalid and we're like checking for these pieces. And then we can also dive into each one in specific the current item. And the combine and all of these kind of pieces off of that.

[00:09:08]
So then what we wanna do is we don't want to submit the form unless we're okay. So what we wanna do is we wanna have this new thing called errors equals false. So we wanna say there are no errors, yet. But when we hit that- we're not validating anything until someone hits that add to cart button.

[00:09:31]
As soon as that hits that add to cart button we are going to check if something is invalid. And if anything, if there's errors for add on air or if there's errors for option error, and then we're gonna ask like, if there's errors for Add Onns or option error than this.

[00:09:49]
This dot errors equals true, but if not, this dot errors equals false and cart submitted equals true and you can go ahead and store this dot store to commit Add To Cart. So we're keeping it from adding like being able to add to the cart until that's done until we have validated that that exists.

[00:10:10]
So now if we go back to our code pen We have now reviewed validation, [LAUGH] cool.