0

Estoy intentado hacer un formulario de registro el cual capturo usando JS para validar que los campos son correctos y después envió el formulario a PHP para que así los datos se introduzcan en la BD. El problema esta en que el botón no encuentra la función JS que he creado bajo este error.

Uncaught ReferenceError: enviarFormulario is not defined onclick http://localhost:81/:1

index.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cine Nómada</title>
    <link rel="stylesheet" href="css/style.css">
    <script type="module" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="js/register.js"></script>
    <script>
        function cargarContenido(opcion, event) 
        {
            event.preventDefault();
            $.ajax({
                url: opcion, // Cambiar la extensión a .html
                method: "GET",
                success: function (data) 
                {
                    $("#content").html(data);
                },
                error: function () 
                {
                    $("#content").html("Error al cargar el contenido.");
                }
            });
        }
    </script>
</head>
<body>
    <header>
        <h1>Cine Nómada</h1>
        <h2>El mejor cine pirata</h2>
    </header>

    <nav>
        <ul>
            <li><a href="" onclick="cargarContenido('html/inicio.html', event)">Inicio</a></li>
            <li><a href="" onclick="cargarContenido('php/catalogo.php', event)">Catálogo</a></li>
            <li><a href="" onclick="cargarContenido('html/faq.html', event)">FAQ</a></li>
        </ul>
        <ul>
            <li><a href="" onclick="cargarContenido('html/login.html', event)">Iniciar Sesion</a></li>
            <li><a href="" onclick="cargarContenido('html/register.html', event)">Registrarse</a></li>
        </ul>
    </nav>

    <div id="content">
        <!-- Aquí se cargará el contenido dinámico -->
    </div>

    <footer>
        <h6>Creado por Xabier Gabiña</h6>
    </footer>
</body>
</html>

register.html

<div class="registro">
    <h2>Formulario de Registro</h2>
    <form id="registro-form" action="../php/register.php" method="post">
        <table>
            <tr>
                <td><label for="nombre">Nombre:</label></td>
                <td><input type="text" id="nombre" name="nombre" required></td>
            </tr>
            <tr>
                <td><label for="apellidos">Apellidos:</label></td>
                <td><input type="text" id="apellidos" name="apellidos"></td>
            </tr>
            <tr>
                <td><label for="passwd">Contraseña:</label></td>
                <td><input type="password" id="passwd" name="passwd" required></td>
            </tr>
            <tr>
                <td><label for="dni">DNI:</label></td>
                <td><input type="text" id="dni" name="dni" required></td>
            </tr>
            <tr>
                <td><label for="fecha_nacimiento">Fecha de Nacimiento:</label></td>
                <td><input type="date" id="fecha_nacimiento" name="fecha_nacimiento" required></td>
            </tr>
            <tr>
                <td><label for="email">Correo Electrónico:</label></td>
                <td><input type="email" id="email" name="email" required></td>
            </tr>
            <tr>
                <td><label for="telefono">Teléfono:</label></td>
                <td><input type="tel" id="telefono" name="telefono"></td>
            </tr>
        </table>
        <div>
            <br>           
            <button id="btnEnviar" type="button" onclick="enviarFormulario()">Enviar</button>
        </div>
    </form>
</div>

register.js

import * as validaciones from './validar.js';

function enviarFormulario() {
    var passwd = document.getElementById("passwd").value;
    var dni = document.getElementById("dni").value;
    var email = document.getElementById("email").value;
    var telefono = document.getElementById("telefono").value;

    // Realiza tus validaciones aquí
    var valid = false;

    if (!validaciones.validarContrasena(passwd)) {
        alert("Error en contraseña");
    } else if (!validaciones.validarCorreoElectronico(email)) {
        alert("Error en email");
    } else if (!validaciones.validarDNI(dni)) {
        alert("Error en DNI");
    } else if (!validaciones.validarNumeroTelefono(telefono)) {
        alert("Error en Telefono");
    } else {
        valid = true;
    }

    if (valid) {
        // Recopila los datos del formulario
        var formData = new FormData(document.getElementById("registro-form"));

        $.ajax({
            url: "../php/register.php",
            method: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
                // Maneja la respuesta del servidor (puede ser una redirección, mensaje de éxito, etc.)
                console.log(data);
            },
            error: function () {
                alert("Error al enviar el formulario.");
            }
        });
    } else {
        alert('Existen datos incorrectos.');
    }
}


