How to show an alert with errors found after submitting Formik form in react native

user_4031108 0
Viewed 6638

I have a Formik form in react native and a Yup validationSchema. When user submits form I want to create an alert with the error fields if there are fields that are invalid.

Dependencies:
"formik": "^1.4.1",
"react": "16.5.0",
"react-native": "0.57.1",

I have tried using isValid inside the Formik render and create an Alert with errors, but I get an empty errors object. However if I submit again/or click submit twice, the error object contains the invalid fields as expected.

How can I get the errors object on first submit?

yup formik react-native reactjs
3 Answers

What you should do is have a modal or something like that that will show the errors.

When using Formik that component that you render (you can use component, render and also children) will recieve the prop with the errors as you can see in the example from the docs.

<Formik>                              {// getting the errors here }
  {({ handleSubmit, handleChange, handleBlur, values, errors }) => (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        onChange={handleChange}
        onBlur={handleBlur}
        value={values.name}
        name="name"
      />
      {errors.name &&
        <div>
          {errors.name}
        </div>}
      <button type="submit">Submit</button>
    </form>
  )}
</Formik>

errors will be an object so you check for the keys (or you can also use values) of errors and decide if you will render you error modal or not.

<Formik
    validationSchema={yourValidationSchema}
    onSubmit={whatYouWantTodoWhenEverythingIsGood}
    initialValues={{ email: '' }}
>                                 
    {({ errors, values, handleChange, handleBlur}) => (
        <View>
            <TextInput
                onChangeText={handleChange('email')}
                onBlur={handleBlur('email')}
                value={values.email}
            />
            <Button onPress={props.handleSubmit} title="Submit" />
            {// checking if you have errors}
            {
                Object.keys(errors).length > 0 && 
                    <Modal errors={errors}/>
            }
        </View>
  )}
</Formik>

Depending where your modal is from, you can use <Modal isActive={Object.keys(errors).length > 0} errors={errors}/> or other things like that.

e.g. using react-native modal

<Modal
    visible={Object.keys(errors).length > 0}
>
        <View>
            {// show the errors the way you want}
        </View>
</Modal>

You should use Object.keys(errors).length > 0 to decide if you should show the modal with errors or not.

user_91191860

This is because the touched object isn't updated when clicking the submit button when you are in RN. Try setting blank values as an initial values to your fields that has a validation schema. Something like this:

initialValues={{ input_1: "", input_2: "" }}

This answer from the formik git repo helped me.

user_17335300

Here is an exact answer

        </FieldArray>
        {/* <ErrorMessage name="_action" component="div" /> */}
        <ErrorMessage name="_action">
          {
          (errorMsg) => {
            alert(errorMsg);
            return  <div className="text-danger">{errorMsg}</div>
        }
          }
        </ErrorMessage>

I don't need to mention where to add the error part right? :D

user_69077030
Related