[英]Formik, Yup, formik-material-ui sign up form showing email error when the form is clicked
I have a sign up form built with Formik, Yup and formik-material-ui:我有一个使用 Formik、Yup 和 formik-material-ui 构建的注册表单:
If I click anywhere on the form it shows the email error, meaning if the user clicks on 'Already have an account?如果我单击表单上的任何位置,它会显示 email 错误,这意味着如果用户单击“已经有帐户? Sign In', the form shows this error rather than redirecting to sign in:
登录”,表单显示此错误,而不是重定向到登录:
<Formik
initialValues={{
phoneNumber: '',
email: '',
password: '',
confirmPassword: '',
canMarket: false,
}}
validationSchema={yup.object().shape({
email: yup
.string('Email Address')
.email('Enter a valid email')
.required('Email is required'),
password: yup
.string()
.required('Password is required')
.min(8, 'Password is too short - should be 8 chars minimum'),
confirmPassword: yup
.string()
.required('Confirm Password is required')
.oneOf([yup.ref('password'), null], 'Passwords must match'),
phoneNumber: yup.string().required('Phone Number is required'),
})}
onSubmit={(
{ phoneNumber, email, password, canMarket },
{ setSubmitting },
) => {
signUp(client, phoneNumber, email, password, canMarket, history);
setTimeout(() => {
setSubmitting(false);
}, 500);
}}
>
{({ dirty, isValid, isSubmitting, handleSubmit }) => (
<Form onSubmit={handleSubmit}>
<Field
className="auth__field"
variant="outlined"
fullWidth
component={TextField}
type="email"
label="Email Address"
name="email"
autoFocus
InputProps={{
startAdornment: (
<InputAdornment position="start">
<EmailIcon color="primary" />
</InputAdornment>
),
}}
/>
<Field
className="auth__field"
variant="outlined"
fullWidth
component={TextField}
type="password"
label="Password"
name="password"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<LockIcon color="primary" />
</InputAdornment>
),
}}
/>
...
I have tried adding updateOnBlur={true} and updateOnChanged={true} to no avail.我尝试添加 updateOnBlur={true} 和 updateOnChanged={true} 无济于事。 I have also tried adding this to the email field
我也尝试将其添加到 email 字段
error={touched.email && errors.email}
again to no avail.再次无济于事。
Solved.解决了。 I had autoFocus set on the email field so when I clicked on the form the email field was getting marked as touched.
我在 email 字段上设置了自动对焦,所以当我点击表格时,email 字段被标记为已触摸。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.