How to use vee-validate in a parent-child relationship

Question

I have a couple of components that need to be validated. The problem is that that inputs are in a child component while the submit button is in the parent like this

ParentComponent.js

<ValidationObserver v-slot="{ passes }"> 
     <form @submit.prevent="passes(someSubmitFunction)">
         <ChildComponent />
     </form>
</ValidationObserver>

ChildComponent.js

     <ValidationProvider rules="required" v-slot="{ errors }" name="vendorName">
         <el-input />
      </ValidationProvider>

What am I doing wrong here?

Irrelievable

Answer 1

Luckily there is a pattern for sharing validator scope between parent and child components! You can inject the validator from the parent into the child so that they use the same instance. This means that you can validate child inputs from the parent using this.$validator.validate()

Docs: http://vee-validate.logaretm.com/v2/concepts/injections.html

Pewit

what's the solution for v3? In v3 , there's no more $validator – Stelmach

@Stelmach you have to use a ValidationProvider and ValidationObserver. That's about all I know, I chose to stay on v2 since it was much simpler. – Pewit

@Stelmach saw this one year later while looking for v4 solution, added a suggested answer below ... so if you're still scratching your head look no further 😄 – Fatherless

Answer 2

you can overwrite instance of chid component validator by parent component validator in created hook like this.

created() {
 this.$validator = this.$parent.$validator
}

notice: if you use mounted it dosent work because before DOM rendering replacing must be done.

Fail

Answer 3

For people like me, coming here for guidance in the future with v4 of vee-validate together with Vue3 Composition API and Typescript, I'd like to suggest this answer. It works by adding each validate method from useForm to an array and then on form submit it will loop through the array to ensure all validators pass asynchronously.

formAggregator.ts

import { InjectionKey, provide, ref } from "vue";

type ValidatorMethodType = () => Promise<{ valid: boolean }>;

export const AddValidatorKey: InjectionKey<
  (validator: ValidatorMethodType) => void
> = Symbol("AddValidatorKey");

export function useValidationAggregator() {
  const validators = ref<ValidatorMethodType[]>([]);

  // used by components to add validators to the array
  const register = (validator: ValidatorMethodType) => {
    validators.value.push(validator);
  };

  // provide this aggregator to components
  provide(AddValidatorKey, register);

  // run all validators
  const validateAll = async () => {
    return Promise.all(validators.value.map((v) => v()));
  };

  return {
    validateAll,
    register,
  };
}

ParentComponent.vue

<template>
<form @submit.prevent="onSubmit">
    <ChildComponent />
   <button type="submit" :disabled="inSubmit">Submit</button>
</form>
</template>
<script setup>
import useValidationAggregator from "./formAggregator.ts"
const { validateAll } = useValidationAggregator();
// note: you can use register() to also add validator from the parent component

const inSubmit = ref(false);
const onSubmit = async () => {
   try {
      inSubmit.value = true;

      // run all form validators
      const results = await validateAll();

      // ensure all are valid
      if (results.some((r) => !r.valid)) {
         return;
      }

      // todo: post form or whatever you need after validation passes
   } finally {
      inSubmit.value = false;
   }
}
</script>

ChildComponent.vue

<template>
   <!-- some validated fields -->
</template>
<script setup>
import { AddValidatorKey } from "./formAggregator.ts"

const { validate } = useForm({ ... setup validated fields ... });

// add this component's validator to the aggregator
const addValidator = inject(AddValidatorKey, () => {
  throw new Error("No aggregator provided for inject");
});
addValidator(validate);
</script>

Fatherless

firstly Thank You for this solution... small doubt, what if i have multiple models eg: Project, Task. How would validateAll() only validate the model to which submit button has been clicked? – Capacitance

@Capacitance this solution is only for when a single form has one or many child components – Fatherless

Answer 4

When running validation for parent ValidationObserver it validate child ValidationObserver too.
If you need validate only parent ValidationObserver you can use "disabled" props for child observer.
https://vee-validate.logaretm.com/v3/api/validation-observer.html#props

<ValidationObserver ref="parent">
  <ValidationObserver ref="child" :disabled="true">
    <ValidationProvider rules="required">
      <!-- This child observer will not be validated with parent validation -->
    </ValidationProvider>
  </ValidationObserver>
</ValidationObserver>

Noctilucent

Answer 5

you can use a ref on the child component then try to do a validation on that ref when calling someSubmitFunction

Something like this :

  const isValid = await this.$refs.childref.validate()

Sphere

Actually I don't think you can. When I call my child observer ref like this; const isValid = await this.$refs.consentPanel.validate(); it throws an exception about validate is not a function. – Prostatectomy