Form validation in Vue 3 in 10 minutes with Vuelidate

Photo by Christopher Gower on Unsplash

Introduction

In Angular, we have a built-in option to validate forms. But Vue offers very limited functionality when it comes to create and validate forms. To add more functionality, we have to install a separate package called Vuelidate to validate our Vue 3 application forms.

What is Vuelidate?

According to the Vuelidate website:

“Vuelidate 2 is a simple, but powerful, lightweight model-based validation for Vue.js 3 and Vue 2.x.”

Install

So let’s install and use it to validate our forms.

npm install @vuelidate/core @vuelidate/validators

// OR

yarn add @vuelidate/core @vuelidate/validators

Getting Started

We will use the vuelidate to validate two forms. One is a login form and the other is the signup form. We will use built-in and custom validators to validate names, passwords, and email fields.

I have designed these forms for the web application which I created while working for Retrocausal.ai.

Let’s start with the login form:

Login page preview

We have a simple login page with input fields for email and password. The Login button and a link to the signup page.

Let’s first write the javascript logic for this form

Let me explain what is happening here!!!

• We declared a form object inside data, in which we have fields for email and password.
• Then we declare our validation rules inside validations. Since we have installed the Vuelidate package, the syntax validations is valid and recognized. Note that we need to have the same structure for objects returned from data and validations.
• Lastly, we activate Vuelidate inside setup by calling useVuelidate which we imported from @vuelidate/core. Internally it will take the validations returned object and treat it as the validation rules.

Now let’s use these rules to validate the input fields and show the error when validation fails:

After defining the validation rules, we can check inside our template for errors by looking at the name property inside the v$ vuelidate object. It stores all the information for our fields. If any error is present, the $errors array property inside of $v.name will contain an object that describes each error for us to loop through.

Login form validation in Vue: HTML code

Inside the template, we have a form that has two input fields email and password.

We are binding each input field using v-model with $model property of v$.

For each input field inside the v$ object, we have a property named $errors, which contains an array of errors. If there is no error for that particular field then the array is empty.

In our case, we are iterating for v$.form.email.$errors and v$.form.password.$errors with the help of v-for directive and displaying the errors.

Signup form validation:

Signup page preview

For the signup form, we have input fields for First Name, Last Name email, password, and confirm password. A submit button and link to the login page.

Let’s write code!!!

Signup form: JavaScript code

We have a form object inside the data in which we have a variable for each input field.

We have defined the validation rules inside the validation object.

Signup form: validation logic

Each input is required, so we have added the required validation for every field. We have added email validation for the email field and minLength validation for the password field which is set to 6, a common minimum limit. I will add logic to compare the confirmPassword field with the password field and see if both are equal so I haven’t added the minLength for it.

Here comes the tricky part: for the firstName and the lastName we need to check if names are valid. Which names are the valid names? Any name which contains letters, dashes(-), and spaces. dashes(-) and spaces can come between the letters but not at the start or end.

To add the validation for the names we will use a custom validator. To create a custom validator we have to write a function that contains our logic. We have written a function called validName(name) which takes the name as an argument and check it if it is the valid name or not using the regular expression. If the name is valid it returns the true otherwise it returns the false.

Signup form: custom validator

Inside validations, we add the new object in firstName and lastName. We will name it name_validation. Inside name_validation we will define two properties

1. $validator: It takes our function validName as a value.
2. $message which takes a message to display when validation fails.

Signup form: custom validator

Here is the complete code.

Signup form validation: complete javascript (vue) code

And here is the HTML code.

Signup form validation: HTML code

Conclusion

Alright! so we covered how to perform form validations in Vue 3 using a third-party package called vuelidate. We learned how can we use built-in validators to perform common validations like required, minimum length, and email. And we also looked at how can we create our custom validators to validate if the names are valid or not. And then we wrote the code to display the errors inside HTML.

That’s it. I hope you enjoyed this article!

If you have any query, or a feedback you can write in the comments section.
You can also reach out to me on linkedin
Email: aaqibqs@gmail.com
Linkedin: linkedin.com/in/aaqibqadeer