He probado un poco de todo, he movido de sitio el script, le he puesto la tag module, he intentado directamente importar la función al HTML añadiéndole el export pero nada parece funcionar. Tengo dudas de que este problema pueda estar siendo provocado por estar usando AJAX ya que el formulario de registro se carga en un div mediante AJAX y ya me han pasado varias cosas raras usando esto. También decir que no estoy seguro de si el JS funciona correctamente ya que como no soy capaz de alcanzarlo puede que tenga algún error pero eso ya lo solucionare una vez pueda acceder a el. Por si es útil comentar que estoy usando docker con el servidor php:7.2.2-apache

3
  • Y el archivo register.js se carga correctamente?
    – Yussef
    Commented el 16 sept. 2023 a las 9:15
  • @Yussef si, al poner un console.log al inicio del archivo este se muestra por consola.
    – Xabierland
    Commented el 16 sept. 2023 a las 9:21
  • ¿En qué ruta está validar.js?
    – padaleiana
    Commented el 16 sept. 2023 a las 12:45

2 respuestas 2

0

Un poco de teoría básica sobre el uso de JavaScript en el navegador.

Lo primero, cuando aparece un error, los scripts dejan de funcionar, ten siempre la consola del inspector abierta si estas escribiendo y probando JavaScript.

Algunos errores aparecen por el orden en que sitúas los scripts y los elementos que controlas o o generan eventos. Así, si un botón no encuentra una función hay varios casos posibles.

Primero voy a definir una función, esta será a accesible a todos los scripts que se carguen o incluyan con posterioridad en el documento o por los elementos que se encuentran a continuación que la invoquen:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        function showAlert() {
            alert('Hey')
        }
    </script>
</head>
<body>
    <button type="button" id="button-one">Botón 1</button>
    <button type="button" id="button-two" onclick="showAlert()">Botón 2</button>
</body>
</html>

En este ejemplo, el botón 2 funciona porque esta llamando a una funcion previamente definida, el botón 1 no tiene "manejador" y no hace nada. Si lo incluyo en el bloque de la función genero un error:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        function showAlert() {
            alert('Hey')
        }

        const button1 = document.querySelector('button#button-one');
        button1.addEventListener('click', function (ev) // void
        {
            showAlert();
        });
    </script>
</head>
<body>
    <button type="button" id="button-one">Botón 1</button>
    <button type="button" id="button-two" onclick="showAlert()">Botón 2</button>
</body>
</html>

El problema es que la línea const button1 = document.querySelector('button#button-one'); no devuelve un elemento del DOM, ya que el botón aun no existe. Puede prevenirse el error incluyendo el manejador de evento en un condicional:

<script>
    function showAlert() {
        alert('Hey')
    }

    const button1 = document.querySelector('button#button-one');
    if (button1) {
        button1.addEventListener('click', function (ev) // void
        {
            showAlert();
        });
    }
</script>

Esto evita que el resto de los scripts fallen, si bien el botón 1, seguirá sin funcionar.

El bloque que maneja el evento del botón 1, deberá incluirse después del botón 1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        function showAlert() {
            alert('Hey')
        }
    </script>
</head>
<body>
    <button type="button" id="button-one">Botón 1</button>
    <button type="button" id="button-two" onclick="showAlert()">Botón 2</button>

    <script>
        const button1 = document.querySelector('button#button-one');
        if (button1) {
            button1.addEventListener('click', function (ev) // void
            {
                showAlert();
            });
        }
    </script>
</body>
</html>

Ahora ambos botones pueden lanzar la función showAlert.


He incluido los ejemplo en línea. Lo adecuado es incluir el JavaScript en ficheros externos que se importan en el head de la página. Eso plantea dos cuestiones: en que orden cargamos esos ficheros y que pasa cuando tratamos de controlar elementos que aun no están en el documento.

