Autor Tema: JavaScript validación formulario con expresiones regulares no funciona CU01155E (Leído 1606 veces)

juandeto · « **en:** 11 de Abril 2020, 23:56 »

Hola, hice el ejercicio CU01155E del Curso Básico de JavaScript de aprenderaprogramar, y al parecer está todo bien, salvo que cuando se envía el formulario, que no se envían los valores modificados sino los ingresados en principio y no entiendo cuál es el error.

Saludos desde Argentina

EJERCICIO 1155. CONSIGNAS:

Citar

Crea un documento HTML (página web) donde exista un formulario que se envíe por el método GET. Se pedirá al usuario que introduzca nombre, apellidos y correo electrónico. Define dentro de la etiqueta form que cuando se produzca el evento onsubmit (pulsación del botón de envío del formulario) se ejecute una función a la que denominaremos validacionConExpReg que no recibe parámetros.

La función validar debe realizar estas tareas y comprobaciones utilizando expresiones regulares:

a) Comprobar que el nombre contiene al menos tres letras. Si no es así, debe aparecer un mensaje por pantalla indicando que el texto no cumple tener al menos tres letras. Por ejemplo si se trata de enviar Ka como nombre debe aparecer el mensaje: “El nombre no cumple tener al menos tres letras”.

b) Comprobar que el correo electrónico contiene el carácter @ (arroba) y el carácter . (punto). De no ser así, deberá aparecer un mensaje indicando que al correo electrónico le falta uno o ambos caracteres. Por ejemplo si se trata de enviar pacogmail.com deberá aparecer el mensaje: “Falta el símbolo @ en el correo electrónico”.

c) Antes de enviarse los datos del formulario a la página de destino, todas las letras del correo electrónico deben transformarse a minúsculas. Por ejemplo si se ha escrito PACO@GMAIL.COM debe enviarse paco@gmail.com
d) Antes de enviarse los datos del formulario a la página de destino, si el correo electrónico contiene la subcadena “ at “ debe reemplazarse por el símbolo @. Por ejemplo si se ha escrito paco at gmail.com debe enviarse paco@gmail.com

SOLUCIÓN

Código: [Seleccionar]


<!DOCTYPE html>

<html>

<head>
    <title>Ejemplo aprenderaprogramar.com</title>
    <meta charset="utf-8">

    <style type="text/css">
        body {
            font-family: 'Courier New', Courier, monospace;
        }

        .form1 {
            background-color: salmon;
            width: 50%;
            height: auto;
        }

        label {
            display: block;
            font-size: large;
            padding: 10px;
            margin: 10px;
        }

        .enviar {
            margin: 10px;
            padding: 5px;
        }

        .cancelar {
            margin: 10px;
            padding: 5px;
        }
    </style>

    <script type="text/javascript">

        function chequearForm() {
            var textoIngresado = document.getElementsByTagName('input');
            var valorNombre = textoIngresado[0].value;
            var valorEmail = textoIngresado[2].value;
            comprobarNOmbre(valorNombre);
            valorEmail = pasarAMinusculas(valorEmail);
            valorEmail = cambiarAt(valorEmail);
            comprobarMail(valorEmail);
            alert('valor email: ' + valorEmail);
        }

        function comprobarNOmbre(nombre) {
            var nombreMinimo = /\w{3}/;
            var chequeoNombre = nombreMinimo.test(nombre);
            if (chequeoNombre == false) {
                alert('Escribe un nombre con al menos tres letras');
            }
        }

        function pasarAMinusculas(nodoemail) {
            return nodoemail.toLowerCase();
        }

        function cambiarAt(nodoemail) {
            return nodoemail.replace(/\s\at\s/g, '@');
        }

        function comprobarMail(nodoemail) {
            var caracteresMail = /[\w]+\@{1}[\w]+\./;
            var chequeoMail = caracteresMail.test(nodoemail);
            if (chequeoMail == false) { alert('Por favor, chequee si ingreso los caracteres @ o punto'); }
        }


    </script>

</head>

<body>
    <div id="cabecera">
        <h2>Cursos aprenderaprogramar.com</h2>
        <h3>Ejemplos JavaScript</h3>
    </div>


    <form class="form1" action="https://aprenderaprogramar.com/" name="FormularioDeContacto" class="form1" method="get"
        onsubmit="chequearForm()">
        <label for="nombre"><span>Nombre </span><input id="nombre" type="text" name="nombre" value=""></label>
        <label for="apellido"><span>Apellido </span><input id="apellidos" type="text" name="apellidos" value=""></label>
        <label for="email"><span>Correo Electrónico </span><input id="email" type="text" name="email" value=""></label>
        <input type="submit" class="enviar" value="Enviar">
        <input type="reset" class="cancelar" value="Cancelar">
    </form>
</body>

</html>

Ogramar · « **Respuesta #1 en:** 18 de Septiembre 2020, 19:08 »

Buenas, respecto a por qué no se envían los valores modificados, esta podría ser la explicación.

En la función function chequearForm() se define una variable local var valorEmail = textoIngresado[2].value;
Lo que se modifica depués con valorEmail = pasarAMinusculas(valorEmail); es la variable local, no el valor almacenado en el nodo HTML que se va a pasar con el formulario. El valor que se pasa con el formulario sigue siendo el mismo porque no se ha modificado, lo que se ha modificado es una variable local.

Para modificar un nodo primero debemos recuperar su referencia con document.getElement y luego modificar los atributos de esa referencia.

Otra cuestión que podría hacerse en este ejercicio (aunque esto no es obligatorio ya que no se pide) es evitar que se envíe el formulario si los datos no son correctos. Esto puede lograrse haciendo que la función de chequeo devuelva false (el formulario no se enviará) o devuelva true (el formulario sí se enviará).

Puede verse un ejemplo de cómo se hacen ambas cosas en https://aprenderaprogramar.com/foros/index.php?topic=6925.0

Salu2

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: