Handling formik form when validation error occurs

Question

I have a formik form in react native code as follow. Full runnable link can be view at: here

Current behaviour:
Validation can only be done with handleSubmit, with cannot be use for handle further action. Note than onSubmit will not be trigger if handleSubmit detects there is any validation error.

 <Button onPress={handleSubmit} style={styles.button}>
     Submit
 </Button>

Expected solution:
A lifecycle event called when validation fails after an attempted submit (eg: onValidationError), where i can access all the input validation error props for further action.

Eg: I would like to handle something (like pop up an alert or scroll to first error message when validation fail)

The code is expected to be something like follow, or any other way of doing it can also be accepted. As long as i can handle event when validation error occurs.

 <Formik
    onSubmit={values => {
       alert(JSON.stringify(values, null, 2));
       Keyboard.dismiss();
    }}
    onValidationError={errorValues => {
       // any action here
       // note that onValidationError is not a built in function
       // but it would be best if it can be achieved this way
       // else any other equivalent solution also can be accepted
    }}
    validationSchema={validationSchema}>

What have tried?
I have tried to integrated 2 solution here. But failed to get it work.
https://github.com/jaredpalmer/formik/issues/1019
https://github.com/jaredpalmer/formik/issues/1484

Answer 1

You can use the validate method to accomplish this. Just make sure you return the error object, so the form can handle the validation.

  <Formik
    onSubmit={async values => {
      console.log('submit', values)
    }}
    validate={values => {
      const errors = {}
     
      // Check the values object, and add custom validation 

      return errors
    }}
  ></Formik>

Answer 2

there was pretty simple way to do that.

On your submit buttons onClick Method you can define a method like this;

<button onClick={() => scrollToErrors(errors)} > //errors param is formik's errors param.

https://formik.org/docs/guides/validation#validationschema

const scrollToErrors = (errors) => {
    const errorKeys = Object.keys(errors);
    if (errorKeys.length > 0) {
      document.getElementsByName(errorKeys[0])[0].focus();
    }  
 }

Answer 3

Showing a notification on failed form submission can be achieved with a custom component using useFormikContext:

import { useFormikContext } from 'formik'
import { useEffect } from 'react'

const FormErrorNotification = () => {
    const { isValid, isValidating, isSubmitting } = useFormikContext()

    useEffect(() => {
        if (!isValid && !isValidating && isSubmitting) {
            alert('Fix your form errors!')
        }
    }, [isSubmitting, isValid, isValidating])

    return null
}

export default FormErrorNotification

And use it like so:

<Formik ...>
    <FormErrorNotification />
    ...
</Formik>

Answer 4

I guess the above answer can solve your issue, recenlty I have created few forms (some complex ones too), using the react hook forms library. This is better than formik and redux forms. I would suggest to try it once, easy to plug and play with lots of dynamic features and validations (including patterns as well). https://react-hook-form.com/