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

[Duda] No salen los mensajes de error

Hola a todos, chicos ustedese han tenido este incoveniente

!! me salen los siguientes mensajes de error

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad si lo abro por live server desde VSC Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidadOtro error

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidadcodigo

import { valida } from "./validaciones.js";
const inpust = document.querySelectorAll("input"); // todos los elementos de tipo input
inpust.forEach(input => {
    input.addEventListener("blur", (input) => {
        valida(input.target.value);
    });
});
export function valida(input) {
    //required data-tipo="nacimento
    //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 del input
    if (validadores[tipoDeInput]) {
        validadores[tipoDeInput](input); // vinculado con el otro archivo app.js
    }
    console.log(input.parentElement);
    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 correo no puede estar vacio",
        typeMismatch: "El correo no es valido",
    },
    password: {
        valueMissing: "El campo contraseña no puede estar vacio",
        patternMismatch: "Al menos seis caracteres maximo 12 , debe contener una letra minuscula , 1 letra mayuscula. 1 numero , no puede contener caracteres especiales",
    },
    nacimiento: {
        valueMissing: "Este campo no puede estar vacio",
        customError: "Debes tener al menos 18 años de edad",
    },
}

const validadores = {
    // en registro usamos la palabra nacimiento ( required data-tipo="nacimento")
    nacimiento: input => validarNacimiento(input),

};

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

        }
    });
    return mensaje
}

//se crear función para recibir el input
function validarNacimiento(input) {
    const fechaCliente = new Date(input.value);
    let mensaje = "";
    //acceder al valor de fecha, formato año, mes y dia
    const fechaUsuario = new Date(input.value);
    if (!mayorDeEdad(fechaCliente)) {
        mensaje = "Debes tener al menos 18 años de edad";
    }
    input.setCustomValidity(mensaje);
}

//verificar si es mayor de edad
function mayorDeEdad(fecha) {
    const fechaActual = new Date();
    const diferenciaFechas = new Date(
        fecha.getUTCFullYear() + 18,
        fecha.getUTCMonth(),
        fecha.getUTCDate()
    );
    return diferenciaFechas <= fechaActual;
    
}
<div class="input-container">
              <input
                name="birth"
                id="birth"
                class="input"
                type="date"
                placeholder="Fecha de nacimento"
                required
                data-tipo="nacimento"
1 respuesta

¡Hola Graciela!

Entiendo que estás teniendo problemas con la visualización de los mensajes de error en tu formulario. Según el código que proporcionaste, parece que estás utilizando el evento "blur" en cada campo de entrada para llamar a la función valida que valida los datos ingresados y muestra los mensajes de error correspondientes.

Sin embargo, parece que los mensajes de error no se están mostrando correctamente. Para solucionar este problema, te sugiero que revises las siguientes partes de tu código:

  1. Asegúrate de que los elementos HTML que contienen los mensajes de error tengan la clase CSS correcta. En tu código, estás utilizando la clase .input-message-error para los mensajes de error. Verifica que esta clase esté definida en tu CSS y se aplique correctamente a los elementos correspondientes.

  2. Verifica que los mensajes de error estén siendo asignados correctamente a los elementos HTML. En tu función mostrarMensajeDeError, estás obteniendo los mensajes de error de la variable mensajesDeError utilizando el tipo de input y el tipo de error como índices. Asegúrate de que estos índices coincidan con los valores correctos en tu objeto mensajesDeError.

  3. Comprueba que los elementos HTML que contienen los mensajes de error estén siendo seleccionados correctamente en tu código. En tu función valida, estás utilizando input.parentElement.querySelector(".input-message-error") para seleccionar el elemento que contiene el mensaje de error. Verifica que esta selección esté apuntando al elemento correcto en tu estructura HTML.

Espero que estos consejos te ayuden a solucionar el problema con los mensajes de error en tu formulario. Recuerda revisar cuidadosamente tu código y realizar pruebas para verificar que los mensajes se muestren correctamente. Si tienes alguna otra pregunta, no dudes en preguntar.

¡Espero haber ayudado y buenos estudios!

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