Vuetify: [Feature Request] Integrate custom inputs with vuetify forms and validations

[eidellev]

New Functionality

I am currently trying to implement a signature pad that will integrate with Vuetify forms, allowing to ensure the user signs before proceeding.

Improvements

Currently I have to validate the signature pad separately from the rest of the form

Bugs or Edge Cases it Helps Avoid

this will simplify creating forms with custom inputs

[KaelWD]

Not sure how we're supposed to be able to provide anything for that, but you can simply copy the interface of the other inputs:

interface Validatable {
  // data:
  errorBucket: Array<false | string>
  shouldValidate: boolean
  valid: boolean

  // methods:
  validate: (force?: boolean = false, value?: any) => boolean
  reset: () => void
}

There is also a mixin that you could use that already has all that shit built in, but it's pretty closely coupled to our component structure so maybe just use it as inspiration: https://github.com/vuetifyjs/vuetify/blob/dev/src/mixins/validatable.js

---

2019 update:

The mixin has moved to https://github.com/vuetifyjs/vuetify/blob/95206e9b/packages/vuetify/src/mixins/validatable.ts

Validatable interface has changed:

interface Validatable {
  shouldValidate: boolean
  hasError: boolean

  // methods:
  validate: (force?: boolean = false, value?: any) => boolean
  reset: () => void
  resetValidation: () => void
}

The most basic implementation only needs hasError
shouldValidate is used by v-form's lazy-validation
the methods are called if you call the corresponding method on v-form

Your component also needs to register itself with the form:

export default {
  inject: {
    form: { default: null }
  },
  created () {
    this.form && this.form.register(this)
  },
  beforeDestroy () {
    this.form && this.form.unregister(this)
  }
}

[eidellev]

@KaelWD Thanks! Works like a charm 😄

[KaelWD]

Closing as resolved, there's nothing actionable in this issue as far as I can tell.