Custom Components Validation

TIP

Validation Components are a newer, better way to validate your inputs especially vue components, it is recommneded to use them over the v-validatedirective since it has some caveats with custom components. If you still want to use the directive to validate your components it is still reliable but it has some caveats mentioned below.

You might have a custom component that you want to treat as an input. Like a custom input field, it would have its own validator instance, but you want to validate it in the parent scope because it is simply just an input with some whistles on top. You can achieve this by using the directive normally like you would on a regular input element, but you must make sure that your component satisfies the following:

• Must emit an input event whenever the value changes.
• Should have a value and name getters define in the components $_veeValidate ctor options alternatively it can use the data-vv-name as a fallback for the name prop.

You can find a step-by-step guide on creating validatable components by reading this article.