va-form method validate() not working on required input + v-if

[acarval]

Hi there,

I'm using vuestic-ui 1.3.5, and I have a specific use case where i'm trying to validate a form with input that can be remove from the dom (with the v-if condition).

Here a simple example of what i'm trying to do:

<template>
  <va-form ref="errorWhenNotInDom" @validation="data.validation = $event">
    <va-switch label="Checkbox" left-label v-model="data.checkBox" />
    <va-input
      v-if="data.checkBox"
      label="In Dom if checkbox is true"
      :rules="[(value) => Boolean(value) || 'error']"
      v-model="data.presentWhenCheckBox"
    />
  </va-form>
  <button @click="$refs.errorWhenNotInDom.validate()">Validate</button>
  <div>
    Validate form:
    <va-chip>{{ data.validation }}</va-chip>
  </div>
</template>

<script>

import { reactive } from 'vue';

export default {
  setup(props) {
    const data = reactive({ validation: '', checkBox: true, presentWhenCheckBox: '' });
    return {
      data,
    };
  },
};

</script>

Steps to reproduce:

• Click on the checkbox
• Click on the button validate

Result:

• The form is not valide

Expected

• The form to be valide

In this example i can easily overcome this by changing the way i'm rendering the form (using v-show for example and changing the rules function), but in some use case (with very complex form) it will have been easier if the valide method is "up to date" with what's inside the form.

My question is the following: is it the expected behavior/design ?

Thank you for your help !

[asvae]

Hey.

It's intended behavior :).

You can do validation in a couple of ways, i.e.:

• Component based - input components do validation. (that's what we use)
• Form + model based - form would have access to model and all validation rules. Input componens themselves act as triggers.

We're doing some research on validation system, so might end up with some hybrid approach.

[acarval]

Hey,

Ok, thank you for your answer :)