Quasar form validation with Vuelidate

Image for post
Image for post

I really like how Quasar handle form validations with the “rules” on a QInput, but I wanted to use Vuelidate instead of the default validation. The only examples I could find were wrapping the form in a component to display the error messages and/or using vuelidate-error-extractor.

Steps to follow:

  1. Install the Vuelidate package.
$ yarn add vuelidate

2. Once the package is installed, create a new boot file for it (using Quasar-cli)

$ quasar new boot vuelidate

in /src/boot/vuelidate.js

import Vuelidate from 'vuelidate';

export default ({ Vue }) => {

3. then in your Vue file you can have multiple rules validated by Vuelidate like so:

<q-input filled
:label="Your Email..."
val => $v.email.required || "Email is required",
val => $v.email.email || "Invalid email format",

and in the script part you add your validations (see doc for Vuelidate)

import { required, email } from 'vuelidate/lib/validators';

export default {
data() {
return {
email: '',
validations: {
email: {
password: {
// ...

That way you have a different error message for each invalid rule.

the @input force vuelidate to process the new value.

Hope this can help someone.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store