This is a migrated thread and some comments may be shown as answers.

How to auto Submit a ReactForm

1 Answer 106 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Grant
Top achievements
Rank 2
Veteran
Iron
Grant asked on 19 Nov 2020, 07:22 PM

Hi, 

As my title says, "How can I create a Kendo Form that checks its content and then auto-submits when the its complete?"

I thought I could use the form validator to check the fields and then execute a submit if they are all valid, but then that executes every time a form element changes, and I dont want to submit before the user is done even typing their name.

Its like I need an onBlur of the form, the only equivalent is to run a check onBlur of each field. I've been messing around with trying to send the form to the blur function to check each field, but I haven't had success.

Is there a better way?

Thanks,
Grant

1 Answer, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 20 Nov 2020, 06:57 AM

Hello Grant,

You can for example create custom component which to look for the Form `valid` and `touched` render props. These props indicate that the Form fields are touched by the user and are valid. If both props are `true` than you can submit the form:

const AutoSubmitter = formRenderProps => {
  const isSubmittedRef = React.useRef(false);
  React.useEffect(() => {
    const { valid, touched, onSubmit } = formRenderProps;

    if (valid && touched && !isSubmittedRef.current) {
      isSubmittedRef.current = true;
      onSubmit();
    }
  });
  return [];

Please check the full example below:

- https://stackblitz.com/edit/react-s8ugrr?file=app/main.jsx 

Regards,
Vladimir Iliev
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
General Discussions
Asked by
Grant
Top achievements
Rank 2
Veteran
Iron
Answers by
Vladimir Iliev
Telerik team
Share this question
or