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

[Bug] No me detecta el error de typeMismatch

Me detecta todos los demas errores pero el de typeMismatch que hace que detecte si es un correo no lo hace. Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Este es mi codigo.

export function valida(input){
    //Dataset lo que nosotros estamos obteniendo es la colección de todos los datas atribute
    //El punto tipo es para obtener el tipo de Input.
    const tipoDeInput = input.dataset.tipo;
    //Necesitamos por cada uno de los tipos de input o por el tipo de input, verificar si existe dentro de los validadores.
    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");
        //En caso de que si existe algún error, lo que quiero es mostrar mensaje de error llamando a esa funcion, para que se entienda mejor.
        //Esta funcion de mostrarMensaje de error su primer parametro es el tipo de input y el segundo el input.
        input.parentElement.querySelector(".input-message-error").innerHTML= mostrarMensajeDeError(tipoDeInput,input);

    };
};

//Este arreglo nos ayudará a interceptar dependiendo del tipo de input, para cada tipo de errores, lo voy a recorrer.
const tipoDeErrores = [
    "valueMissing",
    "typeMismatch",
    "patternMismatch",
    "customError",
];

//Esto nos ayudará con los tipos de errores de cada uno de los inputs de nuestro formulario.
//Para cada tipo de error mostraremos un mensaje diferente.
const mensajesDeError =  {
    //Tenemos primero al objeto del input del nombre.
    nombre: {
        //Con ValueMissing verificamos si el valor está faltando si el usuario no puso nada allí.
        valueMissing:"El campo nombre no puede estar vacío.",
    },

    email: {
        //Con ValueMissing verificamos si el valor está faltando si el usuario no puso nada allí.
        valueMissing:"El campo correo no puede estar vacío.",
        //typeMissmatch hace referencia a que si es un correo electrónico.
        typeMismatch:"El correo no es válido",
    },

    password: {
        //Con ValueMissing verificamos si el valor está faltando si el usuario no puso nada allí.
        valueMissing:"El campo contraseña no puede estar vacío.",
        patternMismatch:"Al menos 6 caracteres, un máximo 12, debe contener una letra minúscula, una letra mayúscula, un número y no puede contener caracteres especiales.",

    },

    nacimiento: {
        //Con ValueMissing verificamos si el valor está faltando si el usuario no puso nada allí.
        valueMissing:"El campo fecha de nacimiento no puede estar vacío.",
        customError: "Debes tener al menos 18 años de edad",
    },

};

const validadores = {
    //Vemos que coincidan el nombre del tipo = nacimiento con la llave dentro de este objeto que es una arrow funcion.
    //Una función que va a recibir input y lo que va a hacer es mandar a llamar validarNacimiento. 
    nacimiento: (input) => validarNacimiento(input),
};

//Esta funcion de mostrarMensaje de error su primer parametro es el tipo de input y el segundo el input.
function mostrarMensajeDeError(tipoDeInput, input) {
    //Tenemos un mensaje que es el que queremos decirle al usuario dependiendo de si el campo está vacío, 
    let mensaje ="";
    //En este tipo de errores voy a recibir cada uno de los errores que está en el arreglo..
    tipoDeErrores.forEach((error) => {
        //Vamos a buscar con validity si dentro de nuestro input hay alguno de los errores del arreglo.
        if(input.validity[error]){
            //Con esto vemos cuál tipo de Input y cual es el error específico
            console.log(tipoDeInput, error);
            //Con esto validamos si es que hay algun error.
            console.log(input.validity[error]);
            //Necesitamos ver cual es el tipo de Input que nos dió error y acceder a los mensajesDeError con sus valores.
            console.log(mensajesDeError[tipoDeInput][error]);
            // El mensaje va a ser igual a nuestro objeto donde están todos los mensajes de error para cada tipo de input.
            //luego entre corchetes, el tipo de input para poder acceder a si es nombre, email, password, nacimiento,  y por último el error.
            mensaje = mensajesDeError[tipoDeInput][error];
        };
    })
    return mensaje;
};
2 respuestas
solución!

Yo pensaba que typeMismatch era que coincidia con un formato de correo electronico, pero era si coincidia con el tipo de input que definimos, en mi caso coincidia porque no lo cambie a tipo email. Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidadLuego que ya lo cambie ya me funciono normal. Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Interesante. Gracias por compartir la solucion Margarita