Vee-validate independently validate components from parent without EventBus

Question

I would like to be able to validate all the components (with multiple fields) in my form independently from eachother using Vee-validate.

I read this topic. However, the solutions have all components be validated at the same time. I've tried using an EventBus (unsuccesfully) and I would prefer staying away from it.

I have multi step form which should validate the current step before clicking 'continue'. Example:

-- Step 1
---- <component-one /> == component with fields 
---- (next button) <-- validate content 1. If valid, go to step 2
-- Step 2
---- <component-two /> == component with fields
---- (next button) <-- validate content 2. If valid, go to step 2
-- Step 3
---- <component-three/> == component with fields
---- (next button) <-- validate content 3. If valid, go to step 3

My issue is that I have to call this.validator on component level to be able to validate the component. The continue button, however, lives on the parent level. I cannot create one shared $validator because then all steps have to be valid in order to continue (which is impossible)/

You can declare ref at component and use it to parent using this.$refs.[validate method] — Hardik

Ryley Ryley · Accepted Answer · 2019-02-07T16:18:23

Vee-validate has the concept of "scopes", so I think the trick would be to add data-vv-scope="step1" to each form element in component-one. Then when you go to validate in the step 1 "next" button, you'd do this.$validators.validateAll('step1').

If each component has it's own form, you can put the data-vv-scope attribute at the form level and it will apply to all the elements inside it.

See this example for details.

Vee-validate independently validate components from parent without EventBus

1 Answers