FormValidator-object is undefined, when using TabComponent inside html-form

[Laurin S]

Hi,

I want to validate a html-form by using the FormValidator, however, when using a TabComponent inside the form, the FormValidator-object is always undefined when trying to validate() the form.

I've attached a demo that shows the error (when commenting the TabComponent code-lines, the example works fine...)

Any ideas?

Attachment: reactns2vzm_f8bf097d.zip

[Ponmani Murugaiyan]

Hi Laurin, 

Currently we are checking your reported query, will update further details in 2 business days (February 21, 2022). 

Regards, 

Ponmani M 

[Ponmani Murugaiyan]

Hi Laurin, 

We suggest you to define the formObject outside as like below code snippet to get the form instance when render inside the Tab component. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/reactns2vzm_Modified137089868 

For more information, refer the below documentation. 

https://ej2.syncfusion.com/react/documentation/form-validator/react-functional-component/ 

let formObject; 

export const Default = () => { 

  const formId = 'form'; 

  React.useEffect(() => { 

    const formValidation = { 

      rules: { 

        description: { 

          required: [true, '* Enter a description'], 

        }, 

      }, 

    }; 

    formObject = new FormValidator(`#${formId}`, formValidation); 

  }, []); 

 

  const submit = (e) => { 

    if (formObject.validate()) console.log('Submit'); 

    else console.log('Submit error'); 

  }; 

Output: 

 

Regards, 

Ponmani M