Vuetify child component form validation example

[james-boswell]

Hi

I was wondering if someone could provide a working example of using Vuetify form validation where the parent component contains the v-form with a submit button and it also contains a custom component which, for example, wraps a v-textarea which is required.

Similar to the "Validation with submit & clear" example here:
https://vuetifyjs.com/en/components/forms/

but using a custom child component.

Thanks

[JRB-y]

No answer for this?

[tsung-jen1503]

I am facing the same situation. I have a parent component with v-form and v-btn, and multiple custom child components contain several v-select and v-text-field to be validated (only one layer). The built-in validation for v-form is not worked with a parent and child relation. Could someone provide a solution? Thanks a lot!

[angeles-ricardo-89]

I am in the same situation, since there is not response or an explicit answer about this, it looks like it should be quite obvious for everyone else but me. I think I have to keep searching, I'll post here whatever I find.

[KaelWD]

Nobody here has said what they've actually tried, it should just work.

[angeles-ricardo-89]

Hi, I've just been able to do this by extending Validatable from vuetify2 mixins. I tried to extend VInput first, but all my attempts failed.

Basically I followed these steps:

1. Extend Validatable.
2. emit 'input' signal for every model change using watchers.
3. provide rules array to rules property of the custom component.
4. Add text to the custom component template in order to show the errors in errorBucket produced by the rules.

It's simple to implement, but not so easy to come up with the idea, I'd recommend people to examine Validatable source code in order to understand how it works. I'm not sure if I've done this in the right way, if there is a better way to do it I'd apreciate any advice, thanks.

[KaelWD]

If you're using v2: #3464 (comment)

[Naedri]

Hello,

I tried to provide an example in VueJS v3.5 and Vuetify v3.7 : Playground, in which a Parent component hosts two components :

• a VInput component :
  • responsible to display errors
• a ChildVModel component :
  • responsible to display a list of items initialized by the Parent
  • responsible to update a list of items using v-model

I hope it could help :)