Q-Tabs and vee validate
-
I have a form with many tabs and some required fields in them. The problem is that they wont validate unless the user already opened the tab since the tabs are not rendered until they are opened. Half the solution was using keep-alive so they dont disappear when the user click an other tab. The other half is I click all the tabs by code on first load, is there not an option I could use instead of this ugly hack?
-
jsfiddle/codepen would make your problem easier to solve. But I’ll try to explain as much as I understood from your small description.
You will need to validate each tab before letting the user move on to next tab which means if the fields in Tab A doesn’t validate the user will get the alerts when trying to switch Tab B and is forced to do the changes before he moves on. Finally, server side you will validate all form together(of course you have to do that anyway, cause javascript can be altered client side…)
-
Thx for the replay but that’s not the issue.
On this one page lets say Tab-2 has required fields if the user does not click on tab-2 at least once before hitting save they fields from that tab wont be validated because they dont exist, the html of Tab-2 is something like <----> once you click it then the html will exist -
@KorbenDallas
The data that you are using as v-model for your forms should reside in the parent component holding your tabs, so it can be validated. ie. formData: { props you use as v-models}. lets say at tab 1 you are using:data () { ... formData: { tab1Models: { field1:'', field2:'' }, tab2:{ ... } } ... validations: { formData: { tab1Models: { field1: { required } field2: { required } }, tab2:{ ... } }So it will still validate all together, when you switch tabs or form submit calling
this.$v.formData.$touch(). I don’t know how vee validate works, but that’s how it is with vuelidate, it’s the v-models that should be validated not the exact components.
edit: After looking into vee validate, I think it’s not what you should use in this case, since it’s template based, unlike vuelidate which is model based. So yeah, I can see why it’s not working in q-tabs, you should consider vuelidate in this case if you want to use q-tabs, there might be some tricks to make it work with vee-validate but I think it will add more complexity at least for this case tbh. -
edit: After looking into vee validate, I think it’s not what you should use in this case, since it’s template based, unlike vuelidate which is model based. So yeah, I can see why it’s not working in q-tabs, you should consider vuelidate in this case if you want to use q-tabs, there might be some tricks to make it work with vee-validate but I think it will add more complexity at least for this case tbh.
Its a tradeoff, we liked the simplicity and the integrated localization of veevalidate on the other hand I prefer the model focused way vuelidate implements.
-
@korbendallas Okay now I understand what you want. You are probably using v-if on the tab and that’s why the html is not rendering. You should use v-show for this type of things that involve tab switching(this way the html will render with display none). Then the validation should work, otherwise you will have to implement that logic yourself. Also, if you want to seperate the validations you can use validation scopes and that will give you back validations in seperate errorbags for each tab.
-
@zeidanbm said in Q-Tabs and vee validate:
@korbendallas Okay now I understand what you want. You are probably using v-if on the tab and that’s why the html is not rendering. You should use v-show for this type of things that involve tab switching(this way the html will render with display none). Then the validation should work, otherwise you will have to implement that logic yourself. Also, if you want to seperate the validations you can use validation scopes and that will give you back validations in seperate errorbags for each tab.
No v-if from me. Its the default behaviour of the tabs. Go check out the html
https://quasar-framework.org/quasar-play/android/index.html#/showcase/navigation/tabs/tab-panes
There are 3 tabs in the first example but this is what you get.
<div class=“q-tabs-panes”>
<div class=“q-tab-pane animate-fade-left”>Emails tab</div>
<!---->
<!---->
</div> -
@KorbenDallas
After sometime, I got it to work with veevalidate :).
Here you go https://codesandbox.io/s/ox893063w9. -
@metalsadman said in Q-Tabs and vee validate:
@KorbenDallas
After sometime, I got it to work with veevalidate :).
Here you go https://codesandbox.io/s/ox893063w9.Well thanks! But sadly this still isnt it. I tweaked it to show the issue.
https://codesandbox.io/s/wq170rmq9k
First tab has nothing and is the default tab.
Click the save button to validate the form no errors are displayed but it should because there are errors in the other tabs.Now click all the tabs(I enabled keep-alive so they dont disappear from the dom) and then click save. All the errors are counted.
The hack I did for now (not shown here) is to visit all the tabs on load, that’s 8 tabs in a series of nextTick calls.
-
@KorbenDallas
yep, i recon you have to visit the tabs, that’s the only way it should load the other fields in it. example for those who might stumble
in this same issue https://codesandbox.io/s/23orzzoj7n -
@metalsadman Just a note, your example does not seem to work with edge or ie11 (I have to support them),
in that case I had to select each tab in their own nextTick and the process is quite visible on IE11. -
@metalsadman Thank you.
