Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
2
respuestas

Función definida y no usada e indefinida al mismo tiempo

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 `

2 respuestas
solución!

¡Hola Estudante!

El error que estás recibiendo se debe a que estás definiendo la función validarEmail, pero nunca la estás utilizando en tu código. Por otro lado, también estás recibiendo un error que indica que la función validarEmail no está definida.

Para solucionar estos problemas, te sugiero que agregues la función validarEmail en la sección de validación de tu formulario, justo después de las funciones validarNombre y validarApellido. Luego, asegúrate de llamar a la función validarEmail en el evento onBlur del campo de correo electrónico.

Aquí te dejo el código modificado:

function FormSignUp ({handleSubmit}){

    // ...

    function validarNombre(nombre){
        // ...
    }

    function validarApellido(apellido) {
        // ...
    }

    function validarEmail(ecorreo){
        if (ecorreo.includes('@') && ecorreo.includes('.')){
            return { ...errors, email: { error: false, message: '' } }
        } else {
            return { ...errors, email: { error: true, message: "Deben escribirse en el formato 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

Espero que esto te ayude a solucionar tu problema. ¡Buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)

Lo he resuelto, parece que una "{" estaba mal colocada, "validarEmail" se encontraba adentro de "validarApellido". Con esa corrección el código funciona.