useFormik, handlesubmit doesn't work with validationschema

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.

2 answers

  • answered 2021-10-12 16:14 John

    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";
    

  • answered 2021-10-12 16:41 Yan Dbz

    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.

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum