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)
4
respuestas

Este punto no lo entiendo:

Esta parte no la entiendo, entiendo lo que hace la función pero la ultima linea antes de las llaves no entiendo la sintaxis ¿ validadores[tipoDeInput] hace referencia a que cosa? ¿Esta accediendo a por ejemplo nacimiento? Y el (input) que le sigue que estaria haciendo en la función validadores al pasarselo? Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

4 respuestas

Hola Alumno, epsero que estés bien! Comparte el código completo por favor, para que nosotros possamos ayudarte :) ¡Para cualquier duda, estoy disponible! ¡Vamos juntos! ¡No desanimes! :)

Si este post te ayudó, por favor, marca como solucionado ✓.

este es el codigo

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--invalid")
        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 mensajesDeError = {
    nombre:{
        valueMissing: "El campo nombre no puede estar vacio"
    },
    email:{
        valueMissing: "El campo email no puede estar vacio",
        typeMismatch: "El correo no es válido"
    },
    password:{
        valueMissing: "El campo password no puede estar vacio",
        patternMismatch: "Al menos 6 caracteres, máximo 12 y debe contener una letra minúscula, una letra mayúscula, un número y no puede contener caracteres especiales"
    },
    nacimiento:{
        valueMissing: "El campo nacimiento no puede estar vacio",
        customError:" Debes tener al menos 18 años de edad",
    },
};

const validadores ={
    nacimiento: input=>(validarNacimiento(input)),
};
function mostrarMensajeDeError(tipoDeInput, input){
    let mensaje="";
    tipoDeErrores.forEach(error=>{
        if(input.validity[error]){

            console.log(input.validity[error]);
            mensaje=mensajesDeError[tipoDeInput][error]
        }
    })
    return mensaje;
}
function validarNacimiento(input){
    const fechaCliente = new Date(input.value);
    let mensaje="";
    if(!mayorDeEdad(fechaCliente)){
        mensaje="Debes tener al menos 18 años";
    }

    input.setCustomValidity(mensaje);

}

function mayorDeEdad(fecha){
    const fechaDeHoy = new Date();
    console.log(fecha, "---", fechaDeHoy);
    const diferenciaFechas = new Date(fecha.getUTCFullYear() + 18, fecha.getUTCMonth(), fecha.getUTCDate());
    return diferenciaFechas <= fechaDeHoy;

}

En el video 03-mejorando el código, de la clase 03-validación de fechas, el muchacho explica el por qué del código que estas preguntando vos... Igual no me gusta para nada su forma de no explicar, se nota que sabe mucho, pero habla de clases e instancias de clases... usa cosas raras para las funciones sin explicar... como que no sabe que somos jovenes padawan aprendices de código y no tenemos idea siquiera de lo que es una clase xD

solución!

Hola Alumno ! El código se le de derecha a izquierda y de arriba hacia abajo. Imaginalo como una procesadora: por un extremo ingresa materia prima y por el otro sale el producto terminado

Losinput.dataset.tipo son todos los input.dataset que contengan tipo

luego,

Los input.dataset.tipo se guardan en la constantetipoDeInput , esa es la finalidad del signo igual: const tipoDeInput = input.dataset.tipo;

EL input nacimiento se procesa por validaNacimiento Si tipoDeInput pasa por las condiciones de los validadores es aceptado :

 if (validadores[tipoDeInput]) {
    validadores[tipoDeInput](input);
  }
luego se le pasa el input a 
    ` function validarNacimiento` y demás funciones de validación según corresponda