I created form in react native using following tutorial https://blog.jscrambler.com/creating-and-validating-react-native-forms-with-formik

This is working fine but there is only one problem. I have 5 fields firstname, lastname, email, password, confirmpassword. If I touch the firstname field and as I leave this filed Formik invalidate all the field. I didn't touch other field but it is validating other fields as well.

<Formik
        validationSchema={SignupSchema}
        initialValues={{
            firstName: '',
            lastName: '',
            email: '',
            password: '',
            confirmPassword: ''
        }}
        onSubmit={postCreateHandler}
    >
        {({ handleChange, handleBlur, handleSubmit, values, errors, touched, isSubmitting }) => (
<View style={LoginStyle.loginFormWrapper}>
<View>
    <InputText
        label="First Name"
        placeholder='First Name'
        autoCapitalize="words"
        autoComplete="name"
        keyboardType="default"
        returnKeyType='next'
        returnKeyLabel='next'
        value={values.firstName}
        onChangeText={handleChange('firstName')}
        onBlur={handleBlur('firstName')}
        error={errors.firstName}
        touched={touched.firstName}
        ref={firstNameRef}
        onSubmitEditing={() => lastNameRef.current?.focus()}
    />
</View>
<View>
    <InputText
        label="Last Name"
        placeholder='Last Name'
        autoCapitalize="words"
        autoComplete="name"
        keyboardType="default"
        returnKeyType='next'
        returnKeyLabel='next'
        value={values.lastName}
        onChangeText={handleChange('lastName')}
        onBlur={handleBlur('lastName')}
        error={errors.lastName}
        touched={touched.lastName}
        ref={lastNameRef}
        onSubmitEditing={() => emailRef.current?.focus()}
    />

</View>
<View>
    <InputText
        label="Email"
        placeholder='Email'
        autoCapitalize='none'
        autoCompleteType='email'
        keyboardType='email-address'
        returnKeyType='next'
        returnKeyLabel='next'
        value={values.email}
        onChangeText={handleChange('email')}
        onBlur={handleBlur('email')}
        error={errors.email}
        touched={touched.email}
        ref={emailRef}
        onSubmitEditing={() => passwordRef.current?.focus()}
    />
</View>
<View>
    <InputText
        label="Password"
        value={values.password}
        placeholder='Password'
        autoCapitalize='none'
        autoCompleteType='password'
        returnKeyType='next'
        returnKeyLabel='next'
        onChangeText={handleChange('password')}
        onBlur={handleBlur('password')}
        error={errors.password}
        touched={touched.password}
        onSubmitEditing={() => confirmPasswordRef.current?.focus()}
    />
</View>
<View>
    <InputText
        label="Confirm Password"
        value={values.confirmPassword}
        placeholder='Confirm Password'
        autoCapitalize='none'
        autoCompleteType='password'
        returnKeyType='go'
        returnKeyLabel='go'
        onChangeText={handleChange('confirmPassword')}
        onBlur={handleBlur('confirmPassword')}
        error={errors.confirmPassword}
        touched={touched.confirmPassword}
        ref={confirmPasswordRef}
    />
</View>
<View style={{ marginVertical: 25 }}>
    <Button
        mode="contained"
        style={buttonStyle}
        labelStyle={buttonLabelStyle}
        onPress={handleSubmit}
    >
        Submit
    </Button>
</View>
</View>

Yup Validation Schema is as follows:

const SignupSchema = Yup.object().shape({
firstName: Yup.string()
    .min(2, 'Too Short!')
    .max(25, 'Too Long!')
    .required('Required'),
lastName: Yup.string()
    .min(2, 'Too Short!')
    .max(25, 'Too Long!')
    .required('Required'),
email: Yup.string().email('Invalid email').required('Required'),
password: Yup.string()
    .min(8, 'Too Short!')
    .required('Required'),
confirmPassword: Yup.string()
    .required('Required')
    .oneOf([Yup.ref('password'), null], 'Passwords must match')

});

CodePudding user response：

Don't pass the error prop, unless if the field has been touched:

    <InputText
        error={touched.firstName ? errors.firstName : undefined}
        touched={touched.firstName}
    />