Skip to content

validateAll() not running on validations attached in child component #974

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
nickhall opened this issue Nov 13, 2017 · 2 comments
Closed

Comments

@nickhall
Copy link
Contributor

nickhall commented Nov 13, 2017

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: #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
Copy link
Contributor Author

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.

@danieljosephbrennan
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants