Vee-validate: Nested ValidationObserver or ValidationProvider result ignorance

[Alideniz]

Is your feature request related to a problem? Please describe.
If you have nested form with ValidationObserver and they use ValidationProvider, you can't ignore result of some of them.

Describe the solution you'd like
ValidationObserver should have a prop for ignore to child component validationProvider's .

[logaretm]

Why would you need to "ignore" some providers? Also using nested observers has only 1 valid use-case which is when you need to access each observed group validations state simultaneously.

[Alideniz]

I have a ValidationObserver which has nested ValidationObserver and it does't related each other. I need to partial validation in my case

[mahmutBerat]

Here is an example of this problem that I faced. I have a form that is wrapped by ValidationObserver which enables/disables submit button of form by validity of that form. However, I am using another custom component in that form which has also separated validation logic. I could not manage parent Validation Observer subscribers except from nested Validation Observer and Providers.

https://codesandbox.io/s/veevalidate-30-multi-forms-example-ew4qo?fontsize=14

Pseudo code

<validation-observer>
  <form>
    <validation-provider>  input1  </validation-provider>
    <validation-provider>  input2  </validation-provider>
    <div>
      <validation-observer>
        <validation-provider>  input3  </validation-provider>
        <validation-provider>  input4  </validation-provider>
        <button>Checks input3-input4</button>
     </validation-observer>
   </div>

   <button>Submit Form (should check only input1-input2)</button>
  </form>
</validation-observer>

Versions

• vee-validate: 3
• vue: 2.6

[kkojot]

I've got the same problem as @mahmutBerat described. Does anyone know how to work around this?

[mahmutBerat]

@kkojot I have applied a work around for this problem, but I think that it is not a nice one. Manual validation that is described here https://logaretm.github.io/vee-validate/guide/validation-provider.html#manual-validation, can be used for inner validation observers. After using different ref property, you can listen changes of inputted value then apply this manual validation.

However, it would be nice to have kind of a exclusion property for observer to specify which inner observers-providers need to be ignored

[kkojot]

The provided link doesn't work. I've got two observers with different refs, but even if I validate manually like this.$refs.masterObserver.validate().then(success => {...}); it returns success = false and the nested observer got invalid state. I still don't know how you made it work.

[DotNetGit]

The same issue here. Please take a look the following link https://codesandbox.io/s/codesandbox-7ygup. Root observer has error from nested observer. So then if you have complex component with many nested components with own observers they all will forward errors to top level observer. If it is "by design", it would be nice to have an option to ignore observers somehow.

<template>
  <div>
    <ValidationObserver ref="validator1" #default="{ errors }">
      <div>{{ errors }}</div>
      <ValidationProvider name="email" rules="required|email" v-slot="{ errors }">
        <input v-model="email" type="text" placeholder="Your email">
        <div>{{ errors }}</div>
      </ValidationProvider>

      <ValidationObserver ref="validator2">
        <ValidationProvider name="name" rules="required" v-slot="{ errors }">
          <input v-model="name" type="text" placeholder="Your first name">
          <div>{{ errors }}</div>
        </ValidationProvider>
      </ValidationObserver>

      <a href="javascript:void(0);" @click="click();">Click</a>
    </ValidationObserver>
  </div>
</template>

<script>
export default {
  data: () => ({
    name: "",
    email: ""
  }),
  methods: {
    click() {
      this.$refs.validator2.validate();
    }
  }
};
</script>

[Safirion]

Same problem here. I have a big form with other component in it wich may have his own ValidationObserver and I just want to validate the parent and not children.

[logaretm]

It is by design, observers are meant to wrap single forms. If it happens that you have a nested observer then you can think of it as fieldset and you don't really ignore fieldsets in a form. Either you can break them up or not use nested observers at all.

I would say in 99% of the cases you don't need a nested observer.

[Landen13]

What if a form consists of multiple fieldsets, and every single fieldset has it's own marker for it's validity. Not for input validity, but for a set of inputs. How to deal with that?

[burzum]

@logaretm we have an "interesting" case because of UX requirements. The UX person doesn't want a close button for each participant, instead an empty participant from the list should be ignored. But the first participant is always required to be valid. Also if one of all the (up to 5) participants, except the first, was not touched or every field is empty, it should skip validation on that participant. The main form has also a few fields like TOS agreement and such.

I'm trying to find a way to iterate over all of the child observers without success so far... Any recommendtions or ideas how to fulfill this requirement and making the validation work as described?

We are using Vee Validate v3 and Vue v2.

This is a mockup to illustrate the component structure:

<observer>
   <listComponent>
       <childComponent>
           <observer>
               ...
           </observer
       <childComponent>
       <childComponent>
           <observer>
               ...
           </observer
       <childComponent>
       <childComponent>
           <observer>
               ...
           </observer
       <childComponent>
   </listComponent>
   <submit-button>
<observer>