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.