Issues with validation across multiple tabs

1 Answer 41 Views
TabStrip
Ben
Top achievements
Rank 1
Ben asked on 21 Jun 2022, 01:14 PM

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?

1 Answer, 1 is accepted

Sort by
1
Accepted
Nadezhda Tacheva
Telerik team
answered on 24 Jun 2022, 10:01 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
TabStrip
Asked by
Ben
Top achievements
Rank 1
Answers by
Nadezhda Tacheva
Telerik team
Share this question
or