Buen día. Tengo un problema que no entiendo. Estoy en la validación de los campos faltantes, el nombre y apellido funciónan pero en el email me arroja un error contradictorio que no entiendo cómo resolver. En la función validarEmail explore dos posibildades, una con regex y otra evaluando los caracteres, pero con ambas da el mismo error. En la terminal me aparecen los siguientes errores:
- Line 51:14: 'validarEmail' is defined but never
- Line 120:33: 'validarEmail' is not defined
Debajo pego el código. De antemano gracias por su atención.
`
function FormSignUp ({handleSubmit}){ //Se colocó handleSubmit en lugar de props y funciona igual //const { handleSubmit } = props const [name, setName] = useState('') const [lastName, setLastName] = useState('') const [email, setEmail] = useState('') const [prom, setProm] = useState('') const [nov, setNov] = useState('')
const [errors,setErrors] = useState ({
name: {
error: false,
message: 'Deben ser al menos 3 caracteres',
},
lastName: {
error: false,
message: 'Deben ser al menos 10 caracteres',
},
email: {
error: false,
message: 'Debe tener un email válido',
},
})
function validarNombre(nombre){
if (nombre.length >= 3){
return { ...errors, name: {error: false, message: ''}}
}else{
return { ...errors, name: {error: true, message: 'Deben ser al menos 3 caracteres'}}
}
}
function validarApellido(apellido) {
if(apellido.length >= 3){
return { ...errors, lastName: { error: false, message: '' } }
} else {
return { ...errors, lastName: { error: true, message: "Deben ser al menos 10 caracteres" } }
}
function validarEmail(ecorreo){
if (ecorreo.includes('@') && ecorreo.includes('.')){
//const correoValido = new RegExp('^[a-zA-Z0-9._:$!%-]+@[a-zA-Z0-9.-]+.[a-zA-Z]$');
//if (correoValido.test(ecorreo)) {
return { ...errors, email: { error: false, message: '' } }
} else {
return { ...errors, email: { error: true, message: "Deben escribirse en el foramto ejemplo@ejemplos.com" } }
}}}
return <form onSubmit={(e)=>{
e.preventDefault()
handleSubmit({name,lastName,email,prom,nov})
}}
>
<TextField
id="name"
label="Nombre"
variant="outlined"
fullWidth margin="normal"
onChange={(e) =>{
setName(e.target.value)
}}
value={name}
error={ errors.name.error }
helperText={ errors.name.error ? errors.name.message: '' }
onBlur={(e)=>{setErrors(validarNombre(e.target.value))
}}
/>
<TextField
id="lastname"
label="Apellido"
variant="outlined"
fullWidth
margin="normal"
value={lastName}
onChange={(e) =>{
setLastName(e.target.value)}}
error={ errors.lastName.error }
helperText={ errors.lastName.error ? errors.lastName.message: '' }
onBlur={(e)=>{setErrors(validarApellido(e.target.value))
}}
/>
<TextField
id="email"
label="Email"
variant="outlined"
fullWidth
margin="normal"
value={email}
onChange={(e)=>
{setEmail(e.target.value)}
}
error={ errors.email.error }
helperText={ errors.email.error ? errors.email.message: '' }
onBlur={(e)=>{setErrors(validarEmail(e.target.value))
}}
/>
<FormGroup>
<FormControlLabel
control={
<Switch
checked={prom}
onChange={(e)=>
setProm(e.target.checked
)
}
/>}
label="Promociones"/>
<FormControlLabel
control={
<Switch
checked={nov}
onChange={(e)=>
setNov(e.target.checked
)
}
/>} label="Novedades"/>
</FormGroup>
<Button variant="contained" type="submit"
>
Registrarse
</Button>
</form>
}
export default FormSignUp
`