Vee-validate: validateAll() not running on validations attached in child component

[nickhall]

Versions:

• VueJs: 2.5.2
• Vee-Validate: 2.0.0-rc.19

Description:

Forgive me for not having a fiddle but I'm pressed for time. Basically I'm trying to validate multiple fields with a single validator as mentioned here: https://github.com/baianat/vee-validate/issues/375

The validation itself works in real time when changing the fields, but when I call validateAll(), the validations are not caught and I can submit the form.

Steps To Reproduce:

I have a child component with the validator injected and the form data passed in as a v-model.

    inject: ['$validator'],
      props: ['value'],
    computed:
    // ...
        fullStartDate () {
          return `${this.value.startYear}-${this.value.startMonth}-${this.value.startDay}`
        },
        fullEndDate () {
          return `${this.value.endYear}-${this.value.endMonth}-${this.value.endDay}`
        }
      },
      watch: {
        fullStartDate(v) {
          this.$validator.validate('startDate', v)
        },
        fullEndDate(v) {
          this.$validator.validate('endDate', v)
        }
      },
      created () {
        this.$validator.attach('startDate', 'date_format:YYYY-MM-DD')
        this.$validator.attach('endDate', 'date_format:YYYY-MM-DD')
      }

In the parent component, I have a submit button that calls validateAll().

        this.$validator.validateAll()
        if (this.errors.any()) return false

All v-model values are bound to select inputs.

In the template I display the errors, and they are detected and properly change when I change the values, as mentioned, but when clicking submit, it doesn't work. I realize that I'm only watching the values and validating them then. How can I actually check the value when validateAll() is called?

[nickhall]

OK, I figured out that I need to use an object with a getter defined when I attach to the validator.

        this.$validator.attach({
          name: 'startDate',
          rules: 'date_format:YYYY-MM-DD',
          getter: () => this.fullStartDate
        })

As far as I can tell this isn't in the docs, so maybe an addition would be good.

[danielclariondoor]

Thank you!!!!
I couldn't figure this out.