Inline Vue Validation in Under 10 Minutes
Playing
01. Inline Vue Validation in Under 10 Minutes

Episodes

0%
Your progress
  • Total: 11m
  • Played: 0m
  • Remaining: 11m
Join or sign in to track your progress

Transcript

00:00
In this snippet, we're going to get inline view validation set up in under 10 minutes using the Vuelidate library. I'm going to show you the basic usage of this and if you want to use this in a more advanced way, you can go ahead and explore how this works. Okay, so the first thing is I have a project set up with the Bulma front-end framework and I just
00:20
have a sign-up page here. There's nothing happening here at all at the moment. There's no action for the form. Nothing is working. It's literally just a template. So if we go ahead and open this up, I've just put this over on the homepage, but of course it would have its own dedicated route. We're going to go ahead and just set this up as we normally would. So we would
00:39
usually have some data inside of here and we would create maybe a form property in here for the name, the email, and the password. So I'm going to go ahead and stick the name, email, and password inside of here and normally we would go ahead and hook these up to the inputs using vmodel. Now we're not going to do that because Vuelidate observes your model data and gives you back
01:02
whether something is valid or invalid based on the text that's been typed and based on the rules that you've assigned to these. So we're going to leave the vmodel out just for now. So let's head over to Vuelidate, specifically the GitHub page, and we'll go ahead and install this, save this to our dependencies, and then we really simply to be able to use this just need to import it and
01:24
use it within our Vue instance. So I have a Vue CLI project set up here, but it's going to be pretty much the same depending on how you have this set up. We're just importing it here and using it just over here. So assuming that's all installed and good to go, nothing really much would have changed at the moment. What we can now do though is start to hook this up based on what I
01:45
just mentioned and that is the Vuelidate model. So the first thing I'm going to do is just come down here outside of my data. I'm going to set up what Vuelidate calls validations. Now this is basically mapped to the structure of your data. So I always put things inside of forms so when I submit them I can just access this form rather than this name, this email, this password separately
02:10
if I'm sending these down as an object. But if you don't have form like this, it doesn't matter. You're just going to replicate in this object what you have inside of your form. So just as an example, if you did have this set in a specific property, you would just mimic the structure of this based on all of the data that you have and each of the pieces of data that you want to validate
02:31
will be represented as an object. So in this case we've got name, we've got email, and we've got password. So we're going to introduce all of these two here and inside of this object goes our validation rules. Now where do our rules actually come from? Well you just simply import these from Vuelidate and you import these separately so you're not pulling in too much when you don't need it.
02:55
Now I'm just going to look at two basic rules here, required and email, but of course you can explore the library and put in any other validation rules that you need. So we're going to go ahead and pull this in from Vuelidate, lib and validators. So let's pull that in and let's think about what we need here. So for the name let's just say that's required. For the email let's say that's required
03:15
and it needs to be a valid email. So we're going to use that email rule and just the same for the password. Again I'm just going to set this to required. Okay so let's come over and see the difference here. Again nothing much has changed. All we've done is set this up so Vuelidate can access this and map it to our model data. Now for the name let's start with this. We're going to go
03:35
ahead and use vmodel but we're not going to reference our data. We're going to represent this based on the Vuelidate data and Vuelidate puts itself as v and then you can start to access your data however you've nested it inside of your data. So for example v.form.name will contain all of the information about that particular piece of data. So just as an example let's get
04:00
rid of vmodel and let's just stick this up here and let's just see what we get with this. So you've got required false model which represents the model data. In this case it's just an empty string at the moment. If I start to type in here nothing's happening at the moment because we don't have this hooked up to a vmodel but you can kind of see exactly what's happening here. So let's go and
04:21
do exactly that and hook this up as a model and we'll pop that into there and what we want is the model reference. So that's the model that we are using that with. Now let's go ahead and take this again and pop this just at the top and see what changes now that we've hooked this up. So let's give that a refresh and just start typing and you can see here that we've got model and the data
04:45
inside of there. So that's working as we would expect. Now we need to do that for each of our pieces of data. So in this case it's going to be email.model and in this case it's going to be form.password.model and now what we can do is start to look at the validation status. At the moment we don't have any way of grabbing this back. So let's go and just grab v.form.password
05:07
and just see what kind of information we get. In fact we'll use the name to start with or the email that's probably a little bit better and let's look at what we have here. So I'm just going to start typing and you can see that this is required. Email is false. So these two rules here represent whether this has passed. So if I get rid of this required is false that means that this rule has
05:30
not been satisfied. Email true which isn't the case but that's just because the first one has been reset and we have things like dirty as well which we're going to be looking at in a little bit later. So let's just start to type and I'm going to say alex at codecourse.com. Now email is true so we know it's a valid email and required is true which have satisfied both of these. Invalid
05:52
is false because both of them rules have been satisfied and error is false as well so this doesn't contain any information. So what we can do now is use this to first of all I guess add a class to the input so we could attach an is danger class if v.form.name.error has any data in it. So that's remember the data that we saw just up there. So for name let's just go ahead and type
06:21
something and get rid of it. You can see that goes red because this is in fact required and we're going to have these show up when the user clicks sign up or whichever button you're clicking to submit and it will show all of the validation in there as well. So we're going to do this for each one and we'll see this work really nicely with the email because if I just type something that
06:41
isn't an email address of course it's going to go red. If I fill this out as a correctly formatted email address that just returns to how it should be. Okay so let's last but not least just pull this in for the password so we just reference password.error and we're good to go. Of course what we now need to do is show validation errors. So just outside of the control here I'm going to
07:01
go ahead and create a template. Now the reason for this is if there are any particular errors on the name e.g. v.form.name.error then what I want to do is further drill in and create a paragraph in here with the class of help is danger which is just the Bulma framework but of course this can be anything and then for each of these paragraphs I want a individual if statement which checks
07:28
if v.form.email.required is false. Again we saw that data when we dumped it out earlier and if you need a refresher just go ahead and check that out. So in here what I can now do is customize this and give out my error messages. So I'm going to say name is required. If I type this and get rid of it sure enough we see that error in there. Now it gets a little bit more interesting when we
07:50
look at the email. So let's go and pop this down here. We want two validations in here because we want to say email is invalid and then in here we're just going to switch over. In fact let's go up and change that over because that needs to be name and that should be just about good. Great. So name changes to email and email is required and email is invalid. So if I just start typing
08:16
already that's invalid. It's not showing up because let's have a look in here why that might be. Of course so that needs to be email and when I start typing email is invalid when I get rid of it email is required. So email remains invalid until of course it becomes a correct email address and of course we can just do the same thing for the password as well. So we can grab this
08:40
pop this just underneath the control here whatever your front-end framework requires and we can switch this over to password.required and you can do that for each of your validation rules. So let's give that a refresh and let's go ahead and start typing here get rid of it that one's working so we can go ahead and type in a name we can type in a valid email address and
08:59
of course if we type and get rid of that password it tells us that the password is required. Okay so finally what happens when we submit the form if no data is valid or if some of the data is not valid there's something that we need to do in the middle of this and we'll check that out now. So just before we implement this submit method I'm going to go ahead and output in here v.form.name
09:24
just as an example and what you'll notice is we get this dirty property or any dirty. Now dirty means that we've typed something in and changed it so this is now dirty we've not revalidated it at this point. So what we want to do is when we submit this form we want to basically just refresh everything touch all of our models so they're no longer dirty and to do this we're going to go ahead
09:49
and implement the method in here to submit this form and let's go ahead and just log here do this so register the user let's go ahead and hit sign up and sure enough we even though we don't have anything valid in here we're going ahead and registering that user. So what we now want to do in here is we want to say v or in this case this.v.touch what that's going to do is it's going to
10:13
revalidate all of your models and then go ahead and update. Now we can go ahead and click sign up and it doesn't look like that's worked so let's just have a look here of course that just needs to be prepended with a dollar sign. I'm going to hit sign up and sure enough all of these are revalidated but we're still going ahead and validating. So what we're going to do
10:35
is just up here we're going to output v so just v on its own and just see what we've got here so somewhere inside of here let's just search for it is invalid so invalid is true nothing is valid in here at the moment so what we can actually do is inside of our submit check if v or in this case again this.v.invalid so if the form is in any way invalid we just want to return we don't need to do
11:04
anything here because the user will see the errors inside of here. So now when I click sign up that goes ahead and revalidates all of our fields makes us go ahead and type in that data until the whole form is valid so we can go ahead and fill in each one of these and then hit sign up and sure enough then we go on to register the user.

Episode summary

In this quick episode, we walk through how to add inline form validation to a Vue.js app in under 10 minutes using the Vuelidate library. We start with a basic sign-up form using the Bulma CSS framework, and there's no existing validation—just a plain template.

First, we set up our form data (name, email, password) and then show how to install and configure Vuelidate in a Vue CLI project. Next, we jump right into defining validation rules (like required and email) by importing them from Vuelidate's validators. We also go over how the validations object should mirror your data structure for proper validation.

We then connect inputs with Vuelidate’s validation state, updating the form to dynamically add error messages and styling classes (like turning the input border red for errors), so users get immediate feedback as they type. For example, invalid emails and missing required fields are highlighted instantly.

Finally, we cover handling form submission—showing how to use Vuelidate's touch method to trigger validation on all fields when the user tries to submit the form, and blocking submission until everything is valid.

By the end of this episode, you'll have a solid setup for inline form validation in Vue and know how to give users real-time, helpful error messages as they fill in your forms.

Episode discussion

No comments, yet. Be the first!