1

estoy haciendo un form de registro con Material UI. Hice unas validaciones que funcionan, en el sentido de que si completo mal el input veo un cartel que me dice que lo corrija. Pero si no completo nada y submito el form, no veo ningún cartel y el form es submitido aunque le falta información. Probé poner el atributo required y no bloquea la submisión del form. Tb lo puse como required={true} y no pasó nada. ¿Se les ocurre qué puedo hacer?

export default function SignUp() {
    const [name,setName] = useState("");
    const [lastName,setLastName] = useState("");
    const [email,setEmail] = useState("");
    const [password,setPassword] = useState("");
    const navigate = useNavigate();
  
    const [nameMessage, setNameMessage] = useState("");
    const [lastNameMessage, setLastNameMessage] = useState("");
    const [emailMessage, setEmailMessage] = useState("");
    const [passwordMessage, setPasswordMessage] = useState("");

    const [nameError, setNameError] = useState(false);
    const [lastNameError, setLastNameError] = useState(false);
    const [emailError, setEmailError] = useState(false);
    const [passwordError, setPasswordError] = useState(false);


    const signup = (e) => {
        e.preventDefault();
        auth.createUserWithEmailAndPassword(email, password).then((auth)=>{
           console.log(auth);
           if (auth){
               navigate("/");
           }
        }).catch(err=>alert(err.message))
    }

  const handleSubmit = (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
  
    console.log({
      email: data.get('email'),
      password: data.get('password'),
      name: data.get('name'),
      lastName: data.get('lastName'),
    });
  };

  return (
    <ThemeProvider theme={theme}>
      <Container component="main" maxWidth="xs">
        <CssBaseline />
        <Box
          sx={{
            marginTop: 8,
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
          }}
        >
          <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
            <LockOutlinedIcon />
          </Avatar>
          <Typography component="h1" variant="h5">
            Registrate
          </Typography>
          <Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 3 }}>
            <Grid container spacing={2}>
              <Grid item xs={12} sm={6}>
                <TextField
                  required={true}
                  value={name}
                  onChange={(e) =>{
                    setName(e.target.value);
                    if(name.length<3){
                      setNameError(true);
                      setNameMessage("El nombre debe tener al menos 3 letras");
                    }else{
                      setNameError(false);
                      setNameMessage("");
                    }
                  }}
                  error={nameError}
                  label="Nombre"
                  helperText={nameMessage}
                  variant="outlined"
                  
                />

              </Grid>
              <Grid item xs={12} sm={6}>
                <TextField
                 value={lastName}
                 onChange={(e) =>{
                  setLastName(e.target.value);
                  if(lastName.length<2){
                    setLastNameError(true);
                    setLastNameMessage("El apellido debe tener al menos 2 letras");
                  }else{
                    setLastNameError(false);
                    setLastNameMessage("");
                  }
                }}
                error={lastNameError}
                label="Apellido"
                helperText={lastNameMessage}
                variant="outlined"
                required
                />

              </Grid>
              <Grid item xs={12}>
                <TextField
                  value={email}
                  onChange={(e) =>{
                    setEmail(e.target.value);
                    if(email.length===0){
                      setEmailError(true)
                      setEmailMessage("Por favor, ingresá un email.");
                    }else if(!/\S+@\S+\.\S+/.test(email)){
                      setEmailMessage("El email es inválido.");
                    }else{
                      setEmailError(false);
                      setEmailMessage("");
                    }
                  }}
                  required
                  fullWidth
                  error={emailError}
                label="Email"
                helperText={emailMessage}
                variant="outlined"
                />

              </Grid>
              <Grid item xs={12}>
                <TextField
                  type="password"
                  value={password}
                  onChange={(e) =>{
                    setPassword(e.target.value);
                    if(password.length<6){
                      setPasswordError(true);
                      setPasswordMessage("La contraseña debe tener al menos 6 caracteres.");
                    }else{
                      setPasswordError(false);
                      setPasswordMessage("");
                    }
                  }}
                  fullWidth
                  required
                  error={passwordError}
                  label="Contraseña"
                  helperText={passwordMessage}
                  variant="outlined"
                />
              </Grid>
             
            <Button
              type="submit"
              fullWidth
              variant="contained"
              sx={{ mt: 3, mb: 2 }}
              className="submit"
              onClick={signup}
            >
              Registrate
            </Button>
          </Container>
    </ThemeProvider>
  );
}

No está completo el código porque sino no me deja subir todo, pero está la parte importante. Espero que se entienda.

Gracias.

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.