vee validate works for the first field only?

Question

I have created two modals (loginModal and registerModal), where a user can switch between them dynamically.

There is an issue with the "VeeValidate" plugin, it's only validating the first field if I added something to the error bag.

I have created a demo for the problem here: https://2o2z51km00.codesandbox.io/ Source: https://codesandbox.io/s/2o2z51km00

1. Open loginModal (it will open by default).
2. Submit the default login info (you will see a "you have entered invalid credentials" message).
3. Switch to register modal after seeing that message.
4. Submit register modal (with empty inputs)

As you can see, it highlight the first field only (full name field) while ignoring other fields.

Why does that happen?

Answer 1

After a lot of time spent, and not aware of recent changes in the later versions from 2.1 til 2.2.3.

The problem was having multiple modals trying to use the same names. This can be fixed by using scopes as i've implemented in a fork to your project.

https://codesandbox.io/s/vv0jqprpj0

So by adding too the input:

data-vv-scope="SCOPE"

And using this to validate the fields

this.$validator.validate('SCOPE.*')

A side note to this is that you were using v-show on the RegisterModal to show errors and v-if on the LoginModal - The correct is to use v-if