Validating forms in Quasar Framework - Vee-Validate

On my previous post Validating forms in Quasar Framework - Vuelidate we saw how to validate a Person Registration form using Vuelidate validation library.
On this post I will show you how to validate the same form using Vee-Validate validation library.

VeeValidate is a validation framework built specifically for Vue.js.
VeeValidate is a collection of function-based APIs and Vue.js components that allow you to validate individual form elements and even the entire form.

1- Lets start installing the npm package

npm install vee-validate --save

2- Once the vee-validate package installation is done and success we need to create a new Quasar boot file.

quasar new boot vee-validate

3- On this boot file we will setup the Vee-Validate and add it to our app. Go to src/boot directory and open vee-validate.js file that was just created. Replace the code on it with the next code.

import { 
    configure, 
    extend, 
    ValidationObserver, 
    ValidationProvider 
} from 'vee-validate'
import { 
    email, 
    required 
} from 'vee-validate/dist/rules'

export default async ({ Vue }) => {
  // Register it globally
  Vue.component('ValidationProvider', ValidationProvider)
  Vue.component('ValidationObserver', ValidationObserver)
}

// Add build-in rules
extend('required', required)
extend('email', email)

// Add custom rule
extend('minMaxValue', {
  validate: (value, {
    min,
    max
  }) => {
    return value >= Number(min) && value <= Number(max)
  },
  message: (fieldName, {
    min,
    max
  }) => {
    return `${fieldName} must be between ${min} and ${max}`
  },
  params: ['min', 'max']
})

4- Now we need to register the new vee-validate boot in our Quasar app. Open quasar.conf.js file and add 'vee-validate' item in boot array. it should looks like this:

//...
boot: [
  'i18n',
  'vee-validate'
],
//...

5- Now we have the Vee-Validate ready to be used in our app. Lets see how to validate a simple Person Registration form using Vee-Validate.

a) First create the data properties to be assigned to the form fields.

data: () => ({
  name: 'Marlon',
  age: 36,
  email: '[e-mail]'
}),
methods: {
  onSubmit () {
    console.log('Form submitted')
  }
}

b) Create a form with 3 field (Name, Age and Email) and assign the data properties to the v-models.

<q-form style="width: 60%" @submit.stop="onSubmit">
  <q-input
    outlined
    label="Name"
    v-model="name"
  ></q-input>
  <q-input
    outlined
    label="Age"
    v-model="age"
  ></q-input>
  <q-input
    outlined
    label="Email"
    v-model="email"
  ></q-input>

  <q-btn label="Submit" type="submit" color="primary"/>
</q-form>

c) Now lets validate the form with the rules we already register on vee-validate.js file. To do this we just need to wrap our form with ValidationObserver component and each of the form elements with ValidationProvider component.
Replace the form code we did before with the next code:

<ValidationObserver v-slot="{handleSubmit}">
  <q-form style="width: 60%" 
          @submit.stop="handleSubmit(onSubmit)"
  >
    <ValidationProvider 
        name="Name" 
        rules="required" 
        v-slot="v"
    >
      <q-input
        outlined
        label="Name"
        v-model="name"
        :error="v.errors.length > 0"
        :error-message="v.errors[0]"
      ></q-input>
    </ValidationProvider>

    <ValidationProvider
        name="Age" 
        rules="required|minMaxValue:1,180" 
        v-slot="v"
    >
      <q-input
        outlined
        label="Age"
        v-model="age"
        :error="v.errors.length > 0"
        :error-message="v.errors[0]"
      ></q-input>
    </ValidationProvider>

    <ValidationProvider
        name="Email" 
        rules="required|email" 
        v-slot="v"
    >
      <q-input
        outlined
        label="Email"
        v-model="email"
        :error="v.errors.length > 0"
        :error-message="v.errors[0]"
      ></q-input>
    </ValidationProvider>

    <q-btn label="Submit" type="submit" color="primary"/>
  </q-form>
</ValidationObserver>

The handleSubmit slot method on ValidationObserver prevent the form be submitted with not valid elements (elements with validation error).

Now lets display a message when the form is submitted with all the data correct without validation errors. Remember that the onSubmit method will be executed only if all fields on the form are valid.

onSubmit () {
  this.$q.notify({
    color: 'green-4',
    textColor: 'white',
    icon: 'cloud_done',
    message: 'Form submitted'
  })
}

Done, we have validated or form using the Vee-Validate validation framework.

Have fun with Quasar validating your future forms with Vee-Validate!

References
https://quasar.dev/
https://vee-validate.logaretm.com/v3/

Comments

[Johnny Driesen]

Hi,

Thanks for sharing your knowledge, and creating this post..

Does this also support multi-language ?
(meaning... will the error-message automatically be translated based on the i18n settings ?)

Thanks in advance for any reply.