Hi James,

Thank you for providing a runnable sample and screenshots! The descried behavior is actually expected - let me share some details on what happens behind the scenes and how you can handle it.

By default, the TabStrip disposes the content of the inactive tabs and only the content of the active tab is rendered in the DOM. Based on your current configuration, the TabStrip only wraps the separate FormItems and not the whole Form. Thus, when you are switching between tabs, the FormItem of the inactive tab is removed from the DOM and then added once again when this specific tab becomes active.

The validity of the input is checked when the Form state is changed - for example, when the user clicks the submit button. If the field is invalid, a "k-invalid" class is added to the input. When you activate the second tab, the FormItems from the first tab are disposed. Then, when you navigate back to the first tab, its FormItems are added again to the DOM. However, in this case there is no actual change in the Form state, so the validity check is not triggered and thus, the Form does not know the input is invalid. You may also check that yourself if you change the Form state when you go back to the first tab - click the submit button, for instance, and the input will be checked and marked as invalid.

Note: you may notice that the "k-form-field" element keeps its error styles - the label is marked in red and the validation message and summary are rendered. This is controlled on Form level and the it keeps this information in its state. So, even though there is no change in its state while switching the tabs, it keeps the error details for the FormItems. The inputs, however are essentially standalone components that are integrated in the Form and their validity check is triggered only by change in the Form state. Here is why different behavior occurs.

To handle the scenario, you may enable the PersistTabContent feature of the TabStrip - it allows you to keep the tabs content in the DOM while switching the tabs instead of disposing the inactive tabs content. Here it is important to mention that the content of a tab will be added to the DOM once you activate it and not before that. So, while the first tab is active, the FormItems of the second tab are not yet rendered in the DOM. If the you click submit at this point, the First Name field input will be marked as invalid. However, if you then navigate to the second tab, you may notice that the Last name and Date of birth inputs are not styled as invalid since there is no change in the Form state when you change the tabs and the validity check of these inputs is not triggered.

For such a use case I would recommend the Wizard component which allows Form integration. You can split the desired form items through dedicated steps and the user will be able to easily navigate through them. Take your time to revise it and please let me know if any questions appear.

Having the above in mind, I am hereby marking the report as "Declined" as the described behavior is actually expected based on the component design and configuration.

Regards,
Nadezhda Tacheva
Progress Telerik