Vee-validate: Multi-Step Form

[zangab]

Versions

• vee-validate: 3.1.3
• vue: 3.0.1

Describe the bug
I am using vee-validate on a multi-step form. I have an outer ValidationObserver and multiple inner ValidationObserver for the steps. If I proceed from step 1 to step 2, the fields in the step 2 are validated immediately - showing the error messages without having touched the inputs.

To reproduce
Steps to reproduce the behavior:

1. create ValidationObserver:
   <ValidationObserver v-slot="{ handleSubmit, errors }" tag="div">
2. add multiple Observers inside as steps:

<ValidationObserver
    v-if="step === 0"
    tag="div"
>

1. add (multiple) ValidationProvider

<ValidationProvider
  name="name"
  tag="div"
  rules="required"
>

1. setup steps data and add on submit handler

onSubmit (e) {
  if (this.step >= 2) {
    console.log('do something')
  }

  this.step++
}

Expected behavior
No validation on step changes.

Demo link
Also happens in the docs samples for nested-observers. Click 'Next' and the firstName field error message shows up.

Desktop (please complete the following information):

• OS
• Browser Firefox
• Version 70

[DM2489]

This isn't really down to Vee-Validate itself, but Vue. Vue attempts to keep a similar DOM structure and patch any changes manually, instead of constantly rendering new elements all the time.

https://www.telerik.com/blogs/in-vue-when-do-i-actually-need-the-key-attribute-and-why

All you need to do here is add a key attribute, with a unique key for the observer.

https://codesandbox.io/s/codesandbox-1b13t

[zangab]

@DM2489
oh my ... 🙈
I mistakenly called a validation reset first on every step change but I actually added a transition and that needs keys anyway, so it works like a charm (without the reset). 😀
sorry, my fault. cheers for the hint though. 👍