폼익 반응 - 폼 제출 시에만 유효성 검사 트리거

폼익 반응 - 폼 제출 시에만 유효성 검사 트리거

리액트 네이티브 어플리케이션에서 Formik을 사용하고 있습니다.로그인 양식에는 이메일과 비밀번호라는 두 개의 필드가 있으며, 둘 다 필수입니다.

검증 규칙을 작성했습니다.

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

폼 제출 시에만 유효성 검사를 트리거하고 오류 팝업을 표시해야 합니다.문서를 읽었지만 검증이 Blur에서 트리거되기 때문에 해결책을 찾을 수 없습니다.이것이 어떻게 행해지는가?

감사합니다!

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의 유효성 검사 실행 시기를 제어할 수 있습니다.<Formik validateOnChange>및/또는<Formik validateOnBlur>소품도 준비했습니다.기본적으로 Formik은 다음과 같이 검증 방법을 실행합니다.

에 패스하다Formik소품validateOnChange={false}그리고.validateOnBlur={false}

네, 이런 것도 할 수 있어요

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

useFormik 훅을 사용하는 경우 다음 구성을 추가해야 합니다.

  const formik = useFormik({
    initialValues,
    validationSchema,
    validateOnChange: false, // this one
    validateOnBlur: false, // and this one
    onSubmit: (values) => {
     do something on submit
    },
  });

언급URL : https://stackoverflow.com/questions/56742376/react-formik-trigger-validation-only-on-form-submit