Using Vue3 And Vuelidate for Forms and Form Validation

See My Upcoming Book On Ionic & Vue JS

---

So last week I did a short video about using Vee-Validate with Vue3 and Ionic Framework new Vue Components.
I had someone ask me why didn't I used Vuelidate? There was no specific reason other than the last time I needed form validation, I had used Vee-Validate.

So what I have done here is reproduce the same example from the previous form/form validation post but this time using Vuelidate.

Code available at end of the post and please check out my videos on Vue3 and Ionic Framework

Setting Up

We are assuming you already have a vue3 project.

Install the library

npm install @vuelidate/core@2.0.0-alpha.4
npm install @vuelidate/validators@2.0.0-alpha.2

Since I am using typescript, I needed to make this change in shims-vue.d.ts

declare module '@vuelidate/core';
declare module '@vuelidate/validators';

Setting up My Form Fields

First in the script area of my component, import the library

import { useVuelidate } from "@vuelidate/core";
import { required, email } from "@vuelidate/validators";

In the setup function lets defined the form fields.

// set fields and some initial values
const fform = reactive({
  title: "",
  body: "",
  emailAddress: "",
  gender: "MALE",
  save: true,
});

Next we will map the rules to the fields using rules from vuelidate that we imported.

const rules = {
  title: { required },
  body: { required },
  emailAddress: { required, email },
  gender: {},
  save: {},
};

We bind all of this to the Vuelidate object using the useVuelidate hook. I could have used ref originally to avoid all of this, but I like working with a form object and not a bunch of fields.

Ref & Reactive:

• ref() takes a primitive value and returns a reactive and mutable ref object
• reactive() takes an object and returns a reactive proxy of the original

const vv = useVuelidate(rules, {
  title: toRef(fform, "title"),
  body: toRef(fform, "body"),
  emailAddress: toRef(fform, "emailAddress"),
  gender: toRef(fform, "gender"),
  save: toRef(fform, "save"),
});

We need to have a function to handle when the user submits the form. In this situation we first trigger a validation of the form using vv.value.$touch(); if there is an error, we exit and do not submit the form.

// handle the submit of the form, only called
// if the form is valid
const onSubmit = () => {
  vv.value.$touch();

  if (vv.value.$invalid) return;

  alert("Form Submitted " + JSON.stringify(fform, null, 2));
};

Since we are using a setup method, we need to return the appropriate functions and properties so they can be accessible in the template.

return {
  router: useRouter(),
  onSubmit,
  vv,
};

Setting up My Form Template

In my form I have a few fields and since I am using Ionic components, initially I was concerned I would have to do some extra work but i didn't have to.

We have access to the model associated with the fields we created by using the vv object returned from the useVuelidate call; We use those models in our form

<ion-item>
  <ion-label>Title</ion-label>
  <ion-input type="text" name="title" v-model="vv.title.$model" />
</ion-item>

Form Initial Values

The great thing is since we are working with vue binding, the initial values that we set for our form fields get passed in through the model are set the input elements

<ion-item>
  <ion-label>Gender</ion-label>
  <ion-select name="gender" v-model="vv.gender.$model">
    <ion-select-option>MALE</ion-select-option>
    <ion-select-option>FEMALE</ion-select-option>
  </ion-select>
</ion-item>

See above where we setup form object

Form Submit

No special magic with submitting the form, we just call our function and check for errors. If errors we can render them

<form @submit.prevent="onSubmit" novalidate>
 ...
</form>

Form Field Errors

Form fields have error objects associated with them, we can access the errors using the name of the field and the vuelidate object.
The code below renders the first error message associated with the input element named title

<p>{{ vv?.title?.$errors[0]?.$message }}</p>

Wrap Up

This was just a quick look at Vuelidate, I will be taking a deeper dive using the form and form validation functionality with a Modal Form video, blog post I am working on. In that example we will be using nested objects and more complex UI so it should be interesting to see how it works out.

Source Code

aaronksaunders / ionic-vue-validation-app

Sample app showing vue3 and ionic form validation examples with

ionic-vue-validation-app

Sample app showing vue3 and ionic form validation examples with

• vuelidate - https://vuelidate-next.netlify.app/#installation
• vee-validate - https://vee-validate.logaretm.com/v4/
• Ionic Vue - https://ionicframework.com/blog/announcing-the-new-ionic-vue-beta/

SEE IONIC VUE3 VIDEOS

• https://www.youtube.com/playlist?list=PL2PY2-9rsgl2uKW0DB5FJ-YRCAG-JuSWN

View on GitHub

Ionic Vue Videos

Click To View Playlist

Comments

[György Márk Varga]

Hi!
Nice tutorial! I have one question though. The form is valid on initial load even when using required on inputs (the form's $invalid attribure is false) and the form is not touched. How could we fix this?

[György Márk Varga]

github.com/vuelidate/vuelidate/iss...
I found that it might be a bug in the library...