Vuelidate: How do I prevent a nested validation from interfering with parent validation?

Viewed 15

I have a form application that consists of multiple modals, and to proceed to each modal, some fields are required to be filled out by the user. The problem is that modal 1 contains a field that has a nested validation from an object that already has it's own validation. As a result I cannot proceed to modal 2 because it requires the nested field in that modal to be filled out.

To be more clear:

Modal 1: Units need to be validated.

Modal 2: Taxes need to be validated.

Error: Button to proceed is disabled in Modal 1, because taxes in Modal 2 has not been filled out.

How do I tell the application to accept the parent validation, but ignore the nested validation until I have proceeded to the next modal?

******* THIS BUTTON IS IN MODAL 1 *******?
<button @click.prevent="Next" :disabled="$v.wizard.units.$invalid">

******* THIS FIELD IS IN MODAL 2 *********

<b-form-group :label="Taxes" class="col-md-6">
    <common-date-picker vuelidate v-model="$v.wizard.units.taxes"/>
</b-form-group>
              
  

    validations: {
      wizard: {
        units: {
          $each: {
            taxes: {
              required
            },
          },
          required,
          minLength: 1
        },

0 Answers
Related