Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.4 Validating the Form

Client-side validation exponentially improves the user’s experience. We’ll use VeeValidate to validate our form.

Related Links

2.4 Validating the Form

Form validation is extremely important, but in web applications it's a little bit more involved. Because while we definitely, absolutely need to perform validation on the server, we should also perform the same validation on the client. Because the user experience without any client side validation is, well, less than ideal. It involves a complete round-trip as far as a request and response is concerned, and there's other issues that could occur. Now, I'm not saying that client side validation is any replacement for server side validation because [LAUGH] that is absolutely not true. You need to perform server side validation. But in order to give users an experience that really they expect from a conventional application, we need to perform the same validation on the client. And because we are using Vue, this is actually going to be very easy to implement. Because we have a node package that we can bring into our application that is pretty much going to do all of the work force. And the best thing is that it is modeled after levels validation. So there's going to be a lot of similarities and we can just pick it right up and use it without much issue. So the first thing we need to do is install this package, and it is called vee-validate. And we want to save this a dependency. So that's if we ever need to install everything, then it's going to be installed. Now we need to make this vee-validate available in our application. And we could do that inside of our component if we wanted to. We can come in here and say, import VeeValidate from, and then vee-validate. And then we would have to say, Vue.use(VeeValidate). That would be perfectly fine. However, that definitely doesn't need to be done inside of the exports, it needs to be done outside, just like that. So this is one option, but we could also make the argument that this is something that we're going to use application wide. Because it's not just going to be used on this form. But we could use it on any form, both for our admin forms, and if we have any forms on the front end as well. So it makes more sense to do this inside of app.js. So that we import VeeValidate and then we say Vue.use(VeeValidate). And that's what we're gonna do. So let's just make those changes here instead of app.js. Let's close it. And let's go to the command lines so that we can go ahead and run the watch. So that that will start building everything. So now inside of our components, we basically just want to add some attributes to our form fields. And it's going to just automatically validate. But before we do that, we need to actually see what we're going to validate. So if you go to app>Http requests, there is a file called WorkWithPage. Now whenever I wrote this I did this incorrectly. This is a single class for handling two types of requests, one for creating a page one for updating for updating a page. I should have created two classes, but I didn't. So there we go. So we have a single class for that, and that's not that big of a deal. But if we scroll down to the rules, we can see what we want to replicate on the client. And that is simply checking to see if title, URL, and content are required, pretty easy. So let's go to our component. And for our title field, we are going to add an attribute called v- validate, and then we tell it what type of validation we want to perform. This is a required field, so we are going to say required. Now notice how I typed this. I said v-validate equals double quotes and then inside the value was required. Now if you've noticed over the past couple of lessons, any time that we've used any Vue oriented attribute, the value has been evaluated as JavaScript. It could be an object.property, or method name, or just an identifier of some kind. And the same is true here. So what we really need to do is pass in what would be evaluated as a string. So we're going to have inside of our double quotes a pair of single quotes, and then the value of required. So there is a distinction there. Because if you don't have the single quotes and you try to run this, you're going to see an error in the console. And it's going to tell you that we can't find this required property, because that's what it would try to evaluate that as. So instead, we tell it what type of validation we want to do as a string. And if we had multiple types of validation, then we would just separate them with a pipe. So let's pretend that the title field is an email field. So that would be required, and we would also want to ensure that it was an email address that was typed in. And so we would say required pipe, and then email. And then if we had a third validator, then we would have that as well. But we don't need that here, we just need required. But we also need to display an error message. If the user has skipped over this field, the we definitely want to point out that, hey, you need to put something here. So we can do that with a p element. Let's give this a class of text-danger. And then we will use v-if. Now this is not part of v-validate, this is part of Vue. Any time that you want to conditionally show an element, you can use this v-if attribute. And the value of this attribute needs to evaluate to either true or false. So if we say v-if="true", then the element is going to be displayed. So this is shown. And if we go to the browser and look at this, then we're going to see that message being shown. But if we change the value of the if attribute to false, and then we refresh the page, that is hidden. So what we want to do is check to see if we have any errors for the title field. And so we say errors, it has a method called has, and then we pass on the name of the field that we want to check for, title in this case. And if we do, then we want to show what that error message is. And we can do that with that errors object. We can get the first error of the title field, and there we go. So whenever we refresh the page and we blur out of title without specifying anything, we see that the title field is required. So now we just need to do the same things for our other elements. It's just a matter of copying and pasting and making a few modifications. So in this case, this is going to be for the URL. So let's add that to v-validate, that's required. And this is for URL. So we will change that. Let's copy and paste once again for the content. And then we will be done. So here we will have content and content. And we need that v-validate attribute, so let's grab that. Let's add that. Let's put this on multiple lines, so that it's a little bit easier to see. And there we go. So now, let's refresh the page. Let's just blur all of the required fields. So title, you see that the title is required, the URL is required, and the content is required as well. Now if we try to submit this, we can see that it submits. And that's definitely not something that we want it to do or maybe you do. I don't know, it's up to you. However, I don't want my form to submit. And I also want to manipulate some of the classes being used for the form control groups. And we will look at doing that in the next lesson.

Back to the top