Validation triggers when using form in a modal/dialog component

[rvmourik]

Hi There,

Thanks for the great lib!!

In our webapp we have a modal component, which works with a teleport and so it only is present in the DOM when it is actually "open".

What we see happening is that a form which is present in the Modal is already validated when the modal becomes first visible (a.k.a. present in the DOM). If I let the modal open instant on loading the page, the form is not validated.

Setting the property validateOnMount to false through useForm or useField also doesn't have any effect.

The Modal component is code from @headlessui

Thanks in advance.

<template>
    <Alert
      v-model="showAddUserModal"
      title="Welke collega wil je uitnodigen?"
      text="Vul hieronder het e-mailadres in van de collega die je wilt uitnodigen."
      dismissable
      :is-loading="isSubmitting"
      :ok-cancel="false"
      ok-label="Verstuur uitnodiging"
      :on-ok="handleSubmitForm"
    >
      <div class="mt-4">
        <FormInput type="email" name="email" :label="$t('app.general.email')" />
      </div>
    </Alert>
</template>

<script>
  import { defineComponent, reactive, ref, watchEffect } from 'vue';
  import { useForm } from 'vee-validate';
  import { object, string } from 'yup';

  export default defineComponent({
    emits: ['after-leave'],
    setup() {
      const initialValues = reactive({ email: '' });
      const showAddUserModal = ref(false);
      const isSubmitDisabled = ref(true);
      const schema = object().shape({
        email: string().email().required()
      });

      const {
        meta: formMeta,
        handleSubmit,
        isSubmitting
      } = useForm({
        initialValues,
        validationSchema: schema,
        validateOnMount: false
      });

      watchEffect(() => {
        if (formMeta.value.touched) {
          isSubmitDisabled.value = !formMeta.value.valid;
        }
      });

      const handleSubmitForm = (done) => {
        handleSubmit(
          async (values) => {
            await new Promise((resolve) => setTimeout(resolve, 3000)); // for testing purposes
            console.log('validation succes');
            done();
          },
          () => {
            console.log('validation failes');
          }
        )();
      };

      return {
        showAddUserModal,
        isSubmitting,
        handleSubmitForm
      };
    }
  });
</script>
</script>

[rvmourik]

@logaretm Any change you have some input for me? I experience the same with form elements that are renderen within a dynamic component (<component :is="componentContainingFields" />.

When the dynamic component is renderend, it instantly validates the fields and marks them as invalid (because there are no values yet), but the user hasn't had the change to enter them because the fields just renderen :-)

Thanks in advance

[rvmourik]

@logaretm just found this issue #3415, is that what's going on here?

[logaretm]

Hey, sorry I missed this.

Yes. that happens when you have the form initialized via useForm in the modal component, that means the validation already has been run and since the fields do not exist, vee-validate reports the errors assuming they are custom or virtual fields.

When it is mounted, the fields take back their errors. You can solve this in the way mentioned in the issue, I personally reset the form for modal dialog forms whenever it is shown/hidden.

Another way to handle this is to use the Form component, since it will follow the same visibility rules as the fields it would work correctly.

<template>
    <Alert
      v-model="showAddUserModal"
      title="Welke collega wil je uitnodigen?"
      text="Vul hieronder het e-mailadres in van de collega die je wilt uitnodigen."
      dismissable
      :is-loading="isSubmitting"
      :ok-cancel="false"
      ok-label="Verstuur uitnodiging"
      :on-ok="handleSubmitForm"
    >
      <Form as="div" class="mt-4">
        <FormInput type="email" name="email" :label="$t('app.general.email')" />
      </Form>
    </Alert>
</template>

It would be tricky to pass the modal events to the Form to handle submissions in that case. So resetForm is the way to go with the composition API.

[rvmourik]

no problem, thanks for the explanation.

[twolfvb]

resetting the form on mount didn't quite work for me. But as suggested by the original issue, via using v-show instead of v-if did the trick for me.