Using Vue3 And VeeValidate for Forms and Form Validation

#vue #ionic #javascript #tutorial

Overview

Forms and Form Validation are a key part of many applications so I wanted to create a small sample application showing one library VeeValidate Template Based Validation for Vue.js, and how to integrate it with the new Vue3 Release.

Since a lot of folks who read my content know I work with Ionic Framework, I have implemented this solution with Ionic Vue3 Web Components

Video

See Source Code from Video

Additional Examples

See Source Code for Additional Examples

Setting Initial Values

<v-form v-slot="{ values }" 
   @submit="onSubmit" 
   :initialValues="formData">
</v-form>

In the script, define the object with the appropriate key/value pairs to be assigned to the form

setup() {
  // set some initial values
  const formData = ref<any>({
    title: "Aaron",
    body: null,
    gender: "MALE",
    save : false
  });

  return { formData };
},

Working With Toggle, CheckBoxes

<ion-item>
  <ion-label>SAVE IT</ion-label>
  <v-field name="save" v-slot="{ field }">
    <!-- we need to set the checked property -->
    <ion-toggle v-bind="field" name="save" 
       :checked="field.value">
    </ion-toggle>
  </v-field>
</ion-item>

Top comments (4)

Arthur Seleznov • Feb 15 '21

why is it so different from process described in vee-validate documentation?
vee-validate.logaretm.com/v4/guide...

Aaron K Saunders • Feb 16 '21

this post is almost 6 months old and I suspect their API approach has changed since then... I will have to take a look when I get a minute... until then can you be more specific?