Input validations using vuelidate

hello CarGurus welcome back and as a part of this video tutorial we will see how to add input validation using your innate plug-in to our Rio J's application so if you have remembered inside our previous web tutorials so we have been working on how to add custom authentication to our web applications so we we have almost added all the flows like sign up sign and create login so if you guys go ahead we have added login and we have added create account in the similar fashion we have added forgot password and confirm signup pages so if you have missed that I will provide the link to those to that video tutorial in the description section below so don't worry about that just try to follow that video tutorial before going head into this so alright so let's proceed with that so how do we add Beulah date plug-in to our really neat validation to our web application so let's go to a command prompt so in order to add you need a plug-in to your web application all you have to do is just say npm run sorry npm install we only date space - - safe so what this guy going to do is this npm will go ahead and connect to the npm repository and download the unity plugin for us and add it to our web application so just give it a couple of seconds depending upon your internet speed all right so we have successfully added that and looks like we have some security vulnerability over here let's go ahead and fix that so in order to do that NPM has been pretty kind enough to even suggest which command to run in order to fix them so I'll just go ahead and run them so it is NPM audit fix so I'll just quickly go ahead and try to run it so what this guy is going to do is it'll go ahead and scan all the dependencies inside our project and whichever the package which is having the security vulnerability it will just go ahead and try to fix that so just give it a couple of seconds again right so we have successfully fixed that issue so now let's proceed with our goal for this video tutorial so now we have successfully added our Beulah date plugin so by executing npm install' really late - - say so now how do we go ahead what is the next step let's once you are into your code base go to your main dot JS file and try to import your really date over here so before that what you need to import and how do you import so in order to learn about that let's go to the l88 website directly so just go to google and type your date you will be redirected to this website so here on the left side you should see something called as installation section so this is the first step is the one which we have done so the next step Negin so the next step which we are going to do is this over here so we are just going to import mutilate and add it to our new JS application so there is an alternate way of adding validate to our components using mix-ins but we will see that thing inside a future video tutorials once we discuss the mix and concepts so for timing we will just go ahead and stick to our basic usage so let's go ahead and copy this two lines so there's no magic so I'll just go ahead and price this guy over here and I'll say mu dot use and viola date so that's it so what it does is it goes and enables you to validate across your and I view J's application so now let's go back to our signup page so if you remember from our previous video tutorial this is a view divided based page so how do we add this really date plug-in to our beautify so again there's no magic let's go to the beautify website and try to find that so go to Google and just type beautify chase you will be redirected to this beautiful website beautify jeaious website and under that click on documentation and under the search just search for form so now it this has a pretty decent documentation but again it's not hundred percent up to the mark in few areas it might be lacking if you feel that it is lacking just feel free to contribute to this beautified project which is open source all you can do is just check out that and update your documentation to it and there is a pull request and has the community so now in order to find how do we add muna date so here there is a pretty good section called as Villa date and they even say why it is what it is it's a simple lightweight model-based validation for your mu J's so how do we add that so what I'll do is I'll just open this project inside your code man so now how are they going to add it so the first and foremost if you see on the left hand side is your template code and on the right hand side is your JavaScript code so what we will do is let's go back to our form and try to design try to decide what we need to do or what kind of validations meaning we are going to do on our web application so coming to our username it's a free-flow text so I want that feel to be available so it's a mandatory field it same is the case with your email and password and as well as this check out button over here I want my end-user to agree that then only I'll be processing his signup request so now how do we do this so we we understood that all the four fields are required and coming to the email it is it has to do even the extra validation like whether it's a proper email address or not and coming to the password we have a couple of requirements from enable us kognito that actually a minimum of eight characters and it should contain a lowercase letter so we will see all those extra conditions how do we add that thing to our application so the first requirement is we should go ahead and ensure that all the fields are required now let's go back to this Kohl pen so you can see over here the first thing is you can go ahead and import those validators like this so we will do exactly the same thing or if you want to follow the basic example provided by your unit guys you can even go ahead and do it so in our case probably I'll just import just like this because that's how we have been doing in rest of the application so what I have done is the first step I've just imported the predefined validators which are available with fury date so the first one is required let's just add only that for timing and we will go back and we will go forth and try to implement or add whatever the additional validations which we required so what is the next step so we have imported this guy so what is the next step so the next step over here is you have this section called as validations so let's go ahead and copy that section so I'll just say copy that and you should place that thing inside your X for default section put a comma over here let's ensure that you're formatting it so here we don't need any of this fields for timing because we are not interested in them so how do I add this what do we get this for inside this validation section so here we need to go ahead and define this is the field and that field is required so here if you observe so this is the field name and what are the validations you are applying on that field name so in our case we are just saying it's just a required field so let's that's the first step what is the next step is we need to go ahead and trigger that validation so how do we do that so these are the two sections which we use to trigger the validate validations so let's go ahead and try to copy them so let's go back to our web application inside our form tag so we will be adding those two fields or two methods over here and one thing over here is instead of name it is going to be your model name so just go ahead and update that thing to you modernly so that's the first thing and second thing is like I just want this field to be required so this is something related to your beautify not related to your irrigate and I don't need a name section the the label section is fine I don't need type by default it's text so what else do we need the next important step is we need to say to unify how to display on what error message it has to display so in order to say that we have something called as errors - messages which takes an array of error messages so we will just go ahead and copy that and put that thing over here into our modern section so the reason why I am going forth from the beautify website is it should not feel like as if I am doing some magic over here I'm just trying to do apply how let's say if as a beginner if I'm trying to do how are we going to do so I'm not doing any magic so all I'm trying to do is just go to the website try to understand how they are doing it and I'm trying to replicate it over here so here we have this error messages so we need this list of error messages to be passed to it how are we going to do that so the one way which beautify guys have recommended us to do is try to create a method inside a computer section so till now we don't have that so let's go ahead and create this computer section so if you guys remember from your Muji's basics it is one of the lifecycle method provided by a blue jays so here I've just created the computation section and if you go back so what they have done for the name so they have just created a method and trying to perform a where a validation kind of thing and trying to return the list of others so I'll just copy paste that sample method over here for us so what what what we have got what we have done over here is so let's go ahead and say it as like username let us copy that and go back to your computer section and this should match exactly the same call which is associated with a at - messages the next section is we have created the error section and one more important thing this dot this dollar value sorry dollar B is something specific to your really date section so whenever your very date is trying to evaluate it is added over here and this name is going to be a finding in our case it is username and in case if it is dirty so dirty is a section like if it is one of the life cycle method provided by your route really deep pocket so whenever you say dirty you are trying to verify whether the fields are valid or not so here you can see if your field is invalid it will be true it will be dirty so if you see over here I have gone back to my muna date website so purposefully I am trying to create error over here if you see so as soon as it says dirty dirty means that it has not passed your validations so that's one of the life cycle method so apart from that you could see these are the different icon sites like properties provided by your validate which you can use inside your application so let's go back over here so if I'm saying if there are any errors I'm trying to negate that and I'm just trying to return empty right so there are no errors obviously Mia there's nothing to display so we are not doing any max length validation to our property so I'm just going to get rid of it so again I'm just going to replace this name with username and I'm just going to say username is required so this is the error message which will be shown to the end-user whenever if he's trying to proceed without entering their username so that's it I believe so if you go back over here to beautify so what we have done is this is how we try to invoke our new LED plugin and this is the computer method which we have created to display our error messages the custom error messages and these are the validation sections which we use to perform on our field so let's go back to our browser and see a sign-up page whether it has successfully added that or not so the first thing is always try to refresh your page so let's go ahead and try to refresh the page because sometimes I found that it's not doing that but if you see over here it has successfully added the validation over here so what we have done is if the user is trying to proceed to the next field without entering his username it immediately says hang on there is some error over here and we are saying that username is a required field now let's try to go ahead and apply that same logic to the remaining fields so what we will do is let's go back to our fields over here so we don't need a name field and we don't need an ID field over here we need this both input and output fields so input at the rate input and at the rate blur and this has to be your your model name so here it in our case it's password so as I say it's password and what is the next thing which we have damaged we need this list of error messages to be added to it so these are the three sections which we need so here I'll just say it has like possible errors and let's go back to our validation section we'll put a comma over here so we'll say password colon and we'll say it's a required field so if you if you remember required is coming from your viola date plugin so it has all the logic of trying to verify whether that how that field is required now under the computed section they will go ahead and try to populate a custom user error message which is I can say matches our application so in order to do that just copy the name which you have associated with URL messages on the form field go back over here place that and create a new method over here so now I'll just copy literally copy/paste what we have done previously so instead of username it's going to be password so just go ahead and ensure that's the common mistake which most of the users do whenever they are trying to specially copy paste the code from the website so just ensure that this is matching your modern name over here that you have given so here I've given the error message as password is required so I'll just say that that's what I believe so we have added this error message input/output and we have added validations to it and we have added passwords so the next one which is missing from this is your email we need even your email to be valid so for doing that I'll just go ahead and copy this three sections again and paste them and try to format my code so let's just let's get rid of this name we don't need name and by default email sorry your email is a fixed field so you can even get rid of that so you need label you need prepend icons so here I'll just go ahead and say it as email errors and this has to match your modeling so it has to be email email so let's copy that and configure validations to against Athenians so let's go ahead and say email : so here I'll just go ahead and say required so save that and again into the computer section I just need to go ahead and populate the appropriate error messages so let's go ahead and see whether we are doing it correctly or not for the email so yes that's the correct name which we have copied from there so again as usual I'll just copy paste the same method logic over here it's pretty much the same so if the password field is not there then I'll just say it does so if the email is not there so I just say it as email is required so one more small thing which we missed over here is we tried to we forgot to mention that we need a required so again as I mentioned earlier it's something related to your beautiful so it will become true automatically if that field is there it then if it is not there it will be false that's the one which we are using inside our computer section over here if you go and look at the computer section we are saying is that field required yes we need that field and if it is not there then I'm pushing the error message to it over here so I'll just save that and go back to our website and refresh our page first and click on sign up and let's go back to our email and see looks like they are working perfectly fine but if you observe over here there it's not there is some mistake happening over here I think it's related to our copy/paste so here again as I said it's not your password it should be a email so given that we have mentioned just show that populate that error message for whenever your email has not given so that's that's a common mistake again just ensure that for every error message you are trying to populate you are using appropriate model names over here now let's go back to our website refresh it so let's see if it is working yes perfectly fine now I'll purposefully not give my email address it works perfectly fine and for your password it's working perfectly fine now how do we go ahead and do validation for a checkbox so again pretty simple let's go back to our code pen over here and see how he is trying to do so instead of input there is one small deviation for your checkboxes at the rate change so blood is still there required is still there and error messages are also still there and in case of proving validations to it you need to go ahead and do it in a different way required is not applicable on that so how are we going to do that so we will see that thing now over here so let's go back to our form so here if you see inside our form we have a check box so here I will just say it has User Agreement so that's the use argument so I'm just get rid of that rules it's coming from a previous video tutorial so don't worry about it so here this is the model which we have named it so instead of check box I'll just name it as User Agreement and we will try to go ahead and perform the validation so how how are we going to do that so over here the first thing is we need to copy all this configure error messages at the rate change and at the rate blood to this component so I'll just copy them go back to our IDE so here I've just copy paste at the same thing and the last one is error messages section and remember you need you still need that required section so here I'll just say it has User Agreement errors so that's the method name which I'm trying to associate over here instead of check box it's going to be User Agreement so whatever your check box model name is there you need to configure that thing over here so what is the next thing so they have configured at the rate change so now in order to say it as like required so they are trying to evaluate that value and trying to return that value to us so if you see over here the app still can figure that field so let that be field over here so under the validation section just copy this check box and put a comma over here and put copy/paste that and this has to match your whatever your model name is there so just copy paste it even that so what is the next thing so we have a computer section over here so under the computer section you should see something called as check box so here these are the error messages which are related to your check box so we will go ahead and copy that check box errors and paste that thing over here the comma section so I'll just say so this method name is bit different so if you go back to our form so we have named that error message as user diagrammatic errors so I'll just go ahead and say user agreement errors and this is not check box again it is user agreement is the modeling same is the case just ensure that's again a most common mistake made by most of the users so here what I've done is I've just created the empty error message payload over here and just trying to see whether they are any error messages whether it's true or false and then I'm saying whether it is checked or not if it is not checked then I'm saying you must agree to continue so that's it I believe so what we have done over here is we have associated this three things and then we have added this thing to our validation so we just said just see if it is checked or not and then finally we associated a custom error message to it so let's go back to our web application and try to refresh the page and let's see whether our if the user is not checking that box it will be shown as we need that field to be validated all right so one last step in our validation processes so we have been doing validations whenever the user is trying to focus or whenever user is trying to avoid or enter inputs now what happens if I try to click on directly on create account so if you observe here it's just proceeding as usual without warning users so let's go ahead and view that behavior again so what happens if user tries to submit an empty form we should stop him from doing that and we should show appropriate error messages in the field like what fields are required correct so how do we do that so this is a final step inside our congratulation so now in order to do that first identify which method are you calling whenever we are pressing our create account button so this is a create account button and we are calling the method called as create account so let's go ahead and try to find that method so what you need to do in the first step as a part of this method is you need to go ahead and verify that fields all the fields are valid or not so in order to trigger that validation all you have to say is this dot dollar V dot dollar touch so what this is going to ask validators hey really date and user has asked me to submit this form to the back end can you please verify all the fields are invalid section or not so now what really date does is it does the validation and sets the dirty field so now what we are going to do is if I'm just going to we are just going to access that field over here so I'm just going to say this dot Halloween dot dollar 30 so if that field is set to dirty that means that the validations are failing if it is not dirty then the validations are passing so let's for our initial test what I'll do is I'll just comment out this previous logic which we have created and I'll just add some control statement over here so I'll just say console dot log user validations failed and on the else section I'll just go ahead and say console dot log all good so now we're here if user has entered all the fields then we will just display all good so let's go back to our web page looks like we have done some mistake go back looks like we have done some mistake go back so what have we done so maybe we have yeah so we have commented out extra closing bracket over there so I'll just go back to our website so it's everything is back so that was just a command issue so now if I just click on create account now what's happening the user is being forced to perform all the validations let's go to our inspect section under the console you should see user validations failed earlier without that adding that touch method to our create account method it was just started sending the request back to our back-end and perrera back-end has to handle that so now what has happened is it is failing explicitly so now let's go ahead and fix our code completely so what I'll do is we don't need an error section over here because that error section is already being shown to the end-user so what I'll do is I'll just say or maybe I'll just leave that all section as it is maybe in future we can add some kind of analytics let's get rid of that so what I'll do is rather than putting a else block we don't have a else block condition over here so I'll just say this dot in word the this dot V dot V dot dirty field value so if it is true then it will be like false and it will just not execute our create account over here so here I'll just copy that entire code and place that thing inside out if block so this section has to be executed only if the fields are valid so here remember I'm just saying negate the value of dirty so if it is true then it will not send the request to the back end if it is false then only it will go ahead and send the request to our back end so this dot touches really required because that's where we are trying to ask we need a plug in one last time like hey everything is valid or not so I'll just save that let's go back to our signup page again and I'll just click on create account everything looks perfectly fine so if I just enter something it just works perfectly fine again this validation is not hundred percent foolproof so we need to go ahead and so if you observer here haven't entered proper email address even though it is just saying all good so in our so how do we go ahead and fix that so in order to fix that email thing so we have a predefined validation from really good really late itself so here I'll just say it as email is a predefined validation which is available just copy that and just put the section over here as email now whenever user enters the invalid email so here I just want to display a proper error message like it should be a valid email so just like if you go to the beautify page over here under the computer section for the error messages they say it's like must be a valid email so that's how I want to show it to my end user so I'll just copy the same line go to my email errors so it's definitely required so here what I'm saying is instead of required I'm just saying it has email so this email property is being added to our dollar V because of this email over here from the viola day plugin so it will just go ahead and evaluate that if it is true then it will just do two thing if it is false user has not entered a proper email address then we are saying must be a valid email address so I'll just go back to our webpage and see whether we have successfully applied that thing or not so I'll just go over here if I just click down that interface email is required so now if I'm just trying to enter some random junk that will identify that it is not a valid email and once the end user all right that's excellent now coming to the password again it's pretty much the same but over here if you go to AWS cognitive special cats yeah so what are the password requirements for your cognitive so by default it needs at least uppercase and lowercase letter it needs it it needs to have a number and it needs to have a special character and if you observe by default whenever you are trying to create the cognitive you suppose the length is also 8 so how do we ask end-user that weather how do I perform minimum length of 8 or not so again for minimum length there is a predefined validator from your validate so I'll just go ahead and apply that thing over here so here I'll just say it has many lengths I believe so let's go back to the validate website so here I'll just say it has minimum length is the one which we are looking so just copy that go back over here paste that so now how do I apply that thing on my field so this is a bit interesting over here so just saying min length won't be enough you need to even say Midland and it should be off minimum of 8 characters so again since you have specified a different field over here so okay this is not for your email it should be sent for your password so it's a bit confusing so I'll just rearrange them how it is inside my form so I rearranged it so now what I'm saying is my password should be field should be off minimum of 8 characters if it's not I need to go ahead and show him the appropriate error messages so if you go to your viola date thing so how are we trying to identify we need to go ahead and say the end user that we need at least eight characters for his password so how do we do how do we do that thing it's pretty much the same so here I'm just saying negate the start dollar V dot password dot so here we have something called as min length that has come because we have added that thing just now and what is the error message which we need to say to the end user so we'll just say password must be minimum eight characters must be minimum of eight characters so here we are saying to the end user now let's go back to the form and check that whether it is there or not so now if I just go ahead and say user password is definitely required now if I try to enter the password it says password must be off minimum eight characters now what about the other conditions unfortunately for the other conditions like in order to check whether the password has a minimum of a small letter capital letter number of special characters we do not have any predefined validations available out of the box which we already plugin so in our next video tutorial we will see how to create or how to add custom validations to our reality plugin and as always if you have liked this video tutorial please do not forget to like comment and share this video tutorial with your friends and if you have any suggestions or feedback related to our webseries again please do not forget to provide that thing in our comment section we have even provided our Facebook page URL over here under the description section please do not forget to even like that page if you are if you are available on the Facebook and you guys can if you don't want your feedback to be visible to the public you can send us a private message on our Facebook and try to reply you back asap as always you guys can always subscribe to our channel by clicking each other like on below over here and you can do our entire playlist related to this webseries over here thank you

Channel: codeguru

Views: 5,816

Keywords: vuejs, aws-cognito, vuejs+graphql+aws-amplify, full application using vuejs, aws-amplify, aws-amplify-vue, amplify Auth api, vuejs app with user auth, codeguru.io, codeguru, vuetify, code guru, vuelidate

Id: IkP1Wl787YQ

Length: 35min 45sec (2145 seconds)

Published: Wed Jun 05 2019