Validation Forms in Vue.js Apps Using Vuelidate library
Join the DZone community and get the full member experience.Join For Free
Hello! One of the most common tasks in software development is input validation. Any app has different forms that submit some data, and we want to check numerous conditions: that fields are not empty and that they have a proper format (like emails), length, and so on. Yes, we can do it manually, but this is not the best path. It is better to use a specific validation library. For Vue.js apps, the popular choice is Vueildate. In this post, we will see how to install it to your Vue apps, how to use it, and observe the most important built-in validators.
What Is Vuelidate?
Let have a simple example. You’re building a signup form. You want to check that user provides a correct input, like:
- Password has a minimal length of six characters.
- All fields are filled.
- Email has a valid format.
You can do this manually, but it is not the best route to follow. First, is that you will find yourself in a forest of nested if-else constructs, that you most probably could not understand after a week or two. Next, even small additions will bring a lot of changes. This is always safer to rely on an external validation library. For Vue.js applications, there are several choices, but one of most used is Vuelidate.
You can install Vuildate using your package manager CLI or from Vue UI’s dependencies tab. Let's check how to do it using NPM:
Then, you need to import Vuelidate in your
src/main.js to use Vuelidate globally in all app’s components:
The last thing to do is to create validation object inside components and import required validators (will see this in next sections). You can call Vuelidate by
Data() Function and Validations Object
Vueildate library uses a model-based validation. What does it mean? We need to add validation conditions to
data() model fields. Yes, we can’t do this directly as
data comes from Vue. Therefore, we create a new object,
validations. Let's return to the previous example:
So, we have a model,
SignupRequest, which corresponds to data we want to send to the server. We want to assert that all fields are filled and not only filled, but with specific requirements, like format or length. We create a
validations object that mimimcs the data model. (Well, it does not have to copy all data model, but strictly the data model you want to validate).
Each field provides in square brackets validators. You can use both built-in validators or create your own (however in this post we will follow only built-in validators).
Let say you want to check that all fields are filled. For this, we use the
required validator. Import it and add it to the
Next, we actually need to call Vueildate to assert conditions.
Calling Vuelidate Assertions
Let's create a method that will submit our signup form:
Here, we need to call Vueildate to assert specified conditions and perform a logic based on two variants:
- Form is valid.
- Form is invalid.
This is a sample implementation:
This is the most general approach that touches our form and checks that all fields are valid acording to specified condtions. Although, we can validate each value separately. For example, it helps us to hightlight missed fields. The generic pattern is:
Let's say we use Bulma:
So, this way we can bind
is-danger class to input fields if data is missed. Next, let's see the most important built-in validators.
From a technical point of view, validators are conditions that are used by Vuelidate to assert the data model. In this section, we will look at the most common and used built-in validators in Vueildate.
We already checked this validator. It confirms that the field isn't empty. It also goes to cases when the field is a string value that contains only whitespaces and also for empty arrays. It does not have any paramaters and is very easy to use:
In our example, we have two fields,
confirmPassword that, according to the app’s logic should be equal. Of course, we can do naive validation using vanilla JS:
However, Vueildate has the
sameAs validator that verifies an equality of the field to the given property. The code snippet below demonstrates how to use
NB we can combine multiple validators for the same field. For
sameAs, we provide as an argument a name of the property we want to be equal with – in this case, it is
This two validators assert the field’s length – either not less than (
minLength) or not more than (
maxLength). Both accepts as an argument an integer value of length. Works for strings and arrays.
Data Type Validators
This group includes several validators that check if the field is of the required data type. As an example, if we have an
[invoice form](), we want to be sure that the user enters only numbers in a rate or amount fields. For that, we can utilize
integer validators. Let's observe what do we have here:
integer: checks that field is an integer.
decinal: checks that field is a decimal.
numeric: checks that field is a numeric (both integer or decimal).
alpha: checks that field consists only from alphabet characters.
alphaNum: checks that field is alphanumeric (letters and digits).
Let add a new field to our model –
age. We want that it is an integer:
The next validator we will observe here is
Finally, let's overview what I call as a group, range validators. It includes three functions:
minValue(value): validates that the field is higher than a provided value
maxValue(value): validates that the field is lower than a provided value
between(a,b): validates that the field is between a and b values, both are included.
These validators work with numbers and dates. The code snippet below demonstrates the use of range validators:
In this post, we talked about Vueildate, a popular validation library for Vue.js applications. We observed an installation process and how to make Vueildate work (e.g. assert data model). We also checked the most common built-in validators.
Opinions expressed by DZone contributors are their own.