React Formik-仅在表单提交时触发验证 [英] React Formik - Trigger validation only on form submit
问题描述
我在我的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屋!