React Formik-仅在表单提交时触发验证 [英] React Formik - Trigger validation only on form submit

查看:140
本文介绍了React Formik-仅在表单提交时触发验证的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在我的React Native应用程序中使用Formik.在登录表单上,我有两个字段:电子邮件和密码,这两个字段都是必填字段.

I am using Formik in my React Native application. On the login form I have two fields: email and password, both of them are required.

我已经写了这样的验证规则:

I've written such validation rules:

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'),
});

我只需要在表单提交时触发验证并显示错误弹出窗口.我已经阅读了文档,但找不到解决方案,因为验证会触发onBlur.该怎么办?

I need to trigger validation ONLY on form submit and show an error popup. I've read the docs, but can't find a solution because the validation triggers onBlur. How can this be done?

谢谢!

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;

推荐答案

检查文档

您可以根据需要通过更改<Formik validateOnChange>和/或<Formik validateOnBlur>道具的值来控制Formik运行验证的时间.默认情况下,Formik将运行验证方法,如下所示:

You can control when Formik runs validation by changing the values of <Formik validateOnChange> and/or <Formik validateOnBlur> props depending on your needs. By default, Formik will run validation methods as follows:

将道具validateOnChange={false}validateOnBlur={false}

这篇关于React Formik-仅在表单提交时触发验证的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