Vue.js Validation using Vuelidate

[Music] hello guys welcome to goodbye nachi today i will be talking to you about vgs validation using viewleydate now why validation validation is an important aspect of web development right now it's a way for us as software developers to guide the users towards what we want them to provide in order for our applications to work exactly how we intended them so take for example you are expecting an email address well the user decides to provide something else and it's all goes downhill from there right and so validation is your way as a developer to guide the user towards providing inputs that is required by your application and in the way that it is so today um i will be introducing the beauty library vgs there are quite a number of other libraries out there and some component frameworks actually come with a validation view trading so you would be able to do stuff like that but if you write code with your html css and um you don't have the luxury that component libraries like guilty five provide then you must have a look at bill gates it's one of the best uh validation libraries out there and i think it's watershed so they actually try to bring it in the project it has tons and tons of already built in validations and also provides opportunity to write some custom ones um so yeah i will be taking a look at you today today so um let's dive right in yep so right now we'll be creating um vgs vit project with still in css we would also be installing css forms and also the viewer data library itself you want the view.js option and if you're familiar with typescript or prefer uh plain javascript then you can you can choose between two but i would just go with the with the first option so we'll get into the demo project we just created and run npm install nice and in order to see if it runs uh we would just simply run npm run dev but right now our major concern is to actually install um css forms and this should be pretty easy to configure we still have some uh part of the configuration to do within the project but i would also be saying this uh in a moment so we absolutely need to win css forms like this so this installs the village core library and also the validators [Music] so here we have our futures and with projects configured with tailwind css still in css forms and we already have the view the date library also um installed with npm now here's what i'd like to do i like to have my code base here with vs code and uh with the mac you can just split this um to have your uh your browser here somewhere by the right and your code base by the left so you can immediately see whatever changes you you've made of course you can do this if you have multiple monitors and stuff like that but um yeah i just like to have this especially for small projects um so i'll quickly walk you through what i did um while i post video i from the index.html we have um a link to uh the railway font i just really like it a lot on um on some of my web projects so i i thought to bring it in we have this demo here which is um the title of our project and which is what is here in the browser and we also have some configuration for stillwind as you would see here now you can always find this in the tailwind css documentation um how to do this stuff but uh i made a couple of changes um first of all adding um this various states that are um html elements can possibly be in active hover disabled and you will see how it all works here but um it's kind of what gives this uh form for example this field uh this blue um ring around it i guess you could call it that anyway um so yeah it's uh these various states you can pretty much we tell when determine what should be uh visible on your screen when you are viewing for example these kinds of applications and also um we have we configured the two wind css forms don't forget to do that while you install it it's also part of the table css documentation and a link will be included with this video um also we created an index.css file and uh this is pretty much basically what you need for for tailwind css to provide your own css classes using tillwind of course as a foundation and we have this uh text fields uh css class and it's it's pretty much what uh is actually allowing this to be disabled right there to work right now and we also have this text field error which we would use to display a field that has some problem as far as viewing date is concerned which actually shows that our validation works it's not any use yet but i will be showing you this in a moment and after you're done defining your index.css class then you need to uh this file i mean you need to import this into your main.js and that's pretty much all you need and we have here in the this components folder we have the village demo.view file it's a single file component which is responsible for what you see on your screen we have this nice separation that gis has for templates which i guess you can fit in everything html here and then we have scripts which is for basically everything javascript and you have styles for css probably scoped in case you want to define something that would only be uh used in this component and i just gave it a name village demo uh you can call it anything you want but um i guess it makes sense right and inside this html we have divs and this is what is most important to us at the moment we have this uh fields about six of them for our demo we have the first name last name all the names age email websites and we should be bringing some validation to this field for now uh you can type in whatever you want it pretty much doesn't care this stage and the submit also doesn't work at the moment so we would need to uh bring in uh the validate validations to make sure these things make sense and they're exactly what we expect and we can also when we hit submit we're not going to be calling any server side today but uh we would be checking to make sure that uh it's ready to actually get to the server side which is basically what we are doing in this tutorial and that's it i guess we can get to bring in view lead now so we absolutely need to define a data section of our single file component and it's an object and for now prefer to actually install this in person objects it's gonna have a first name um i would just use underscore here no problem and we have last name on the names of course each email websites yeah and this is enough and actually uh what we should be doing is giving our v model to this the input fields of course now this is still vue.js at this point and not view the date but we absolutely need to make this available personal first name and i'm just going to copy this and good paste this is going to be last name paste let's learn about the names paste h paste this is email and paste websites um oh there oh perfect and now when we uh i'm just going to add uh something here to to kind of clear uh these fields and they happen you can see the v model from age for me this is definitive proof that this actually works i am going to um just duplicate this button here and remind me i'm going to give her let's imagine right off to kind of separate them and i'm just going to do everything with red instead of blue and this is going to be clear fields something like this uh perfect yeah this works and i'm going to define a method section and i would have clear fields functional method and this is just going to reset uh reset the person fields to whatever values they have they used to have kind of get us ready for yep get us ready for another round of impute um so yeah this works so when we type something here it doesn't matter what we go and yeah we need to call we need to add a click handler to this and i'm just going to call chloefield's us the method call so when we type when we hit clear fields it kind of just close them as you can see right and now we bring in build it um we absolutely need two imports for vuelid to work we would need two imports here uh we need it imports um use viewleydate usually date from really dead core and we will also need to import some validators from [Music] uh viewer dates validators of course and the ones we would need here would be absolutely be required we would need um numeric we would need uh email for example and possibly url as well yeah so these ones are enough for us to uh to check what we have on our from right now uh this says we need to provide the value you must absolutely provide the value we would also uh use numeric which i guess works for the age when you want to say hey you can only add numbers here and nothing else and this validator checks that your emails are your email is correctly formatted and this works for urls and we will be using it to validate the website we would be skipping other names i think it's uh it's a perfect way to show that you don't have to validate everything and this is allowed to be blank for example on your on your server side it should just be should just be known for your database or something but um yeah the next step would be actually to bring in validate itself and um it's usually somewhere here so v dollar sign uh i don't know why but uh i guess i liked it from the vvda documentation you can also make use of it if you like it you can call this anything else but i guess v dollar sign actually um would be nice and you would see why um yeah so you would be bringing in uh validates and the next in the most important thing as far as the validators are concerned is to provide a validations uh function here as part of the vue.js setup now this doesn't work with the normal ugs projects but with validate you have to define your validations here and you can specifically request for specific uh validations for certain fields now we intend to validate the person objects entirely with this individual fields and however you define them here is actually how you need to also define it in the validation so it works quite similarly to your data fields returns an object as well but now we would be returning this person object and of course the fields we intend to validate for sure the first name and here for the first name we would be uh we just want to say well this would be required um let's go with this one now this would be required and you can do this also for uh for every other thing here what i'd like to do is just copy this paste we have the last name which would also be required uh the other name we don't intend to validate we leave it blank uh the age is required and it's not just required but um it's also a numeric field and for the email it's required and it's an email field so we would like like it to be checked or properly formatted and for the website it's required and it's url and we have what we absolutely need to uh to validate him uh with viewleydate of course there's no way to tell right now if if the validations work uh because well there's no way to visually display this right there's no way to show that this actually uh works so what we need to do is um we would be making changes to our input fields probably also providing a new paragraph under this field to kind of display the error message if there is one and you can customize it as as much as you want but i'm just gonna go ahead and do that so what i would be doing if you recall um we had this indexed css file where we have um the css class for our text field with errors well we would be using that here right now um so what we're going to do is say well we have a class i'm just going to do this for the first one we have a class here and we intend it to bind into some based on some inputs so we would i would i'm just going to take this away so the dollar sign from really dates and i would be checking for person and i will be checking for the first name and and they'll say an error if there is an error on the first name then i would like you to use the text fields error class to find here and if there isn't an error well you can have the normal texts text fields css class and we can end the codes here yeah so basically we are we're saying if there is an error on the first name well you can um you can you can try to show us that we have an a for example this um we have a ring around it that should be read that says hey you have a problem with this with this field and you need to fix it and if there is no arrow well yeah field remains as it is right and um we would need a paragraph right under the input fields to just kind of display uh the error we have for me i'm just a what i'd like to do is to see i need you to have a red text it's really tiny text yeah we don't want it to get all the attention of course but um yeah we need to have that and for every error um for every error in this um person dot first name and arrows and you can bind this to the uh it has a uid so that way we can quickly display um whatever error message the validator gives us and this is highly customizable but for now i would just use the simple message that this has and yeah so on submit we don't yet have a click handler for submit button and i'm just going to call a method called submit right here so what i like to do is um when we hit submit we can quickly the first thing we would like to do is uh to kind of uh check if we have any errors and how you do this with we'll get is to say we have this v dollar sign and this method called touch and what this does is to kind of uh check all the fields that it's supposed to validate and find out if it's um if any of them have errors of course right now all of them have errors so they're not yet what we want them to be but yeah you can see what we are trying to achieve here and this just says the value is required because uh as far as the first name is concerned we only need to make sure that the value is actually provided for it and you can see this nice um red ring and this is as a result of um uh yeah as a result of this um this nice check we have here to make sure that if there's an arrow well we have this this css class that gets loaded only when there's an error on the phone and this is quite nice and if you type it it goes away right it says values required stuff like that so here i've taken the the liberty of adding the validations to the other fields we have the first name which used to be there before the last name has also been added um don't forget we're skipping the other names but we also have the age and we have email addresses and and the website and all of these validations have all of these fields rather have these paragraphs under them that kind of gives a description of the of the particular error the user needs to fix and um yeah and on submit uh we have this method that tries to trigger the validation to make sure everything is fine so right off the bat if you click on submit here you can see it's already uh telling us [Music] the specific fields that have problems and and the way they they need to be fixed so we need to provide the value and i will just demo this email for example if you have if you have some value in it then it says well this is not a valid email address and it's it's instantly uh becomes valid when when uh the input is correct and goes back to being invalid when it's not and we also have this um website [Music] so you can see it says it's not valid url address but when you have we're just going to say that medium.com and you can see that it's correct now and it ceases to be whenever uh the value is wrong and yeah so this is uh validation nutshell with uh really i would also like to show you for example when you refresh this and you start to type you can see that for now these validation checks are actually not they're not being checked right now and including these ones and the reason is because we have um what we we included this method in our submit function here which basically triggers the validation right but in the event that you actually want to be able to uh to get your fields uh to stop the validation as soon as the user starts typing and as soon as they visit the form then there's something called uh this auto dirty in in validates and that is exactly what we need so we can for example rdtm it's this dollar sign also 30 and give it a value of true and when you have this in the validations as soon as you start typing or you go back it instantly starts to check and we can just add it for all of them actually so i'm just going to copy this let's take the comma along with this paste paste paste spaced great and now when we type yeah the these the check is it's instantly start to check all of this stuff for us and sometimes you want a custom validation message uh this just says value is required or this says well all of them say value is required but sometimes you might want to actually uh say something more meaningful than that and you can actually do that in viewleydate as well i'll be showing you how now and to trigger help us we would need to bring in something else here with the validators and this would be a burst like this and right here in the validations function we would like to do this with required for example for the first name we have uh we could say operas. operas.with message and we would just like to say first name is required right and we can have required here itself ah so this basically says um we need to provide something else other than value required we want to specifically say first name is required and when you're missing this right now it says first name is required instead of the the generic values required message and that's all don't forget to like and subscribe i would be providing this code base in the url as well and on github so make sure you check it out and play around with the various validations method you have of course you can um you can also go to uh the validates um [Music] uh yeah the validates library here the documentation and you can find a lot of custom body details and a lot of interesting functions and uh methods you would be using for your validations there are more advanced cases of validation of course and uh really that allows you to provide as many as you can uh possibly need you can make use of the built-in ones you can also provide some custom validations if you are interested in building something like that so see you guys next time bye [Music] you

Channel: CodeByNaci

Views: 405

Keywords: Vue.js, Validation, Vuelidate, Vue

Id: K8eQfaZjEi8

Length: 29min 41sec (1781 seconds)

Published: Sun Sep 26 2021