multiple tabs with q-inputs, keep $refs for validation

[plexus]

Hi,

I have a window with different q-inputs grouped in tabs by topic (general info, bussiness info etc). Underneath and out of the tabs component, there is a save button, so the user can save the info being the focus on any of the tabs.

Even though I validate each q-input with a rule, I want to validate all the info fullfilled in the method assigned to the event @click of the button. For that, I’m using a $ref for each q-input and accessing the .validate() method build-in the q-inputs. Because the inputs are in different tabs, the q-inputs that are not shown in the active tab return undefined when I call validate()

I’ve been playing around with <keep-alive> to cache the tabs. I’ve tried globally around the q-tab-panels component and also individually on each q-tab-panel but nothing seems to work… Any ideas?

Thanks

[metalsadman]

@plexus keep-alive should work, the problem is the refs on other tabs won’t be recognized if the tabs haven’t been visited yet. what you could do is to traverse thru them programmatically, maybe at mounted. i did something like this in an old sandbox using old veevalidate which has same behavior as quasar’s inline validations. here https://codesandbox.io/s/23orzzoj7n to see what i did. it’s an old quasar version so just take the logic on the test method as an example how to traverse the tabs.

edit. mocked a form in tabpanels in a qform here https://codepen.io/metalsadman/pen/yLydeVa?editors=1010 same idea s my sandbox, traverse the panels first so it’s discovered so when you submit, the inputs are validated.

[plexus]

Thanks for your reply. I’ll check it out ASAP and let you know.

Cheers

[metalsadman]

@plexus here is a more correct mock up codepen as per your description. https://codepen.io/metalsadman/pen/povXyrL

[plexus]

@metalsadman That’s absolutely brilliant! Problem solved! Also, I do love the UI idea of showing an alert on the tabs with errors I’m so implementing that. Thanks for that extra tip

[metalsadman]

@plexus you’re welcome :).

[jonas-bithap]

@metalsadman You’re a genius! That pen made my friday!