Para resolver el ejemplo usare dos ficheros "functions.js" y "handlers.js". Añadiré a las importaciones el atributo "defer" para que no se bloquee la carga del DOM de la página... es decir se carga lo que se ve y seguidamente los scripts.

El HTML quedará así:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script defer src="./public/js/functions.js"></script>
    <script defer src="./public/js/handlers.js"></script>
</head>
<body>
    <button type="button" id="button-one">Botón 1</button>
    <button type="button" id="button-two" onclick="showAlert()">Botón 2</button>
</body>
</html>

Situo los ficheros js en el directorio "public/js/": su contenido será:

// ./public/js/functions.js

function showAlert() // void
{
    alert('Hey');
}

y

// ./public/js/handlers.js

const button1 = document.querySelector('button#button-one');
if (button1) {
    button1.addEventListener('click', function (ev) // void
    {
        showAlert();
    });
}
9
  • Gracias por responder, he probado ambos métodos que comentar, tanto añadir el script con la función al principio de mi pagina en el head como poner el js debajo del botón intentado capturar el click viendo la id del mismo. Ninguno de los dos métodos funcionan para mi. Por alguna razón que creo que tiene que ver con la carga asíncrona al pulsar el no ocurre nada a pesar de que el script si que carga ya que los consol.log de antes o bien de la función o bien del DOM se ejecutan en consola. Es probable que tenga que ver con el event.preventDefault() pero no tengo claro como solucionarlo.
    – Xabierland
    Commented el 16 sept. 2023 a las 10:29
  • @Xabierland si la funcion se ejecuta, no es un error del orden de carga de la misma, puedes ver si se ejecuta situando en primer lugar un alert (primera sentencia dentro de la función), esto para el flujo de ejecución del navegador, incluido un envío de formulario. Si llamas a preventDefault en el lugar correcto, se anula el evento. También puedes probar stopPropagation en ciertos casos. developer.mozilla.org/es/docs/Web/API/Event/preventDefault developer.mozilla.org/es/docs/Web/API/Event/preventDefault
    – Orici
    Commented el 16 sept. 2023 a las 10:39
  • Yo actualmente tengo un archivo index.html que es mi pagina por defecto en la cual tengo un div en que cargo el contenido que va variando dependiendo de lo que se pulse en el nav. Una de estas opciones es un registro el cual tengo en un html aparte que se carga y necesito que mediante el onclick llame a una función. La cosa esta en que miro el JS y me pone que la funcion enviarFormulario no es utilizada a pesar de que si es utilizada en el metodo onlick (índice):1 Uncaught ReferenceError: enviarFormulario is not defined at HTMLButtonElement.onclick ((índice):1:1)
    – Xabierland
    Commented el 16 sept. 2023 a las 10:49
  • @Xabierland mira el error "Uncaught ReferenceError: enviarFormulario is not defined..." no esta definida quiere decir que no se ha definido previamente a que tratas de usarla, puede que la hayas puesto antes pero el script se detiene antes de llegar a la misma. ¿Porque incluyes type="module" en la carga de jQuery? No lo he visto nunca.
    – Orici
    Commented el 16 sept. 2023 a las 11:04
  • Pues porque me aparecía un error en la consola de Firefox diciéndome que si añadía un elemento JS en la cabeza de mi HTML debía tener el type=module Respecto a que no lo encuentra la verdad es que no entiendo el porque, he probado a poner el script en la cabeza del html, en el register.html delante y detrás del botón, al final del body para que todos los elemento están cargados y no soy capaz de hacer que encuentre la función enviarFormulario Yo entiendo que la forma correcta es poner la funcion en la cabeza para que cualquier elemento encuentre la funcion pero nada...
    – Xabierland
    Commented el 16 sept. 2023 a las 11:10
0

El error parece estar en

import * as validaciones from './validar.js';

No tengo muy clara la razon pero al eliminarlo y simplemente añadir las funciones al html ha funcionado

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.