How to call a method on form submission if there is a validation error using Formik + Yup?

1
votes

I am working on react native application where using Formik and Yup for forms. I want to update one state value depending on the form's value while submitting a form.

Issue Description::

It works fine if there is no validation error, but there is one address field and depending on that field I have added a hidden field "zipcode". I want to show zipcode input text field if my address is empty.

Code::

const validationSchema = Yup.object().shape({
    address: Yup.string()
        .required('Address should not be empty'),
    zipcode: Yup.string()
        .required(errMgs.emptyText)
        .matches(regExp, errMgs.specialCharNotAllowed),
    apt: Yup.string()
        .matches(regExp, errMgs.specialCharNotAllowed)
});

Inside render function::

<Formik
    initialValues={this.initialValues}
    onSubmit={(data) => this.onSubmitForm(data)}
    ref={el => (this.form = el)}
    validationSchema={validationSchema}
    render={({ handleSubmit, values, setValues, setFieldValue, errors, touched, ...props }) => {
        return (
            <Form>
                <GooglePlacesInput
                    onPress={(data, detail) => this.onPressOfAddress(data, detail)}
                    address={values.address}
                    name="address"
                    onChangeText={(value) => setFieldValue('address', value)}
                />
                {errors.address && touched.address && <ErrorText message={errors.address} />}
                {isZipCode &&
                    <>
                        <TextInput placeholder="Zipcode" textContentType="postalCode" name="zipcode" type="text" onValueChange={(value) => this.onChangeZipcode(value)} />
                        {errors.zipcode && touched.zipcode && <ErrorText message={errors.address} />}
                    </>
                }
                <TextInput placeholder="apt" textContentType="streetAddressLine1" name="apt" type="text" onValueChange={(value) => setFieldValue('apt', value)} />
                <Button onPress={handleSubmit} block large variant="success">SAVE</Button>
                <Button onPress={() => popScreen(this.props.componentId)} block large variant="danger">CANCEL</Button>
            </Form>
        );
    }}
/>

I want to show zip code input with error when my address is empty on submission, means when there is a validation error in the form. How can I do this?

1
react-nativeformikyup

1 Answers

1
votes

I want to show zipcode input text field if my address is empty.

You can have 2 cases:

1 - Check for address errors and only display the zipCode if address is not valid

To do that, you should get the error of the address field.

Instead of {isZipCode && (...)} you should do {errors.address && touched.address && (...)}, which is when the adress field is empty.

2 - After the first submit, if address is not valid, always show zipCode

Other solution is to manually trigger validation with validateForm the will come from the render function.

e.g. 

<button type="button" onClick={() => validateForm().then(() => {
    console.log('Check for errors and Update State of isZipCode')
 })}>
    Submit Button
</button>

You can also validate only one field with validateField('fieldName'), so maybe only check for address and set the state depending on the errors.