Formik: 'Submitted' status

[GGotardo]

Hi,

I want to validate my form after submission, but 'touched' and 'dirty' values are updated before it. Do you have some 'submitted' status?

Thanks.

[jbranchaud]

@GGotardo there is a setSubmitting() function available to the handleSubmit() callback. That function can be used to set the isSubmitting value which is available in the props of your formik form.

You can see this at play in the very first example of the README.

Does that help answer your question?

[jeroenransijn]

I would like to re-open this issue. I think what @GGotardo tried to say is that he wants validation only to happen when the form is submitted (not while it's submitting). It would be really nice to have isFormSubmitted/hasFormBeenSubmitted being passed in the render prop. I think validation on blur is an anti-pattern and would love to see something like this in Formik.

[jeroenransijn]

I think this can be achieved currently by using setStatus in the submit method.

EDIT: it seems like submit is called after validation happens, so this is not working correctly.

[jeroenransijn]

This is working for me, although somewhat hacky:

<Button
  disabled={isSubmitting}
  type="submit"
  onClick={() => setStatus('submitted')}
>
  {isSubmitting ? 'Creating...' : 'Create Account'}
</Button>

[deftomat]

@jeroenransijn Thanks, your solution works for me too.
However, I fully agree that we need something better as this is really a hacky solution.

[jeroenransijn]

@jaredpalmer is this something you would consider in Formik? I remember AngularJS (which rocked at forms) had a form object. So you could do things such as form.touched, form.submitted etc.

A couple years back I experimented by creating a form library without any dependencies (https://github.com/jeroenransijn/stateful-forms) that essentially implemented the AngularJS API. The status data structure looked like this:

{
  form: {
    submitted: false,
    valid: false,
    invalid: true,
    pristine: true,
    dirty: false,
    touched: false,
    untouched: true
  },
  email: {
    valid: false,
    invalid: true,
    pristine: true,
    dirty: false,
    touched: false,
    untouched: true
  },
  name: {
    // ... same as email
  },
  password: {
    // ... same as email
  }

Form elements states

Form element states are essentially a rollup of the fields within the form itself. These are simply copied from my old project. Simply showing it here to speed up the conversation.

form.submitted = has the submit action been called (before validation)
form.pristine = has the form element been interacted with
form.dirty = !pristine
form.valid = is the form element valid
form.invalid = !valid
form.touched = did the form element blur (or interacted with for some elements)
form.untouched = !touched

[ThomasAribart]

@jaredpalmer I also have this issue and would like to have a "hasSubmitted" prop in Formik. Would you be interested if I open a PR ?

[johnrom]

I have no objection to providing more metadata about the form. It would be pretty simple to add to the reducer. I think a PR would help show effort to get this implemented and be a good first PR, but since it modifies the API be prepared for some back and forth on where this data should live / be exposed.

Now that I'm thinking about it, I don't have formik in front of me but I think I remember there being something like a submitCount property. If that's above 0, the form has been submitted, so there wouldn't be any need to add this property. I'd look into that first.

I'd recommend against adding "duplicate" states. Someone can check !form.isDirty instead of adding a form.pristine property. Same for invalid (isValid) and untouched (touched).

[ThomasAribart]

@johnrom You are right, props.submitCount does the job 👍 No need for a PR then ! Thanks !

[avnerI]

Hey,
I'm still very puzzled about the ability to determine if Formik submitted the form or not.

I have a case that I want to save my Formik form before allowing the user to do an action.

I wish to know that the submit worked.
The submitCount isn't the a good option - it goes up for submitting attempts. But I want to know if my onSubmit function was called by Formik or not.

Any has a workaround, or and a solution for the issues?

[johnrom]

@avnerl there isn't a way to know this via Formik's API, but you can do this in your callback. By handling it in your callback, you also have more granular knowledge of whether submit _hasBegun_ or _hasCompleted_, or anywhere in between.

const doSubmit = async (values) => console.log("submitted", values);
const MyForm = () => {
  const [hasSubmitBegun, setHasSubmitBegun] = React.useState(false);
  const [hasSubmitCompleted, setHasSubmitCompleted] = React.useState(false);
  const onSubmit = React.useCallback(async (values) => {
    setHasSubmitBegun(true);

    await doSubmit();

    setHasSubmitCompleted(true);
  }, [doSubmit]);

  return <Formik onSubmit={onSubmit} />;
}