Validating forms in Quasar Framework - Vuelidate
Tags: quasar, vue, vuelidate, veevalidate
Published: 2021-02-02 02:27:10

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](https://vuelidate.js.org/) but I do prefer other library called [Vee-Validate](https://vee-validate.logaretm.com/v3/). 
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](https://dev.to/marlonfsolis/validating-forms-in-quasar-framework-vee-validate-4e7g) 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](https://dev.to/marlonfsolis/validating-forms-in-quasar-framework-vee-validate-4e7g) 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