Save Observer Validated with airSlate SignNow

Save observer validated

hey you what is going on everybody is robbed aka the diligent Deb and welcome to part one of a two-part series where I'm going to be covering some of the more popular view Jas forum validation packages in particular and in this video we're gonna be covering V validate and in my next video we're going to be covering viewla date so let's go ahead and jump over to the computer and get right into it okay so here we are over at the computer and what I've done is I've created a view project using npx and a view CLI if you don't know how to create a view project using those I will go ahead and link a video on the screen right now showing you how to do so once the project was created I went ahead and removed everything from our active that you see right here then I went to the components folder and deleted the hello world components deleted the import for hello world and deleted hello world out of our component registration next I created a vivre alidade form I went ahead and imported it into app dot view registered as a component and put it inside of our active then I went over and grabbed the bootstraps CDN and imported it here down in our style tag gave a class of container and margin-top to our active to give it a little bit of styling so if we head over to our V validate form component you'll see that all we have in here is an h2 with V validate form after all that was done I opened up a new terminal and ran NPM run served to get a development server up and then I navigated to localhost 8080 now what we're concerned about right now is getting V validate into our project so I'm going to go ahead and head over to their documentation and we're going to click on get started and then we'll go up here to overview and we want to install it in our project there a variety of different ways you can install it but I'm gonna be using NPM so I'm gonna go ahead and grab this here we're in the head back I'm gonna open up a new terminal paste that in and once that's done I will be right back and now that the V validate package has installed let's go ahead and head back over to their documentation and see how we can use it let's go down here to guide and go to basics and you'll see that the first thing we need to do is register a validation provider and this is a component that acts as a validator for your fields and if we scroll down we can see we can import it into a specific view file or we can import it globally as you see down here now there's a very specific way that I want to register this component globally in our project and in order to show you why I want to do it that way let's head down to available rules now you'll see that we can go ahead and import the validation provider but then we're also going to have to import the extend method and also import all the rules and there is a way to install all of the rules you'll see that they also have this version down here which we import extend then we import all the rules we loop through the object key of the rules and we go ahead and extend the rules but what I want to do is import the full bundle so I'm gonna go ahead and copy this right here and we're going to head back to our project we're going to go to SRC main j/s and then right here at the top I'm gonna go ahead and import validation provider and now that we have it imported we can come right below and we can just save udot's components and then we can go ahead and copy this validation provider because I want to name it exactly the same and then we'll specify that we want the validation provider component used globally as the validation provider now what we're particularly interested in validating our forms so let's head back over to their documentation and let's go to handling forms now what I want to do is validate before submit so we'll scroll down here and we'll see that validating forms before submit is a must for form validation the validation observer offers a handle submit function that you can use to protect your form submissions this handle submit function accepts a submit handler and will only execute the handler once the user submits a valid form so let's go ahead and click on this code icon and see what they're talking about and you'll see that they have a form here but the form is wrapped in a validation observer and inside of our form we have our validation providers that the validation observer will look at and then determine whether or not the form is valid you'll see that there's a V slot for the handle submit function that they talked about and all you have to do is wrap your form submits in this handle submit and then your function that you're actually gonna fire when the form submits so let's go ahead and head back to our project and side of our main Jas we're going to say imports from V validate and what we're going to import is the validation observer and then what we're going to do is register it as a global component so I'm just going to go ahead and copy this line we're going to come up here and copy validation observer and just paste it in there so we'll register a global component called validation observer that references our validation observer that we imported from B validate I'll go ahead and clean this up a little bit and we will go ahead and save everything and now that we have that all set up let's go ahead and head over to our V valide form component and start coding out our form now the first thing we're going to need to do is set up some variables for our form field so we're going to come down to export default and we'll create a data property and for our form fields we're gonna have a name email password gender and accept terms and to make this a little bit easier I'm gonna wrap this in form data and we'll go ahead and put that all inside of form data then up here at the top we can start coding out the template now you'll remember from the documentation we need to wrap our form and a validation observer so we're gonna say validation observer and we'll give it a V slot equal to curly braces we've got to wrap this in quotes handle submit and we'll go ahead and close this and then inside of our validation observer we're gonna have our form and we will bind to the submit property on the form and we'll say submit dot prevent so it prevents the default behavior of reloading the page and then what we're gonna do is we're gonna take that handle submit that we put on the V slot of the validation observer and put it in here and then also pass in and on submit and we will take this on submit and that's what's going to handle our form submission so we'll come down here to export default and we'll make a methods property we'll do our on submit and when we submit the form we're just going to console.log our form data this dot form data and then up in our form for each one of our inputs we're going to have to wrap it in a validation provider so we'll say validation provider we will give it a name equal to our input name rules on this will be required we'll do a pipe and say alpha since we do not want any numbers in someone's name I'm going to go ahead and close this down so we can get a better look at this and then we'll say V slots and set that equal to errors we will close our validation provider and then inside of our validation provider is where we'll put our form input and I actually have to wrap this in quotes and there we go so I'm going to be using some bootstrap CSS classes so in here we're gonna have a div of form group we'll give it a label equal to name I'll just go ahead and get rid of this for for now and then we'll give it an input type will be 'text class will be form control and v-model will be named below it will put a span inside of the span we'll do some text interpolation and what we're going to do is omit the first error if there is one so we'll say errors and errors is an array and we'll just pick the first error out of that array and we'll hit save and we see now we have our name input field on the screen below that we'll have our email input so what I'm going to do since it's very similar to this one and we don't type it all out is I'm just gonna copy this validation provider and paste it in here we're going to change the name to email and the rules are gonna be required but the other rule we're gonna have instead of alpha will be email so it validates the email we'll change the label to email we'll come down to the input and change the type to email and then we'll change the v-model to email as well we'll hit save and you'll see now we have our email field and you'll see right now if we go inside of one of these fields and leave you'll see that name is required and then if we leave it'll say email is required and what we can do is type in just some random text and you'll see it's not a valid email until we put what looks like a valid domain on the end and since our password field is going to look very similar to our email we're just going to go ahead and copy this out and paste it below we will change the name to password we will change the rules to require we're going to give it a max some Max characters of 12 and then we're also going to set a min mix min character of 6 we'll go down and change the label to password we will change the input type to password and we will change the v-model to password I'm going to go ahead and save everything and you'll see now we have our password field if we enter it and leave it you'll see that it's required and also if we add a password at saying it's must be at least 6 characters long and once we hit 6 characters if we go over 12 then it says password field may not be greater than 12 characters and now let's go ahead and create our gender field so we'll go ahead and copy this validation provider and paste it below we're going to change the name to gender we are just going to make it required and we're not going to have an input we're going to have a select so I'm going to go ahead and get rid of our inputs we'll do a select and we'll give it a class equal to form control and we'll go inside of it and give it some options we'll say the value on this one is male and the option text will be male we'll go ahead and copy this and paste this a couple times we'll say female and other will give the select AV model of gender and we'll go ahead and save everything we also need to update our label to gender just go ahead and save again and you'll see now we have our gender drop-down and we have our options inside of there next we'll create our check box for accepting the terms so I'll go ahead and copy this validation provider and paste it below we'll get rid of everything inside of here instead of a form group this will be a form check we'll make an inputs we'll give it a type of check box and a class equal to form check input and we'll give it a v-model equal to accept terms below that we will do a label we'll give it to a class of form check label we'll give it some text of accept terms and I'll just go ahead and copy the span from above and we'll go ahead and paste it right below this div and we'll hit save the last thing we need is a button to submit our form so below our validation provider here we're going to do another inputs we'll give it a type of submits we'll give it a class of BTN BTN primary and we'll give it some text equal to submits go ahead and save that and we'll go ahead and give it a little margin tops not looking too great right now against that checkbox and there we go so if I go ahead and hit the submit button without filling out any of these fields we should get an error on each one and you'll see that name is required emails required password and it looks like we missed the name for this one so I'm just gonna go up here and hit accept terms and save that and we'll go ahead and hit submit again and you'll see now that the accept terms field is required and it's not looking great so what I'm gonna do is just on this span put a br and now it's looking better so if we go ahead and test this out we'll see that the form validation start to disappear as we enter stuff in there come we'll put a password in pick a gender and accept terms and then when we submit if we open up the console it looks like we're getting some errors here on our v-model and it's because I wrap this in form data so let's go ahead and update our V model very quickly alright there we go we'll go ahead and save this I'll fill this out really quickly we'll go ahead and open up our console we'll clear this out and we'll hit submit and you'll see now that all of our values are in there and everything is looking good as far as validation and our form submission is concerned and that's gonna go ahead and wrap it up for this tutorial in my next tutorial I'll be covering another view validation package called view Leday and if you don't want to miss that make sure you hit that subscribe button and enable your notifications if you got any value out of this video I'd really appreciate it if you hit that like button it helps me out and my channel with the YouTube algorithm if you have any questions comments or concerns about this video go ahead and drop a comment in the comment section below and until next time happy coding [Music]