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
register.js
se carga correctamente?