Hello,

 

I have a form (not KendoReact Form), and in this form i have Input field and under this component a have TabStrip with TabStripTab's. Each TabStripTab has own Input components. Some components are Required some not. 

If i Click Submit button,  the required components in TabStripTab are ignored, if i don't write values in components that are in TabStrips.

 

Is there any way i can also "check" required components in TabStrip on Submiting Form?

 

Thank you, Matjaz Reberc

Hello, Matjaz,

This may occur if the TabStripTabs are unmounted.

Please check if keeping them mounted will resolve the issue:

https://www.telerik.com/kendo-react-ui/components/layout/api/TabStripProps/#toc-keeptabsmounted

If the issue still, occurs please share an example as it could be connected with the Form logic not accessing the Inputs.

Regards,
Stefan
Progress Telerik

Hallo Stefan,

I dit try „keepTabsMounted“, but the problem was i had to select this tab bevor i submitet the form, then it worked

Example. Let sey I have a Form with 2 Tabs. First Tab dose not have required component, the second has it.
If I dont click on second Tab and i only clik submit button then the form will be submited.

If I click on second Tab and then first Tab, and Submit button, then the Form will not be submited.

My Form:

<form onSubmit={this.handleSubmit}>

               <TabStrip selected={this.state.selected} onSelect={this.handleSelect} keepTabsMounted={true}>
                             <TabStripTab>
                                             <Input  />
                              </TabStripTab>
                              <TabStripTab>
                                             <Input required={true} />
                              </TabStripTab>
                </TabStrip>
                 <div>
<Button type={'submit'} id={'submitButton'}>Submit</Button>
  </div>
 </form>

Thank you, Matjaz Reberc

Hello Stefan,

i did vote.

Thank you, Matjaz Reberc