#javascript #reactjs #forms #submit #formik
Вопрос:
я пытаюсь создать регистр форм с помощью formik и да для обработки ввода ошибок, но когда я пытаюсь отправить свою форму, ничего не происходит. О да, все хорошо, это показывает мне ошибки, но когда я удаляю систему проверки, handlesubmit работает. Я не знаю почему, есть идеи ?
Вот мой код:
import React from "react";
import {
Button,
TextField,
Grid,
Paper,
AppBar,
Typography,
Toolbar,
Link,
} from "@material-ui/core";
//import axios from "axios";
import { useFormik } from 'formik';
import * as Yup from 'yup'
import "./auth.css";
export default function LoginFrom() {
const registerSchema = Yup.object().shape({
firstName: Yup.string()
.min(2, 'Too Short!')
.max(50, 'Too Long!')
.required('Required'),
lastName: Yup.string()
.min(2, 'Too Short!')
.max(50, 'Too Long!')
.required('Required'),
username: Yup.string()
.min(2, 'Too Short!')
.max(50, 'Too Long!')
.required('Required'),
email: Yup.string().email('Invalid email').required('Required'),
password: Yup.string()
.min(2, 'Too Short!')
.max(50, 'Too Long!')
.required('Required'),
passwordConfirm: Yup.string()
.oneOf([Yup.ref('password'), null], 'Passwords must match')
});
const formik = useFormik({
initialValues:{
firstname: "",
lastname: "",
username: "",
email: "",
password: "",
passwordConfirm: "",
},
validationSchema: registerSchema,
onSubmit: values => {
console.log("submited")
}
})
const handleGoogleLogin = async (e) => {
e.preventDefault();
window.open("http://localhost:5000/auth/google", "_self");
};
return (
<React.Fragment>
<div>
<AppBar position="static" alignitems="center" color="primary">
<Toolbar>
<Grid container justify="center" wrap="wrap">
<Grid item>
<Typography variant="h6">NETFLIX</Typography>
</Grid>
</Grid>
</Toolbar>
</AppBar>
<Grid container spacing={0} justify="center" direction="row">
<Grid item>
<Grid
container
direction="column"
justify="center"
spacing={2}
className="login-form"
>
<Paper
variant="elevation"
elevation={2}
className="login-background"
>
<Grid item>
<Typography component="h1" variant="h5">
Sign in
</Typography>
</Grid>
<Grid item>
<form onSubmit={formik.handleSubmit}>
<Grid container direction="column" spacing={2}>
<Grid item>
<TextField
type="email"
placeholder="Email"
fullWidth
name="email"
variant="outlined"
required
autoFocus
value={formik.values.email}
onChange={formik.handleChange}
error={formik.touched.email amp;amp; Boolean(formik.errors.email)}
helperText={formik.touched.email amp;amp; formik.errors.email}
/>
</Grid>
<Grid item>
<TextField
type="text"
placeholder="Username"
fullWidth
name="username"
variant="outlined"
required
value={formik.values.username}
onChange={formik.handleChange}
error={formik.touched.username amp;amp; Boolean(formik.errors.username)}
helperText={formik.touched.username amp;amp; formik.errors.username}
/>
</Grid>
<Grid item>
<TextField
type="text"
placeholder="Firstname"
fullWidth
name="firstname"
variant="outlined"
required
value={formik.values.firstname}
onChange={formik.handleChange}
error={formik.touched.firstname amp;amp; Boolean(formik.errors.firstname)}
helperText={formik.touched.firstname amp;amp; formik.errors.firstname}
/>
</Grid>
<Grid item>
<TextField
type="text"
placeholder="Lastname"
fullWidth
name="lastname"
variant="outlined"
required
value={formik.values.lastname}
onChange={formik.handleChange}
error={formik.touched.lastname amp;amp; Boolean(formik.errors.lastname)}
helperText={formik.touched.lastname amp;amp; formik.errors.lastname}
/>
</Grid>
<Grid item>
<TextField
type="password"
placeholder="Password"
fullWidth
name="password"
variant="outlined"
required
value={formik.values.password}
onChange={formik.handleChange}
error={formik.touched.password amp;amp; Boolean(formik.errors.password)}
helperText={formik.touched.password amp;amp; formik.errors.password}
/>
</Grid>
<Grid item>
<TextField
type="password"
placeholder="Password Confirm"
fullWidth
name="passwordConfirm"
variant="outlined"
required
value={formik.values.passwordConfirm}
onChange={formik.handleChange}
error={formik.touched.passwordConfirm amp;amp; Boolean(formik.errors.passwordConfirm)}
helperText={formik.touched.passwordConfirm amp;amp; formik.errors.passwordConfirm}
/>
</Grid>
<Grid item>
<Button
variant="contained"
color="primary"
type="submit"
className="button-block"
>
Submit
</Button>
</Grid>
</Grid>
</form>
</Grid>
<Grid item>
<Link href="#" variant="body2">
Forgot Password?
</Link>
<Button
variant="contained"
color="primary"
className="button-block"
onClick={handleGoogleLogin}
>
Login With Google
</Button>
</Grid>
</Paper>
</Grid>
</Grid>
</Grid>
</div>
</React.Fragment>
);
}
Как я уже сказал, схема yup работает, речь идет о проверке в useFormik, которая выдает мне ошибку при отправке.
Ответ №1:
Ну, я вижу, проблема в том validationSchema , вот что вы можете сделать.
1-) создайте свою систему проверки просто
const validationSchema = Yup.object().shape({
fullName: Yup.string().min(3).max(25).required(),
lastName: Yup.string().min(3).max(45).required(),
password: Yup.string().min(4).max(25).required(),
});
Затем используйте validationSchema Formik форму ввода.
вместо того, чтобы form
это было бы так.
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
validationSchema={validationSchema}
>
</Formik>
Также вы можете использовать ErrorMessage
<ErrorMessage
name="fullName"
component="span"
className="erorName"
/>
импортируйте вот так:
import { Formik, Form, Field, ErrorMessage } from "formik";
Ответ №2:
Я нашел свою ошибку, я удалил все необходимые методы в registerSchema из yup, и теперь это работает, возможно, я получил ошибку, потому что я вызываю required в yup И в своем текстовом поле. Что ж, теперь это работает.