How to use it with vee-validate?

[afucher]

Hi!!
I'm trying to use vue-tabs component in my form, but to validate the form I'm using vee-validate. But when I change the tab, the input are not hidden in the screen and fails to valid :/

There is a way to not destroy the input, but just make it hidden? Via css?

[cristijora]

Can you please show the code you used?
For forms maybe https://github.com/cristijora/vue-form-wizard is better suited since it has validation functions and other features. (e.g Element UI validation -> https://jsfiddle.net/bt5dhqtf/409/) Tabs are usually used for informational purposes.
Feel free to post the code anyway so I can understand better the issue

Also you can use before-change function on tabs to restrict going to another tab (in your case restrict going to another tab until tab is validated)
https://jsfiddle.net/b44cc4dq/58/

[afucher]

Hi, I created a gist: https://gist.github.com/afucher/411e73a8ee962b4969dd2763ec20bbfb

I'm using Tabs because my form have a lot of information, so to make it easier to the user I'm separating the info. In this gist I just put a few fields to be more easier to explain.
If I'm in the tab "Address Info" and click to Save, the validateAll don't return error, because the others inputs doesn't exists...

[cristijora]

Ok. The issue is that vue-tabs doesn't support async validations yet. I will probably add that soon.
If you think Form Wizard can be an option for you (https://jsfiddle.net/bt5dhqtf/430/) you can try with it, otherwise, async validations will be implemented on vue-tabs only tomorrow

[afucher]

This is great @cristijora !
But Form Wizard don't let me go to another tab without validate a field, right?

[cristijora]

Yes, that's right. You can go back by clicking a tab but you can't go forward until it's validated in form-wizard.
If that doesn't suit your use-case, I will implement async validations for vue-tabs also in a very simillar way to what form-wizard has now.

[afucher]

I want to validate all the data, just when the user click to save the register, not while he is editing it.

[cristijora]

Well that's handled by VeeValidate. You have to set it up so it validates only on form validate

[afucher]

Yes, but if you hide the panel with v-if, VeeValidate don't find the input to valid... that is my problem...