Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
FREELessons:16Length:2.1 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Validating the Form With VeeValidate

We’re validating the data on the server, but we need to validate it on the client too. This will let us give our users instant feedback in case of a validation error. We’ll use VeeValidate to do that.

Related Links

2.5 Validating the Form With VeeValidate

In the previous lesson, we implemented the actual creation of our support tickets. And while it works, there are still some things that we need to do. One of those is to add validation. Now, we do have validation on the server, thanks to the request object or the request class that we created. We do have some rules to find, where the email and the title and the content are all required. Then, of course, the email address needs to be an actual email address. And while we definitely do need this validation on the server, this is a single page application. The server is responsible for doing all of the data stuff. So that is storing, retrieving, editing and all that stuff. The client is responsible for everything else. So it just makes sense to have client-side validation. And so, we are going to use a package called v-validate to add validation to our form. With just a few lines of code. So, we want to install the v-validate package, let's go ahead and save that as a dependency, so that we will then have that inside of our package.json file. And then we want to go to our app.js file. So inside of assets js and then app.js. Let's add in an import statement. It's called v-validate and then it is of course from the validate. And then we just need to use this within our application. So somewhere here, we need to use the view method and we will pass in v-validate there, so that's all that we need to do inside of app.js, so we can close that. And then let's go to our actual component because we do need to add a few things here and one of them is an attributes called the v-validate. And the really cool thing about this package is that it is modeled after the validation of Laravel. So everything that we did in the previous lesson, as far as setting up the rules for the request that's being handled by our tickets controller is going to fall down to our client, as well. So that whenever we want to specify the validation rules here, we pass in a string. Now, the string itself, is going to be contained within our double quotes here. So, it's going to look a little funny but we will have our double quotes to surround the value of the v-validate attribute and then inside of it, we're going to have what would be a JavaScript string literal. So here, we will say required|email. So it is exactly what we did with our rules in the previous lesson. So now we just need to go to our other elements and make the necessary changes. So that our title is required and then the content is required as well. But we can take this a step further and we can display an error message if there is one to display for any one of these fields. So let's do this with a p element. And let's give it a class of text danger, so that it would be read because typically whenever a user sees red, if they can see red, then that denotes that something is wrong here. But we only want to show this p element if there is an error. So we will use the v_if attribute and then we're going to use this errors object. It has a method called has. And if there are any errors for our email, then this P element is going to display. And then we just want to display the error that occurred. So we will say errors.first and then the name of the field, which is email in this case. And we will do the exact same thing for our other fields. So for our title, we just need to change where we have specified email here. So let's do that. And then we will move on down to the content and do the exact same thing. Let's do this after the text area. And then we will change the title here to content. And so with that done, we can go back to the command line, let's run mpm run watch. And then let's hop on over to the browser, so that we can actually see this work. Let's make sure that this builds and whenever it is done, then there we go. So let's go to the browser, let's refresh the page. There's one other thing we need to do. If we send this tickets, we are still going to get an error. What we want to do is make sure that the form validates before we send the request to the server. So we can do that inside of the onSubmit method but instead, let's do this, let's break out our existing code. And let's put this inside of another method, we'll just call it sendRequest for the lack of a better term. And then we will paste that in. And then inside of this onSubmit method, we're going to access the validator. Now, by including the v-validate package and using that within our application, we now have access to the validator. And what we want to do whenever we try to submit the form, is run all of the validations. And so we do that with a method called validate all, this is an asynchronous call, so we need to use this then, and we're going to get a result. Now if we have a result then everything is fine. All of the validation passed and so then we could send our request. So if result, then we will call our send request method. And everything will be fine. Otherwise, what we're going to see on screen, is all of our p elements that are going to display an error message. So now let's go back to the browser, let's refresh and let's try to submit this. And you can see that instantly, we get feedback. The email field is required. And if we put something in here that is not an email address, then we can see that to the email field must be a valid email. So we have to fill out everything. So this is a title and then this is the description. And then whenever we submit the ticket, then it's going to save that. And I know that I misspelled things. That's okay. Now as it currently stands, whenever we submit a ticket, we don't have any feedback, as to whether or not that actually occurred. Well, we're going to handle that later by going to a different page. But for right now, we can at least just look at the console and really the network tab. We might need to submit the ticket again but we can see that the status is 200, so we can be assured that our ticket was stored twice because we just stored it twice. And so the next step that we need to go through is actually start incorporating not just the layout of our application, but we also need to start incorporating the routing so that we can navigate to different pages which would essentially be different components throughout our application. And we will do that in the next lesson.

Back to the top