Estoy usando Formik en mi aplicación React Native. En el formulario de inicio de sesión tengo dos campos: correo electrónico y contraseña, ambos son obligatorios.
He escrito tales reglas de validación:
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'), });Necesito activar la validación SOLAMENTE en el envío del formulario y mostrar una ventana emergente de error. He leído los documentos, pero no puedo encontrar una solución porque la validación se activa en Blur. ¿Cómo se puede hacer esto?
¡Gracias!
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;revisa los documentos
Puede controlar cuándo Formik ejecuta la validación cambiando los valores de los
<Formik validateOnChange>y/o<Formik validateOnBlur>según sus necesidades. De forma predeterminada, Formik ejecutará métodos de validación de la siguiente manera:
Pase a su Formik los accesorios validarOnChange validateOnChange={false} y validateOnBlur={false}
Sí. Puedes hacer algo como esto.
<Formik initialValues={initialValues} validationSchema={validationSchema} validateOnChange={false} validateOnBlur={false} onSubmit={(values, { validate }) => { validate(values); }} >Si usa el gancho useFormik, se debe agregar la siguiente configuración
const formik = useFormik({ initialValues, validationSchema, validateOnChange: false, // this one validateOnBlur: false, // and this one onSubmit: (values) => { do something on submit }, });