i try to create a form register with formik, and yup for handle error input, but when i try to submit my form nothing happen. About yup evyrthing is good it display me the errors but when i remove validationschema, handlesubmit work. I don't know why, any idead ?
Here is my code:
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 && Boolean(formik.errors.email)}
helperText={formik.touched.email && 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 && Boolean(formik.errors.username)}
helperText={formik.touched.username && 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 && Boolean(formik.errors.firstname)}
helperText={formik.touched.firstname && 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 && Boolean(formik.errors.lastname)}
helperText={formik.touched.lastname && 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 && Boolean(formik.errors.password)}
helperText={formik.touched.password && 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 && Boolean(formik.errors.passwordConfirm)}
helperText={formik.touched.passwordConfirm && 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>
);
}
As i said, the yup schema works, its about validationSchema on the useFormik which give me error on the handleSubmit.
CodePudding user response：
Well, I see the problem is about validationSchema , here what you can do.
1-) create your validationSchema simple
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(),
});
Then use the validationSchema in Formik form.
insteat ofform
it would be like this.
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
validationSchema={validationSchema}
>
</Formik>
Also you can use ErrorMessage
<ErrorMessage
name="fullName"
component="span"
className="erorName"
/>
import like this:
import { Formik, Form, Field, ErrorMessage } from "formik";
CodePudding user response：
I found my error, i remove all required method on registerSchema from yup, and now it works, maybe i got error because i call required on yup AND on my textfield. Well now it works.