0

Estoy haciendo una aplicacion web con react donde tengo que hacer unas validaciones con formik junto con material-ui y ya anteriormente tenia un foumulario con validaciones que es casi igual a este y no me explico el porque ya que el codigo es exactamente el mismo ya que son las mismas validaciones, y no funcionan, el error es que no manda el formulario y no muetra los mensajes de errores, solo recarga la pagina y arriba en la url salen los valores de los formularios y en el otro no sale los valores de los campos en la url, si alguien puede ayudarme se lo agradeceria

  import React from 'react';

  import {
 Button,
 CssBaseline,
 TextField,
 FormControlLabel,
 Checkbox,

 Grid,
  Box, Typography, Container  } from '@material-ui/core';

  import {  Link } from "react-router-dom";

  import { makeStyles } from '@material-ui/core/styles';

  import CopyrightText from '../components/CopyrightText';

  import * as yup from 'yup';

  import { useFormik } from 'formik';


 const useStyles = makeStyles((theme) => ({
 paper: {
 marginTop: theme.spacing(8),
 display: 'flex',
 flexDirection: 'column',
 alignItems: 'center',
 },
 avatar: {
 margin: theme.spacing(1),
 backgroundColor: theme.palette.secondary.main,
 },
 form: {
 width: '100%', // Fix IE 11 issue.
 marginTop: theme.spacing(1),
 },
 submit: {
 margin: theme.spacing(3, 0, 2),
 },
 }));

  const loginShema = yup.object({
              email: yup.string()
                .required('Your email please.')
                .email('Enter a valid email.'),
            password: yup.string()
                   .required('Your password please.')
                    .min(8, 'Your password is at least 8 characters long.')

 })



function LoginPage() {
 const classes = useStyles();
 const formik = useFormik({
  initialValues:{
    email:'',
    password:''
  },
  validationSchema: loginShema,
  onSubmit: (values) => {
   alert(JSON.stringify(values, null, 2))
   },

  })
  return (
   <body className="circuit-background">
    <Container component="main" maxWidth="xs" >
     <CssBaseline />
     <div className={classes.paper}>

     <Typography component="h1" variant="h5">
      Sign in
     </Typography>
    <form className={classes.form} noValidate>
      <TextField
        variant="filled"
        margin="normal"
        fullWidth
        id="email"
        label="Email Address"
        name="email"
        autoComplete="email"
        autoFocus
        onChange={formik.handleChange}
        value={formik.values.email}
        error={formik.touched.email && Boolean(formik.errors.email)}
        helperText={formik.touched.email && formik.errors.email}

      />
      <TextField
        variant="filled"
        margin="normal"
        fullWidth
        name="password"
        label="Password"
        type="password"
        id="password"
        autoComplete="current-password"
        onChange={formik.handleChange}
        value={formik.values.password}
        error={formik.touched.password && Boolean(formik.errors.password)}
        helperText={formik.touched.password && formik.errors.password}


      />
      <FormControlLabel
        control={<Checkbox value="remember" required color="primary" />}
        label="Remember me"
      />
      <Button
        type="submit"
        fullWidth
        variant="outlined"
        color="primary"
        className={classes.submit}
      >
        Sign In
      </Button>
      <Grid container>
        <Grid item xs>
          <Link >
            Forgot password?
          </Link>
         </Grid>
         <Grid item>
           <Link to="/SignUp">
             Don't have an account? Sign Up
           </Link>
         </Grid>
       </Grid>
     </form>
   </div>
   <Box mt={8}>
    <CopyrightText />
   </Box>
   </Container>
  </body>
  );
 }

export default LoginPage;

1 respuesta 1

0

Bueno amigo lo que te está pasando es el comportamiento por defecto de un formulario en html <form />, que es enviar los datos dentro de él a través del method GET en la URL.

Entonces para evitar esto, normalmente se usa event.preventDrfault() en el onSubmit del form, en tu caso como usas Formik debes de pasarle al form el handleSubmit para sobreescribir el comportamiento por defecto, quedaría algo así:

 <form className={classes.form} noValidate onSubmit={formik.handleSubmit}>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.