Vee-validate: data-vv-scope failing to validate on inputs

[jackkitley]

Versions

• vee-validate: ^2.0.9
• vue: ^2.5.2

Describe the bug
Im using vue-form-wizard with vee-validate and ive been having trouble with validating inputs in each step. I would like to group the inputs in each step by eith ref or by scope. I decided that i would use a scope on each input per step. So step 1 would have inputs with data-vv-scope="step1" assigned to the elements.

When i click next the step calls a method and then the step must be validated. I have got to a point where the step validates but the errors arent shown around the inputs. Im trying to get the errors to display.

To Reproduce
Steps to reproduce the behavior:

I have inputs with

                    <input
                      v-validate ="'required|numeric|min:13|max:13|verify_id_number'"
                      v-model="form.idnumber"
                      data-vv-scope="step1"
                      data-vv-as="ID Number"
                      name="idnumber"
                      type="text"
                      placeholder="ID Number"
                      class="form-control input-lg">

It seems that scope is ruining the error message to come out. When i click next step the following is called

stepOneValidate () { return new Promise((resolve) => { this.$validator.validateAll('step1') .then((isValid) => { resolve(isValid) }) .catch(() => { resolve(false) }); }) },

The above code doesnt display the error messages around the inputs but it does invalidate the step which is correct.

Expected behavior
I expect that on failing validation of the above method that the input error messages should be displayed around the inputs.

Demo Link
I have a demo link http://demo.auction.co.za/register where you can see that validation fails for the step but the inputs dont display the error.

Desktop (please complete the following information):

• Browser [Chrome right now]
• Version : Latest

Additional context
Would like to just display the error messages which is my goal.

If i try to validate manually in the above method i now get:

Uncaught (in promise) Error: [vee-validate] Validating a non-existent field: "id_number". Use "attach()" first.

[logaretm]

Not sure if you provided a code to display the error, all I can see is the
input code. Anyways to display scoped errors you should use the following.

<span>{{ errors.first('scope.field') }}</span>

>

[jackkitley]

@logaretm

Wow, thanks for this. I had the html in but i had

                    <span
                      v-show="errors.has('idnumber')"
                      class="help-block">{{ errors.first('idnumber') }}</span>

This wasnt showing the errors

I didnt know you needed to add the 'scopename.fieldname'