Trying out both Vuelidate & Vee-Validate, Form and Form Validation Libraries, In the New Vue3 Release

Ionic Framework Ionic Vue
1

Sample app showing vue3 and Ionic Framework form validation examples with Vuelidate & Vee-Validate, both are in early release, but wanted to git it a try.

Wanted to see how they would function with Ionic Vue web components.

I think that Vuelidate integration was abit more straightforward. Will dig alittle deeper with nested forms in the next sample and then add a video

Ionic-vue-validation-app: https://buff.ly/3crnsks
Vue3 Ionic Videos: https://www.youtube.com/playlist?list=PL2PY2-9rsgl2uKW0DB5FJ-YRCAG-JuSWN

2

@aaronksaunders thanks for your great tutorial and example code. I am brand new to Ionic and was working on implementing Vee-Validate but it seems that the most recent release of Ionic (5.5.3) is causing some weird issues where Vee-Validate is not syncing correctly as a value of an input is changed. It especially doesn’t work when validateOnInput: true is set. If I output the value of the input as I type, it flashes to the new value and then goes back to the initial value.

I downgraded Ionic to 5.5.2 and it works as expected. I am thinking it is related to Pull Request #22749. Maybe the e.stopImmediatePropagation(); line but am not 100% sure. Do you think this would be considered a regression in Ionic?

Here is an example snippet.

<v-form
    @submit="createAccount"
    :validation-schema="validationRules"
    :initial-values="initialValues"
    v-slot="{ errors, meta, values, isSubmitting }"
>
    <ion-item>
        <ion-label position="stacked">Name</ion-label>
        <v-field name="name" v-slot="{ field }">
            <ion-input type="text" name="name" placeholder="Your name" v-bind="field" />
            <p v-if="errors.name">{{ errors.name }}</p>
        </v-field>
    </ion-item>
    <ion-button class="mt-4 mx-4" expand="block" type="submit" :disabled="!meta.valid || isSubmitting">Create account</ion-button>
</v-form>
3

I would create a sample project and submit it as an issue… cause that is what @ldebeasi will need to determine if it is a regression

2 Likes
4

Ok, will do! Thanks!

5

Can you give this a try with Ionic Vue v5.5.4? I think this might have been fixed.

6

@ldebeasi thanks for the update. I tried it with 5.5.4 and there is still an issue when VeeValidate is validating OnInput. The new value is set for a second and then goes back to the original value. I am still planning on creating a test application to show the issue in the next few days.

1 Like
7

An issue has been created here:

8

try this… it works fine for me. as=“ion-input” instead of making the ion-input as the child component of the v-field component

<ion-item>
  <ion-label position="stacked">Name</ion-label>
  <v-field
    name="name"
    as="ion-input"
    rules="required|min:3"
    placeholder="Your name"
  />
</ion-item>
<ion-item>
  <ion-label position="stacked">Email</ion-label>
  <v-field
    name="email"
    rules="required|email"
    type="email"
    as="ion-input"
    placeholder="Your email"
  />
</ion-item>
1 Like
9

I responded on the GitHub issue here.

1 Like