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.”
So let’s install and use it to validate our forms.
npm install @vuelidate/core @vuelidate/validators
yarn add @vuelidate/core @vuelidate/validators
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:
We have a simple login page with input fields for email and password. The Login button and a link to the signup page.
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
validationsis valid and recognized. Note that we need to have the same structure for objects returned from
- Lastly, we activate Vuelidate inside
useVuelidatewhich we imported from @vuelidate/core. Internally it will take the
validationsreturned 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.
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:
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!!!
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.
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.
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
- $validator: It takes our function validName as a value.
- $message which takes a message to display when validation fails.
Here is the complete code.
And here is the HTML code.
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