CODEWITHSUNDEEP
javascriptreactjsformik
Sriram Arunachalam
Sriram Arunachalam

Reputation: 101

Formik OnSubmit Not Getting Triggered

I am working on a react project and i am using Formik for forms. For some reason, the onSubmit method doesnt get triggered. I have been trying to figure out where the error is but i have couldnt.

I have an almost similar setup on another component and that works fine. Any help is appreciated.

There are no issues with validation, because the button becomes enabled only if it satisfies the validation parameters. I click the submit button and nothing happens. I have tried debugging but its not even hitting the onSubmit method.

<Segment>
        <Formik
          initialValues={{
            comments: "",
            mk1: "",
            mk2: "",
            mk3: "",
            mk4: "",
            mk1Num: 0,
            mk2Num: 0,
            mk3Num: 0,
            mk4Num: 0,
          }}
          validationSchema={Yup.object({
            comments: Yup.string().required(),
            mk1: Yup.string().required(),
            mk2: Yup.string().required(),
            mk3: Yup.string().required(),
            mk4: Yup.string().required(),
            mk1Num: Yup.number().positive().max(5),
            mk2Num: Yup.number().positive().max(5),
            mk3Num: Yup.number().positive().max(5),
            mk4Num: Yup.number().positive().max(5),
          })}
          onSubmit={async (values, { setErrors, setSubmitting }) => {
            try {
              console.log(values);
              const totalGrade =
                values.mk1Num + values.mk2Num + values.mk3Num + values.mk4Num;
              await addToSubmittedAssignment(
                courseId,
                assignmentId,
                values,
                totalGrade
              );
              setSubmitting(false);
            } catch (error) {
              setErrors({ err: error.message });
            }
          }}
        >
          {({ isSubmitting, isValid, dirty, errors, values }) => (
            <Form className='ui form'>
              <TextArea
                name='comments'
                placeholder='Enter Comments Here'
                rows={10}
              />
              <Grid>
                <Grid.Column width={14}>
                  <TextInput name='mk1' placeholder='Enter Marking Key 1' />
                  <TextInput name='mk2' placeholder='Enter Marking Key 2' />
                  <TextInput name='mk3' placeholder='Enter Marking Key 3' />
                  <TextInput name='mk4' placeholder='Enter Marking Key 4' />
                </Grid.Column>
                <Grid.Column width={2}>
                  <TextInput name='mk1Num' type='number' />
                  <TextInput name='mk2Num' type='number' />
                  <TextInput name='mk3Num' type='number' />
                  <TextInput name='mk4Num' type='number' />
                </Grid.Column>
              </Grid>

              {errors.err && (
                <Label
                  basic
                  color='red'
                  style={{ marginBottom: 10 }}
                  content={errors.err}
                />
              )}
              <br />
              <Button
                loading={isSubmitting}
                disabled={!isValid || !dirty || isSubmitting}
                type='submit'
                fluidsize='large'
                color='teal'
                content='Submit'
              />
            </Form>
          )}
        </Formik>
      </Segment>

Also, i am using Semantic UI react for styling.

Upvotes: 0

Views: 8830

Answers (3)

Mnai
Mnai

Reputation: 507

I had an issue where the submit button in my Formik form wasn't triggering the form submission. The problem was that the element was placed outside the MUI , causing the button with type="submit" not to be recognized.

Solution: Move the element inside the MUI so that it wraps the and . This ensures that the submit button is correctly recognized as part of the form.

Upvotes: 0

GiantCoder
GiantCoder

Reputation: 31

I had this issue and it turned out to be Yup silent failing a validation check. I simply removed the .required() from some of the object's properties to get it to work.

Upvotes: 3

domenikk
domenikk

Reputation: 1743

Try adding the submit method to Form render params:

{({ isSubmitting, submitForm, isValid, dirty, errors, values }) => (...

And then call it on submit button:

<Button
  loading={isSubmitting}
  disabled={!isValid || !dirty || isSubmitting}
  type='submit'
  fluidsize='large'
  color='teal'
  content='Submit'
  onClick={submitForm}
/>

Upvotes: 3

Related Questions