Validating forms in Quasar Framework - Vee-Validate
Tags: quasar, vue, veevalidate
Published: 2021-02-02 03:26:34

On my previous post [Validating forms in Quasar Framework - Vuelidate](https://dev.to/marlonfsolis/validating-forms-in-quasar-framework-vuelidate-5efi) 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](https://vee-validate.logaretm.com/v3/).

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/