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 }) => {
Vue.use(Vuelidate);
};

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

<q-input filled
v-model.trim="email"
:label="Your Email..."
@input="$v.email.$touch()"
:rules="[
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: {
required,
email,
},
password: {
required,
},
},
// ...
};

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