How to auto Submit a ReactForm

2 posts, 0 answers
  1. Grant
    Grant avatar
    179 posts
    Member since:
    Jul 2016

    Posted 19 Nov 2020 Link to this post

    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

  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2206 posts

    Posted 20 Nov 2020 Link to this post

    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/.

Back to Top