DEV Community

loading...
Cover image for Using Vue3 And VeeValidate for Forms and Form Validation

Using Vue3 And VeeValidate for Forms and Form Validation

Aaron K Saunders
See more, like and subscribe 👉🏾 ‪Aaron Saunders 📺 https://www.youtube.com/aaronsaundersci?sub_confirmation=1
Updated on ・1 min read

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

Additional Examples

Alt Text

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>

Links

Discussion (4)

Collapse
mfcarneiro profile image
Matheus Felipe • Edited

Hey! thanks for this post! Will help me with Vue3 afterwards.

p.s: I'm really loving the ionic ecosystem and UX/UI, I just only use MD for everything hahahaha

Cheers!

Collapse
arthur_seleznov_b2cc4912c profile image
Arthur Seleznov

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

Collapse
aaronksaunders profile image
Aaron K Saunders Author

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?

Collapse
aaronksaunders profile image
Aaron K Saunders Author