Soy estudiante, estamos haciendo un trabajo en grupo y aunque he buscado errores similares en stack no doy con la respuesta.
Estoy validando un formulario con js desde el lado cliente. La web tiene también una validación con php que se ejecuta al ejecutar el post mediante el botón del formulario. Mi problema está en que si valida el formulario no lo envía y si lo envía no lo valida. Si elimino el 'addEvenListener' envía el formulario pero no ejecuta la validación, y al revés, si dejo el 'addEvenListener' lo valida pero no lo envía.
He probado cambiar el evento del script a click y onclick por si el problema fuese un conflicto de acciones con los eventos entre php y js al colocar 'submit' pero tampoco me funciona y, después de muchos días ya, no doy con la solución. En el script tengo colocado el evento 'submit' pero como digo, lo he probado también con 'click' y 'onclik' sin resultado positivo con lo que supongo que el error no proviene de ahí
Este es el script de validación:
document.addEventListener("DOMContentLoaded", function (event) {
document
.getElementById("formulario")
.addEventListener("submit", validacion);
});
//Función que se encarga de validar los datos introducidos por el usuario.
function validacion(e) {
e.preventDefault();
var msgError = document.getElementById("msgError");
msgError.innerText = "";
if (!validarEmail(this.querySelector("[name=correo]").value))
{
console.log("El email no es válido");
msgError.innerText = "Debes escribir un email válido ";
return;
}
if (this.querySelector("[name=password]").value == "")
{
console.log("El campo password está vacío");
msgError.innerText = "Debes rellenar el campo password";
return;
}
this.submit();
}
// Función que se encarga de validar el email introducido por el usuario mediante una expresión regular.
function validarEmail(valor)
{
if (/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/i.test(valor))
{
// alert("La dirección de email " + valor + " es correcta!.");
return true;
}
else
{
// alert("La dirección de email es incorrecta!.");
return false;
}
}
Coloco el código html entero para que se vea correctamente también la parte de php y la estructura del formulario
<?php
namespace Proyecto;
require_once 'Manejadores/ManejadorUsuario.php';
use Proyecto\Manejadores\ManejadorUsuario;
session_start();
if (isset($_POST["iniciarSesion"])) {
$usuario = ManejadorUsuario::obtenerUsuario(strtolower($_POST["correo"]));
$error = "";
ManejadorUsuario::hacerLogin($usuario, $_POST["password"], $error);
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<title>Iniciar sesión</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Inicia sesión con tus datos y accede al contenido.">
<meta name="title" content="Iniciar sesión">
<meta name="keywords" content="iniciar sesión, formulario">
<meta name="robots" content="noindex, nofollow">
<!--Llamada al archivo de CSS-->
<link rel="stylesheet" href="assets/css/style.css" type="text/css">
<!-- Bootstrap Font Icon CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
</head>
<body>
<div id="formulario" class="row d-flex justify-content-center align-content-center">
<form role="form" method="post" class="col-md-6" name="formulario" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
<h1 class="tituloForm">Iniciar sesión</h1>
<div class="col-12 form-floating mb-3">
<input type="text" id="correo" class="form-control" name="correo" placeholder="Email">
<label for="usuario">Email:</label>
</div>
<div class="col-12 form-floating mb-3">
<input type="password" id="password" class="form-control" name="password" placeholder="Contraseña">
<label for="contrasena">Contraseña:</label>
</div>
<div class="col-12 mb-3">
<a href="#">¿Has olvidado la contraseña?</a>
</div>
<div class="col-12 d-flex justify-content-center flex-wrap">
<a id="registrarse" class="btn btn-light me-3" href="formulario_registro.php">Registrarse</a>
<button type="submit" id="iniciarSesion" class="btn btn-secondary" name="iniciarSesion" value="iniciar sesion">Iniciar sesión</button>
</div>
<div id="msgError" style="border:2px solid black; margin-top: 10px; color:red;font-weight:bold;">DIV PARA ERRORES. TRABAJO PARA CLARA</div>
</form>
</div>
<?php
if (isset($error) && !empty($error)) {
?>
<div class="error">
<?php echo $error; ?>
</div>
<?php
}
?>
<!--Llamada al archivo de JavaScript-->
<script src="assets/js/validacionLogin.js"></script>
<!-- <script src="assets/js/validacionLogin2.js"></script> -->
</body>
</html>
mei