web-dev-qa-db-fra.com

React Formik - Validation du déclencheur uniquement sur le formulaire soumis

J'utilise Formik dans mon React Application native. Sur le formulaire de connexion, j'ai deux champs: email et mot de passe, les deux sont obligatoires.

J'ai écrit de telles règles de validation:

export const LoginSchema = Yup.object().shape({
  email: Yup.string()
    .email('The email is invalid')
    .required('This field is required'),
  password: Yup.string()
    .min(6, 'The password is too short')
    .max(12, 'The password is too long')
    .required('This field is required'),
});

Je dois déclencher la validation UNIQUEMENT sur le formulaire soumis et afficher une fenêtre d'erreur. J'ai lu la documentation, mais je ne trouve pas de solution car la validation déclenche onBlur. Comment cela peut-il être fait?

Merci!

const Login = ({ navigation }) => {
  const [isLoading, setIsLoading] = useState(true);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    // Later check for token
    const tokenIsStored = true;

    if (tokenIsStored) {
      setIsLoading(false);
    }
  });

  const onLogin = values => {
    console.log(values, 'on login');

    // Pass value to BE endpoint
    navigation.navigate('Dashboard');
  };

  const onModalClose = () => {
    setIsVisible(false);
  };

  console.log(isVisible);

  if (!isLoading) {
    return (
      <ScrollContainer keyboardShouldPersistTaps="handled">
        <ThemedStatusBar />

        <ThemedModal
          isVisible={isVisible}
          primaryMessage="Log In Failed"
          secondaryMessage="Please check your password"
          btnTitle="OK"
          btnPress={() => onModalClose()}
        />

        <Formik
          initialValues={{ email: '', password: '' }}
          validationSchema={LoginSchema}
          onSubmit={values => onLogin(values)}
        >
          {props => (
            <View>
              <ScrollContainer BackgroundColor={Colors.greyColor} Padding="0px" style={styles.loginForm}>
                <ThemedInput
                  onChangeText={props.handleChange('email')}
                  onBlur={props.handleBlur('email')}
                  value={props.values.email}
                  placeholder="Email"
                  keyboardType="email-address"
                />
                <ThemedInput
                  onChangeText={props.handleChange('password')}
                  onBlur={props.handleBlur('password')}
                  value={props.values.password}
                  placeholder="Password"
                  overrideStyles={styles.loginInputBottom}
                  secureTextEntry
                />
                {props.errors.email && setIsVisible(true)}
              </ScrollContainer>
              <ThemedButton onPress={props.handleSubmit} title="Log In" />
            </View>
          )}
        </Formik>
      </ScrollContainer>
    );
  }
  return <ThemedLoader isLoading />;
};

export default Login;
reactjsvalidationreact-nativeformikyup
11
lecham

Vérifiez les docs

Vous pouvez contrôler le moment où Formik exécute la validation en modifiant les valeurs de <Formik validateOnChange> et/ou <Formik validateOnBlur> accessoires en fonction de vos besoins. Par défaut, Formik exécutera les méthodes de validation comme suit:

Passez à votre Formik les accessoires validateOnChange={false} et validateOnBlur={false}

21
Vencovsky

Ouais. Vous pouvez faire quelque chose comme ça.

<Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        validateOnChange={false}
        validateOnBlur={false}
        onSubmit={(values, { validate }) => {
            validate(values);
        }}
    >
0
karthik talam