Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

[Duda] problema con el input

Terminando la clase 4, en la consola me señala que el input no es definido. Alguien que me ayude a resolverlo muchas gracias. Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

validaciones:

export function valida(input) {
    const tipoDeInput = input.dataset.tipo;
    if(validadores[tipoDeInput]){
        validadores[tipoDeInput](input)
    }
}

if(input.validity.valid){
    input.parentElement.classList.remove("input-container");
    input.parentElement.querySelector(".input-message-error").innerHTML = ""
}else {
    input.parentElement.classList.add("input-container--invalid");
    input.parentElement.querySelector(".input-message-error").innerHTML = mostrarMensajeDeError(tipoDeInput, input)
}

const tipoDeErrores = [
    "valueMissing",
    "typeMismatch",
    "patternMismatch",
    "customError",
]

const mensajeDeError = {
    nombre: {
        valueMissing: "El campo nombre no puede estar vacío",
    },
    email: {
        valueMissing: "El campo correo no puede estar vacío",
        typeMismatch: "El correo no es valido",
    },
    password: {
        valueMissing: "Este campo no puede estar vacío",
        patternMismatch: "Al menos 6 caracteres, máximo 12, debe contener una letra minúscula, una letra mayúscula, un número y no pude contener caracteres especiales",
    },
    nacimiento: {
        valueMissing: "El campo contraseña no puede estar vacío",
        customError: "Debes tener al menos 18 años de edad",

    }
}

const validadores = {
    nacimiento: input => validaNacimiento(input)
}

function mostrarMensajeDeError(tipoDeInput, input) {
    let mensaje = ""
    tipoDeErrores.array.forEach( error => {
        if(input.validity[error]){
            console.log(input.validity[error])
            console.log(mensajeDeError[tipoDeInput[error]]);
            mensaje = mensajeDeError[tipoDeInput][error]
        }
        
    });


    return mensaje
}

function validaNacimiento(input){
    const fechaCliente = new Date(input.value)
    let mensaje = ""
    if(!mayorEdad(fechaCliente)){
        mensaje = "Debes tener al menos 18 años de edad"
    }
    input.setCustomValidity(mensaje)
}

function mayorEdad(fecha){
    const fechaActual = new Date();
    const deferenciaFechas = new Date(
        fecha.getUTCFullYear() +18, 
        fecha.getUTCMonth(), 
        fecha.getUTCDate()
        );
    return deferenciaFechas <= fechaActual;
}

app:

import { valida } from "../js/validaciones.js";

console.log = document.querySelector("input");

Input.forEach( input => {
    input.addEventListener("blur", (input) => {
        valida(input.target)
    })
})
1 respuesta

¡Hola Nailea!

Gracias por compartir tu pregunta. Parece que estás teniendo un problema con el input en tu código. Al revisar el código, noto que hay algunos errores que podrían estar causando el problema.

En primer lugar, en tu archivo "app.js", veo que estás intentando asignar el valor del input a console.log, lo cual no es correcto. Para obtener el valor del input, debes usar input.target.value. Así que el código debería ser así:

Input.forEach( input => {
    input.addEventListener("blur", (input) => {
        valida(input.target.value)
    })
})

Además, en tu función valida, estás pasando input como argumento, pero luego intentas acceder a input.dataset.tipo, lo cual no es correcto. En su lugar, deberías pasar directamente tipoDeInput como argumento. Así que el código debería ser así:

export function valida(tipoDeInput) {
    if(validadores[tipoDeInput]){
        validadores[tipoDeInput](input)
    }
}

Por último, en tu función mostrarMensajeDeError, hay un error de sintaxis en la línea tipoDeErrores.array.forEach( error => {. Debería ser tipoDeErrores.forEach( error => {. Además, en la línea console.log(mensajeDeError[tipoDeInput[error]]);, debería ser console.log(mensajeDeError[tipoDeInput][error]);. Así que el código debería ser así:

function mostrarMensajeDeError(tipoDeInput, input) {
    let mensaje = ""
    tipoDeErrores.forEach( error => {
        if(input.validity[error]){
            console.log(input.validity[error])
            console.log(mensajeDeError[tipoDeInput][error]);
            mensaje = mensajeDeError[tipoDeInput][error]
        }
        
    });

    return mensaje
}

Espero que estos cambios te ayuden a resolver el problema con el input. Si tienes alguna otra pregunta, no dudes en hacerla. ¡Espero haber ayudado y buenos estudios!

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