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

[Duda] Funciòn valida no estas validando la edad

Hola a toda la comunidad buenas tardes, Antes de crear el archivo app.js la funciòn valida trabajaba sin problemas podia validad si una persona era mayor de edad, en el momento de crear el archivo app.js para hacer la validaciòn ya no lo esta haciendo. Agluien que pueda ayudarme por favor. archivo app.js

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);    
    })
});

Archivo validaciones.js

export function valida(input) {
    //required data-tipo="nacimento
    const tipoDeInput = input.dataset.tipo;
    if (validadores[tipoDeInput]) {
        validadores[tipoDeInput](input); // vicnulado con el otro archivo app.js
    }
}
const validadores = {
    // en registro usamos la palabra nacimiento ( required data-tipo="nacimento")
    nacimiento: input => validarNacimiento(input),

};


//se crear función para recibir el input
function validarNacimiento(input) {
   let mensaje = ""
    //acceder al valor de fecha, formato año, mes y dia
    const fechaUsuario = new Date(input.value);
    if (!mayorDeEdad(fechaUsuario)) {
        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;
    
}

Arvhivo registro html.

 <fieldset>
                    <legend class="form__label">Información personal</legend>
                    <div class="input-container">
                        <input name="birth" id="birth" class="input" type="date" placeholder="Fecha de nacimento" required data-tipo="nacimento">
                        <label class="input-label" for="birth">Fecha de nacimiento</label>
                        <span class="input-message-error">Este campo no es valido</span>
                    </div>
            <script src = "./js/app.js" type = "module"></script>							
                    
1 respuesta

¡Hola Graciela! Espero que estés teniendo un buen día.

Revisando tu código, parece que hay un pequeño error en el archivo app.js. En la línea donde agregas el evento "blur" al input, estás pasando input.target como argumento a la función valida(). Sin embargo, input.target no es el elemento input en sí, sino el evento.

Para solucionar esto, simplemente cambia input.target por input en esa línea de código. Así quedaría:

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

const inputs = document.querySelectorAll("input"); // todos los elementos de tipo input
inputs.forEach(input => {
    input.addEventListener("blur", (event) => {
        valida(event.target);    
    });
});

Con este cambio, la función valida() debería recibir el input correctamente y realizar la validación de la edad como esperas.

Espero que esta solución te sea útil. 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! :)