So, right now, I have to add this field again, right? You have to add this schema for the buzzword confirmation, and you have to pass it, put it up there here, which can be tedious, right? You are, again, there is friction here. VValidate removed the vmodel friction, but now there is a friction and adding the rules themselves. You are going back between the template and the JavaScript just to add a few things.
So, VValidate does something really interesting, which you can use object schemas. So, let's say we have the entire schema for the form. So, you can define the whole thing at one go. So, something like this. Then you can list your fields. We have an email, which is a string. It is required, and yeah, I forgot that it is an email. Let's repeat that for the buzzword. This is a string. It should have a minimum of six, and it is required. Let's add the buzzword confirmation, and it is a string. You can add a minimum rule here or not. It doesn't really matter, but it is required because it always has to match the buzzword, right? We'll see how to do this in just a minute, but for now, let's just ignore this field and remove these. We no longer need them, and you no longer have to declare any rules on each field. You can completely eliminate this, and pass the entire thing to your form, so to the form component. So, it's a validation schema, and we give it the entire schema, and that's it. You no longer have to worry about what each field needs to have, and this makes it really easy. Now, you just add whatever fields that you want, and just go down there and add them, add the rules for them in just one place.
So, let me remove this and see if it still works as it is. I should also remove this. I click submit. It says email is a required field. Buzzword is a required field. Once I start typing some stuff, and it still works the same thing in the exact same way, but this is actually a lot nicer, and as a creator, I really recommend you that by default, go this way. Always define a validation schema on your forum, and don't worry about the other fields. It will save you a lot of time, and it can really scale really well, but the other options are available for you. If you are having difficulty with dynamic fields, for example, maybe you have fields that may exist or not, so you'll have some difficulty defining a single schema for them, right? So, yeah, maybe use this if you have like a fixed form that doesn't change, although there are ways to do this for the schemas, but yeah, by default, this works for, I think, 80% of your cases, and you still have the other ways if you need more.
So, let's add this field called confirm buzzword, right? It should have the same name as the error message, and we should add it here. So, it is a string, and it is required, and since it should always match the buzzword field, we don't really have to say it has to be a minimum of six. That's just repetition, but we haven't really tied them together, so how can we do this? Well, IAPT has a really nice way of referencing other field values, so you can do something like you grab something called ref from IAPT, which is not to be confused with ref, which is from Vue.js, so both Vue.js and IAPT have the same method here. Be careful not to confuse the two, because that will happen, and then you can say this buzzword field can only be one of, and you give it a list of matching values, and we can give it an array, and that array will have a single value, which is a ref of the other field, which is the name of the other field, which is the buzzword. This is the IAPT's way of doing this. It can be a little bit confusing, but it works really well, so then you can add an error message, right, because it will just say the value doesn't exist in the list, which is not really helpful, like what kind of list are we talking about here? So, the message here is the field doesn't, does not match the buzzword, or the confirmation, to be more exact. Yeah, the confirmation does not match the buzzword. So, this should set it up for us, so let's try this again. I'll click submit. Of course, nothing really submits. It's angry about everything, so let's fix that. Let me write something predictable here. Okay, so once I type something different, it says it doesn't match it, but once I match it exactly, it just goes away, and we can submit, and that's it. You can reference other fields for other purposes using this way. You can actually have, for example, for some reason, you would have an age field, maybe, and you can actually say it is a number. Sorry, you have to import it from IAPT. Again, with IAPT, you import what you need. This is the best practice of doing it, which should keep your bundle size as small as possible, because, yep, it's kind of large, but even if you use the whole thing, it shouldn't really, it should have also like a small impact on your bundle size, but yeah, you should always keep it to a minimum, like use only what you actually want to use. So, there's, I think, greater than in there. Yeah, they have more than, and you can reference another field. Like, it has to be, like you can make it 18, for example, or you can reference another field, like other fields. So, this RIF thing is really useful if you want to have this relationship of validation between your fields, and it's really straightforward. You can, it's really easy to read. For example, I'm just, I'm a developer. I'm like your teammate, and I just got into this project, and I have this form that I need to add a rule to it. So, what I will see down here, I will notice you are using something called a validation schema, so I will go to that, and I can see, yeah, email is a string email required, and if I needed to change that, I can just remove the required part if I want to. It's really easy to maintain, is what I'm trying to get at. So, yeah, this is why IAPT is really encouraged for you to be used. It's own validation library, but the integration between it and VValidate really makes a lot of sense, and this actually one of the, I would say, lessons or things that got, that VValidate took from Formic, for example, which is their library, because Formic actually uses YAB a lot, and in their official examples, so it made a lot of sense to just do the same, because YAB is a very mature library, has a lot of users, very well maintained, has TypeScript support, there isn't really a point of having our own rules just to have like a single solution. So, the best way here is to impress multiple ones. Sorry, there is a question. Yes, this is actually documented. You can find it in the documentation, in the validation guide. It doesn't, of course, again, VValidate doesn't delve into the details of the YAB library. If you want to learn more about it, go to their own documentation and learn more there, like localization. VValidate doesn't handle localization if you are using YAB, so you may have to do this on your own using YAB itself. So, check their documentation out, and yeah, I'm using this in production, and it's really, really handy, and we have really complex fields with really complex rules, and yeah, it works really well. Okay, let me check my notes. Okay, we are handling the submission right now. Typically, you get these values, right? You get the values, and you submit them to your server. I'm just alerting them here on the window, because I don't have a server set up right here. Maybe I should have, but yeah, I don't. Now, let's talk about something called form actions. So, what if after we submitted the field, we want to reset everything? This is a very common use case, right? The user submitted, and then the electronically detected the that's how I guess online talks slash workshops work over zoom. But yeah, honest mistake. Anyways. Yeah. Let me just gather my thoughts. Yeah. So for matches, yes, you are going to like, it's very common that once you took the data from the user, that you are not, you're going to reset the entire thing, right? It doesn't make sense in a signup form because usually take them to, their dashboard and that's it, right? You take them to their dashboard or to their page, or you tell them, Hey, your account was created, show them a different screen. And that's it. But again, this can be applied to this example as well. So let's say after the user submits this form, we want to reset the entire thing. No, we can do this in the submit function itself. You can actually do this right here. And it is actually the most like the most place that makes sense because where else are going to reset, right? You're mostly going 80% of the time you're going to reset after submission. So there is a second argument that V-Validate gives you. It's called actions and these are called form actions. So you can do various actions on your form. One of them is to reset the form itself.
Comments