Issues with validation across multiple tabs

[Ben]

I have an EditForm with a TabStrip and multiple tabs each with required fields. I'm finding that validation finds the required fields only on tabs that were active at some point and had their contents loaded into the DOM. If the user never selects the tabs, validation will skip some required fields.

We have a workaround where each tab is quickly activated after the first render but I'm hoping there is a cleaner solution. Is there a way to tell Telerik to load all tabs into the DOM on initialization?

[Nadezhda Tacheva]

Hi Ben,

The TabStrip has a Persist Content functionality that allows keeping the tabs content in the DOM while switching the active tabs. However, in order to have the tab content rendered in the DOM in first place, one must first activate the specific tab. It wouldn't be optimal to render the content of all tabs on initialization - a very common scenario is that some tabs are never even activated, so what will be the purpose of having their content in the DOM then, this will affect the performance of the component.

As far as I can understand your scenario, the user has to go through all of the tabs to successfully submit the form as all of them contain required fields. In this case, I would recommend considering the Wizard component. It allows Form integration and you can easily prevent the user from submitting the form if there are some invalid fields. Take your time to revise it and please let me know if any questions are raised.

Regards,
Nadezhda Tacheva
Progress Telerik