Adding Validation to Quasar based Forms

One codebase, any platform!

Note: Updated 01.09.2019 for v1.

Although Quasar has rudimentary validation rule capabilities within its form components, you might need more advanced validation in forms within your Quasar based project. To get a more advanced validation system into Quasar, you should use Quasar’s boot file system. We will be using Vuelidate, but theoretically, you can add any validation package that works with Vue.

Steps to follow:

1. Install the npm package you wish to use from the root of your project. For our example, we’ll install Vuelidate.

$ yarn add vuelidate
or 
$ npm install vuelidate --save

2. Once the npm package is installed, carry out this command.

quasar new boot vuelidate

3. Open up the newly created vuelidate.js file within the /boot directory in your editor and replace the code in that file with this code:

import Vuelidate from 'vuelidate'
export default ({Vue}) => {
  Vue.use(Vuelidate)
}

4. Open up quasar.conf.js and add the plugin at the top of the file under the boot property. It should look something like this:

Notice the vuelidate entry in the boot array.

That’s it!

Now you should be able to access the Vuelidate methods and properties in your Single File Components like so:

$v.myProp.$error // in the template code
$v.touch()
or 
this.$v.touch() // in the JavaScript code
this.$v.$invalid

For more information about Vuelidate, please refer to the Vuelidate documentation.

And have fun with Quasar!

If you need more information about Quasar itself, here are a few links for your consideration:

COMPONENTS: https://github.com/quasarframework/quasar
CLI: https://github.com/quasarframework/quasar-cli
THE DOCS: https://quasar-framework.org/
DISCORD: http://chat.quasar-framework.org/
FORUM: https://forum.quasar-framework.org/
TWITTER: https://twitter.com/quasarframework
STEEM: http://steemit.com/@quasarframework