Validating forms in Quasar Framework - Vuelidate

#quasar #vue #vuelidate #veevalidate

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