0

Tengo que crear un formulario, que recoja y valide los números introducidos y la letra. Hasta ahí lo llevo bien y me funciona. El problema es que también he de hacer mensajes emergentes verde si es correcto y rojo si es incorrecto. Lo tengo puesto con alert sólo para comprobar que funciona bien la validación y demás. Necesito ayuda para hacer y entender como hacer las ventanas, ya que el color entiendo que ha de ser desde css.

 <script>

         const formulario = document.querySelector("formulario");

     
     function calcularLetra()
    {
    const resul = true;
    const dni = document.getElementById("dni").value;
    const ndocumento = dni.toUpperCase();  //convertirlas en mayúsculas para validar
    const letras = "TRWAGMYFPDXBNJZSQVHLCKE";  //array

si no tiene un formato valido devuelve error

if ((!/^[A-Za-z]{1}[0-9]{7}[A-Za-z0-9]{1}$/.test(ndocumento) && !/^[T]{1}[A-Za-z0-9]{8}$/.test(ndocumento)) && !/^[0-9]{8}[A-Za-z]{1}$/.test(ndocumento)) {
if ((ndocumento.length == 9) && (/^[0-9]{9}$/.test(ndocumento))) {
    const luletra = ndocumento.substring(8,0) % 23;
    const letrad = letras.charAt(luletra);
    const letradni = ndocumento.charAt(8);
    resul = false;

} else if (ndocumento.length == 8) {
    if (/^[0-9]{1}/.test(ndocumento)) {
        const luletra = ndocumento.substring(8,0) % 23;
        const letrad = letras.charAt(luletra);
        const tipo = 'NIF';

    } else if (/^[KLM]{1}/.test(ndocumento)) {
        const letrad = String.fromCharCode(64 + n);
        const tipo = 'NIF';
    } 
    //muestra el error al no introducir la letra
    if (letrad !== '') {
        alert ("letra no introducida");
    } else {
    }
    
    resul = false;

    //muestra el error al no introducir todos los números y la letra
} else if (ndocumento.length < 8) {
    resul = false;
    alert(" número introducido incorrecto");
} else {
    resul = false;
}
}
  //con esto se compueba el dni y su letra

  if (/^[0-9]{8}[A-Zaz]{1}$/.test(ndocumento)) {
        const luletra = ndocumento.substring(8,0) % 23;
        const letrad = letras.charAt(luletra);
        const letradni = ndocumento.charAt(8);

        //si es cierto en verde y con tamaño h1 (con ventanas emergentes no con alert)
        if (letrad == letradni) {
             resul = true;
           alert ("letra y números introducidos correctamente");

        }   
        //si es falso en rojo y con tamaño h3 (ventanas emergentes, no alert)
        else if (letrad != letradni) {
            resul = false;
            alert ("  la letrad  " + letradni + "  es incorrecta  ");
           

        } else {
            resul = false;
        }
     }
    }

Lo he intentado hacer con estas funciones pero no consigo hacer que funcionen, y no entiendo como hacer que funcionen. //MUESTRA MENSAJE ENVIADO

    //con esto se compueba el dni y su letra

     if (/^[0-9]{8}[A-Zaz]{1}$/.test(ndocumento)) {
        var luletra = ndocumento.substring(8,0) % 23;
        var letrad = letras.charAt(luletra);
        var letradni = ndocumento.charAt(8);

        //si es cierto en verde h1
        if (letrad == letradni) {
            resul = true;
            mostrarMensaje("su dni es correcto", "correcto");
            
        }    
        //si es falso en rojo h3
        
         else if (letrad != letradni) {
            resul = false;
            mostrarMensaje("La letra " + letradni + " es incorrecta", "error");              

        } else {
            resul = false;
        }
     }

     function mostrarMensaje(mensaje, tipo = "correcto"){
       const alerta = document.createElement("p");
          alerta.textContent = mensaje;
          alerta.classList.add(tipo);

         document.body.appendChild(alerta);
         setTimeout(() => {
          alerta.remove();
       }, 5000);
}

// Esperar para mostrar error
setTimeout(() => mostrarMensaje("dni erroneo", "error"), 5000);

    }
    
    </script>


     
6
  • Lo único que veo raro ahí es el último setTimeout() que en la respuesta puse solo como ejemplo de uso y para comprobar que funciona. Aparte de eso, solo faltaría saber que evento dispara la validación, si es en el input o un botón.
    – Triby
    el 3 mar. 2021 a las 0:36
  • Ah vale, lo puse pensando que también debia ponerlo, lo valida un boton. Hoy llevo desde las 7 y no doy más de si, pruebo sin eso a ver.
    – Nola
    el 3 mar. 2021 a las 0:39
  • Lo quité y sigue igual, me desaparece
    – Nola
    el 3 mar. 2021 a las 0:42
  • Estoy revisando lo que hace tu función para ver si puedo crearte un ejemplo funcional.
    – Triby
    el 3 mar. 2021 a las 0:44
  • Al parecer, el botón está haciendo que el formulario se procese y recargue la página, por lo que solo necesitas agregar dentro de la función calcularLetra() como primera línea event.preventDefault();
    – Triby
    el 3 mar. 2021 a las 1:04

