Skip to content

Method pauseValidation not working in my custom form template  #1435

Description

@anjalikalsariya

What is the current behavior?

  • pauseValidation is not working.

My Code

/* Custom form template*/
const CustomFormTemplate = ({
  formDetails,
  submitDetails,
  formFields,
  name
}: FormTempateProps) => {
  const { handleSubmit, getState, reset, pauseValidation } = useFormApi();


  return(
    <Form name={name} form={formDetails} onSubmitCapture={handleSubmit} className="data-form" onChange={pauseValidation}>
      {formFields}
      <BgButton
        disabled={submitting}
        className="mr-10 m-t-25 text-white"
        bgColor="blue"
        size="middle"
        long={true}
        htmlType="submit"
      >
        submit
      </BgButton>
    </Form>
  );
};


/* Parent component */

      <FormRenderer
          schema={schema}
          onSubmit={(values) => saveData(values)}
          componentMapper={componentMapper}
          subscription={{ values: true }}
        >
          {({ formFields }) => (
            <CustomFormTemplate
              submitDetails={submitOperationDetails}
              formDetails={formOpertaionDetails}
              formFields={formFields}
              name='xyz'
            />
          )}
        </FormRenderer>

What is the expected behavior?

  • PauseValidation should pause the validation.

Activity

  1. anjalikalsariya commented on Jan 9, 2024

    @anjalikalsariya
    Author

    Hello,

    Is there any update on that topic? I would appreciate any info since this thing is important in my project.

  2. rvsia commented on Jan 25, 2024

    @rvsia
    Contributor

    What is your use case? @anjalikalsariya

    I never used pause validation feature myself but maybe there is another alternative.

  3. anjalikalsariya commented on Jan 26, 2024

    @anjalikalsariya
    Author

    Here is my use case:

    My customer requirement is the validation should apply when clicking on the submit button only. But currently when users click on the field and do nothing and go out from the field then showing validation error.

    So, I had thought, I would pause validation when rendering the form, and once the user clicks on the submit button I'll resume the validation

  4. rvsia commented on Jan 26, 2024

    @rvsia
    Contributor

    @anjalikalsariya For that use case you could use submit validation: https://final-form.org/docs/react-final-form/types/FormProps#onsubmit Submission Errors

    In onSubmit function you can return an object with errors.

  5. anjalikalsariya commented on Jan 26, 2024

    @anjalikalsariya
    Author

    Thanks @rvsia

    Currently, a validation error showing when onblur event fields and as well click the submit button.
    In data driven library submit validation is already working. My main need is the validation should not run during onBlur of fields. Validation should run only when I click the submit button.

  6. rvsia commented on Jan 26, 2024

    @rvsia
    Contributor

    @anjalikalsariya In that case remove validation from fields and just keep it in the submit function.

  7. anjalikalsariya commented on Jan 26, 2024

    @anjalikalsariya
    Author

    Yes, right now only that way is possible. I'll write custom validation instead of schema field validation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions