I’m encountering an issue with a save button in my form. I have a SaveButton component that is supposed to trigger a form submission when clicked. The button is linked to Formik’s submitForm function, but when I click the button, nothing happens. The form doesn’t submit, and there are no logs indicating that the onSubmit function is being called.

In my form component, I’ve passed the submitForm method from Formik to the submitFunc prop of the SaveButton. The button itself has a type="submit" attribute, which should automatically trigger form submission when clicked. However, even though I expect the form to submit and the form data to be logged, nothing occurs upon clicking the button. I’ve confirmed that the button is not disabled, and I have checked the code for errors, but I am still unable to determine why the button is not triggering the form submission.

SaveButton component:

interface ISaveButton {
  submitFunc: () => void;
  disabled?: boolean;
}

const SaveButton = ({ 
  submitFunc, 
  disabled = false,
 }: ISaveButton) => {
  const { t } = useTranslation('common'); 
  
  return (
    <button
      type='submit'
      onClick={submitFunc}
      disabled={disabled}
      className="flex items-center justify-center gap-1 w-[160px] py-[10px] h-[52px] rounded text-lg leading-normal text-center text-white bg-green-600 border-2 border-solid border-green-600 transition-colors duration-300 ease-linear cursor-pointer disabled:bg-[#aaa6a5] disabled:cursor-default"
    >
    <SaveIcon className="w-6 h-6 fill-white" />
    <span>{t('form-button-save')}</span>
    </button>
  );

TagForm:

const {
    values,
    setFieldValue,
    handleChange,
    handleSubmit,
    errors,
    touched,
    submitForm,
  }: FormikProps<IEditAssetBodyData> = useFormik({
    initialValues,
    validationSchema: TagValidation(),
    onSubmit: (values) => {
         */

          Data from form


         */
      },
   });

   return (
      <form onSubmit={handleSubmit}>
         {/* form fields here */}
         <SaveButton submitFunc={submitForm} disabled={isLoading} />
      </form>
   );
};

I’ve tried several things, such as checking the button’s onClick handler and making sure it is correctly invoking submitForm, but no action happens when I click the button. I expected the form to be submitted when the button is clicked, and for the onSubmit method to handle the data, but this is not happening. Could there be an issue with how the button is wired up, or is there something about Formik's behavior that I might be missing when working with a custom submit button like this? I would appreciate any suggestions or guidance on how to get the button to trigger the form submission as expected.

I’m encountering an issue with a save button in my form. I have a SaveButton component that is supposed to trigger a form submission when clicked. The button is linked to Formik’s submitForm function, but when I click the button, nothing happens. The form doesn’t submit, and there are no logs indicating that the onSubmit function is being called.

In my form component, I’ve passed the submitForm method from Formik to the submitFunc prop of the SaveButton. The button itself has a type="submit" attribute, which should automatically trigger form submission when clicked. However, even though I expect the form to submit and the form data to be logged, nothing occurs upon clicking the button. I’ve confirmed that the button is not disabled, and I have checked the code for errors, but I am still unable to determine why the button is not triggering the form submission.

SaveButton component:

interface ISaveButton {
  submitFunc: () => void;
  disabled?: boolean;
}

const SaveButton = ({ 
  submitFunc, 
  disabled = false,
 }: ISaveButton) => {
  const { t } = useTranslation('common'); 
  
  return (
    <button
      type='submit'
      onClick={submitFunc}
      disabled={disabled}
      className="flex items-center justify-center gap-1 w-[160px] py-[10px] h-[52px] rounded text-lg leading-normal text-center text-white bg-green-600 border-2 border-solid border-green-600 transition-colors duration-300 ease-linear cursor-pointer disabled:bg-[#aaa6a5] disabled:cursor-default"
    >
    <SaveIcon className="w-6 h-6 fill-white" />
    <span>{t('form-button-save')}</span>
    </button>
  );

TagForm:

const {
    values,
    setFieldValue,
    handleChange,
    handleSubmit,
    errors,
    touched,
    submitForm,
  }: FormikProps<IEditAssetBodyData> = useFormik({
    initialValues,
    validationSchema: TagValidation(),
    onSubmit: (values) => {
         */

          Data from form


         */
      },
   });

   return (
      <form onSubmit={handleSubmit}>
         {/* form fields here */}
         <SaveButton submitFunc={submitForm} disabled={isLoading} />
      </form>
   );
};

I’ve tried several things, such as checking the button’s onClick handler and making sure it is correctly invoking submitForm, but no action happens when I click the button. I expected the form to be submitted when the button is clicked, and for the onSubmit method to handle the data, but this is not happening. Could there be an issue with how the button is wired up, or is there something about Formik's behavior that I might be missing when working with a custom submit button like this? I would appreciate any suggestions or guidance on how to get the button to trigger the form submission as expected.

• reactjs
• formik

• 1 What happens if you omit the onClick={submitFunc} from your button? Like you said, the type="submit" should send the event correctly anyway – Phil Commented Nov 21, 2024 at 2:00

1 Answer 1

Try adjusting or removing your validation schema TagValidation. Formik will run validation on your form values and stop submission if validation errors occur.

From Formik Docs:

• Run all field-level validations, validate, and validationSchema asynchronously and deeply merge results
• Are there any errors?
  • Yes: Abort submission. Set isValidating to false, set errors, set isSubmitting to false
  • No: Set isValidating to false, proceed to "Submission" Submission

https://formik./docs/guides/form-submission#validation