3 respuestas 3

0

podrías usar los alert de bootstrap que ofrecen mas personalizacion:

<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
  This is an alert box.
</div>

y si está correcto muestras el de color verde y si falla el de color rojo.

1
  • A bootstrap no hemos llegado todavía, tengo que hacerlo con funciones DOM y no consigo hacerlo funcionar.
    – Nola
    el 2 mar. 2021 a las 14:05
0

Si tu intención es hacerlo solamente con javaScript te puede interesar este enlace. esta muy bien documentado y puede verificarlo online

https://webdesign.tutsplus.com/es/tutorials/how-to-build-flexible-modal-dialogs-with-html-css-and-javascript--cms-33500

Sin embargo para este tipo de acciones siempre prefiero recomendar Sweet Alert 2 que provee de alertas bastante agradable y muy personalizables, además de ser responsivas.

https://sweetalert2.github.io/

1
  • Exacto es hacerlo solo con JavaScript, pero un modal no me sirve ya que de esa manera necesitaria varios botones y solo puedo tener uno para que lo haga todo y muestre varias respuestas. El sweetalert2 es interesante y me gustaría saber bien como funciona para otros trabajos, pero solo enseñan un código que si lo aplico por probar a uno de estos alerts no me funcionan.
    – Nola
    el 2 mar. 2021 a las 21:20
0

Una sola función y un poco de CSS es suficiente para lo que necesitas, considerando que solo puede haber un mensaje, ya sea "correcto" o "error".

La función recibirá 2 parámetros:

  • mensaje: Texto a mostrar
  • tipo: "correcto" o "error", si no se envía, por defecto será "correcto"

De hecho, el error en tus funciones es que no estás recibiendo como parámetro el texto a mostrar.

function mostrarMensaje(mensaje, tipo = 'correcto'){
    const alerta = document.createElement('p');
    alerta.textContent = mensaje;
    alerta.classList.add(tipo);
    
    // Agregar a documento, no al formulario
    document.body.appendChild(alerta);
    setTimeout(() => {
         alerta.remove();
    }, 3000);
}
// Mostrar mensaje
mostrarMensaje('Tarea completada con éxito');
// Esperar para mostrar error
setTimeout(() => mostrarMensaje('Error procesando tarea', 'error'), 3500);
p.correcto, p.error {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    display:block;
    width:250px;
    color:#fff;
    margin:0;
    padding:20px;
}

p.correcto {
    background:#080;
}
p.error {
    font-size:1.3em;
    background:#a00;
}

Ejemplos para usar en tu código en vez de alert():

    if(letrad == letradni) {
        resul = true;
        // Correcto, mensaje en verde
        mostrarMensaje("Letra y números introducidos correctamente");

    } else if(letrad != letradni) {
        resul = false;
        // Incorrecto, mensaje en rojo
        mostrarMensaje("La letra " + letradni + " es incorrecta", 'error');
    }

Solo cambia los estilos CSS de acuerdo a los requerimientos o tus preferencias.

6
  • Lo conseguí hacer funcionar con chrome, porque con codepen no funcionaba. El problema es que ahora me desaparece tan rápido que no da tiempo a leerlo. Cómo hago para que quede más tiempo? Me funciona bien con los otros errores de validar si están todos los números y la letra, pero no en la validación de el dni, desparece rápido tanto si es correcto como si no lo es.
    – Nola
    el 2 mar. 2021 a las 22:40
  • @Nola, cambia el tiempo de setTimeout() yo puse 3000 en el ejemplo (3 segundos), si quieres 5 segundos de espera, entonces pon 5000.
    – Triby
    el 2 mar. 2021 a las 23:52
  • eso lo hice está a 5000, es lo primero que pensé, pero me pasa igual. Lo que no entiendo porque en uno si y en los otros no. Cuando me valida lo correcto también desaparece rápido, no se si me explico.
    – Nola
    el 3 mar. 2021 a las 0:10
  • @Nola, si estás mostrando varios mensajes al mismo tiempo, no es que desaparezcan rápido, sino que uno se coloca encima del otro. ¿Necesitas que se muestren dos o más en lugar de solo uno?
    – Triby
    el 3 mar. 2021 a las 0:12
  • en principio solo uno, pero no pasa nada si se muestran los otros, lo que me refiero es que cuando valida el dni no se ve de tan rápido ni correcto ni incorrecto, pero en los otros si va bien y esta puesto de la misma manera
    – Nola
    el 3 mar. 2021 a las 0:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.