Vuetify: [Feature Request] Validate subforms in form

[errol59]

Versions and Environment

Vuetify: 1.1.0
Vue: 2.5.2

Previously worked in:

Vuetify: 1.0.19
Vue: 2.5.2

Steps to reproduce

Validate the form by pressing on 'submit'

Expected Behavior

Validate the subforms when the validation of the parent form is triggered

Actual Behavior

The subforms are not being validated when the parent form validation is triggered

Reproduction Link

https://codepen.io/errol59/pen/mjNwrp

Additional Comments:

The reason we did this is because we use the v-stepper component with different forms in each v-stepper-content. When the user wants to submit the whole form, we want to know in which step the user forgot to answer a question. This way we can show the user to which step he should navigate.

[KaelWD]

3455, 3356e38

This was never explicitly supported, but does seem like something that would be useful to have.

[bartoszwalacik]

Same issue here, we have upgraded from 1.0.18 to 1.2.2 and (because we are using nested forms), validation is no longer working in our app.
As a workaround, how we can call validation on all nested forms ?

[calebbergman]

I recently ran into this same problem (compounded by the fact I had just upgraded from Vuetify 1.0.x to 1.2.4 and had thought this already worked). There are a couple of workarounds I've come up with.

1. Prior to validate(), reassign outer form's inputs

function reassignFormInputs(form) {
    const inputs = []
    // Copied from VForm's previous life* which had a getInputs() function
    const search = (children, depth = 0) => {
        for (let index = 0; index < children.length; index++) {
            const child = children[index]
            if (child.errorBucket !== undefined)
                inputs.push(child)
            else
                search(child.$children, depth + 1)
        }
        if (depth === 0) return inputs
    }
    search(form.$children)
    form.inputs = inputs
}
...
submit() {
  reassignFormInputs(this.$refs.form)
  if (this.$refs.form.validate())
      submit()
  else
      console.error('Incorrect form fields found')
}

2. Reference nested forms and call their validate() function along with the outer form's validate()
Something like-a-so
This becomes slightly more complicated if you have recursive components (children with children, which each can have children...) but it's not too bad.

* VForm's previous life

[jacekkarczmarczyk]

Form shouldn't be nested, that means that we need either a separate component that renders a div (or fieldset or any other tag provided by dev) and does the validation or we should be able to specify the tag for v-form