DEV Community: Marlon

Validating forms in Quasar Framework - Vee-Validate

Marlon — Tue, 02 Feb 2021 03:26:34 +0000

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: 'marlon@gmail.com'
}),
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/

Validating forms in Quasar Framework - Vuelidate

Marlon — Tue, 02 Feb 2021 02:27:10 +0000

Quasar is an MIT licensed open-source Vue.js based framework, which allows you as a web developer to quickly create responsive websites/apps in many flavours like SPA, SSR, PWAs and more.
Quasar is the number one solution based on Vue.js whether you are only building a desktop website, a desktop app, a mobile app, or even all of them.

Before submitting data to the server, it is important to ensure all required form controls are filled out, in the correct format. This is called client-side form validation, and helps ensure data submitted matches the requirements set forth in the various form controls.
Client-side validation is an initial check and an important feature of good user experience; by catching invalid data on the client-side, the user can fix it straight away. If it gets to the server and is then rejected, a noticeable delay is caused by a round trip to the server and then back to the client-side to tell the user to fix their data.

Quasar provide an internal validation solution that work perfect on any situation. But if you want to go with a more sophisticated and advanced validation system you can choose any of the validation library made for Vue.js that exist out there.
Quasar recommend Vuelidate but I do prefer other library called Vee-Validate.
What I do not like about Vuelidate is that do not feels natural Vue making you pass to v-model $v.name.$model (and other things like this) instead the original data property name.
Vee-Validate feels natural using nothing but components that wrap the form and fields you need to validate.
In this post we are going to see how to setup and how validate a simple form using Vuelidate. On a next post Validating forms in Quasar Framework - Vee-Validate I will show how to use Vee-Validate.

1- Lets start installing the Vuelidate npm package

npm install vuelidate --save

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

quasar new boot vuelidate

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

import Vuelidate from 'vuelidate'

export default async ({ Vue }) => {
  Vue.use(Vuelidate)
}

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

//...
boot: [
  'i18n',
  'vuelidate'
],
//...

5- Now we have the Vuelidate ready to be used in our app. Lets see how to validate a simple person registration form using Vuelidate.

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

data: () => ({
  name: 'Marlon',
  age: 36,
  email: 'marlon@gmail.com'
}),
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 import the validator from Vuelidate

import { 
  email, 
  maxValue, 
  minValue, 
  numeric, 
 required 
} from 'vuelidate/lib/validators'

d) And create the validation rules. After methods property add the validations property.

methods: {...},
validations: {
  name: {
    required
  },
  age: {
    required,
    numeric,
    min: minValue(1),
    max: maxValue(180)
  },
  email: {
    required,
    email
  }
}

e) We have created the rules to validate the fields. Note that the rules must have the same name of the data property that we are validating.
Now we need to add the validation rules to the form. Modify the form with the next code.

<q-form style="width: 60%" @submit.stop="onSubmit">
  <q-input
    outlined
    label="Name"
    v-model="$v.name.$model"
    :error="$v.name.$error" 
    error-message="Field required"
  ></q-input>
  <q-input
    outlined
    label="Age"
    v-model="$v.age.$model"
    :error="$v.age.$error"
    error-message="Age most be between 1 and 180"
  ></q-input>
  <q-input
    outlined
    label="Email"
    v-model="$v.email.$model"
    :error="$v.email.$error"
    error-message="Invalid email address"
  ></q-input>

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

f) And the last thing is validate the form data that is been sent to the onSubmit method.

onSubmit () {
  console.log(this.$v)

  if (this.$v.$anyError) {
    this.$q.notify({
      color: 'red-4',
      textColor: 'white',
      icon: 'warning',
      message: 'Form not valid'
    })
  } else {
    this.$q.notify({
      color: 'green-4',
      textColor: 'white',
      icon: 'cloud_done',
      message: 'Form submitted'
    })
  }
}

Done, we have validated a form using Vuelidate library.
On a next post Validating forms in Quasar Framework - Vee-Validate we will validate the same form using Vee-Validate library.

References
https://quasar.dev/
https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
https://medium.com/quasar-framework/adding-validation-to-quasar-based-forms-5391cee48c20