0

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

2 respuestas 2

1

Si quitas este id="formulario" que tienes en el <div>:

<div id="formulario" class="row d-flex justify-content-center align-content-center">

y lo pones en el <form> de este modo:

<form id="formulario" role="form" method="post" class="col-md-6" name="formulario" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">

te funcionará bien. Tal como lo tienes ahora no consigue hacer el submit porque se lo pides a un div y no sabe lo que es eso.

5
  • Muchas gracias de nuevo @masterguru Lo he resuelto de otra forma ahora pondré el código. Lo que he hecho ha sido colocar el preventDefault() dentro de cada if y asignar un return false en caso de errores y que la funcion retorno un true en caso que funcione. Creo que tengoque colocarlo en responder tu propia pregunta, pero gracias por tu aporte, lo probaré tambiém
    – Rastajuan
    Commented el 1 dic. 2022 a las 10:29
  • Recuerda aceptar las respuestas que te han sido válidas para que la comunidad lo sepa, gracias. Por cierto, ¿has probado la actualización de mi otra respuesta a tu otra pregunta?
    – masterguru
    Commented el 1 dic. 2022 a las 10:30
  • Si, he probado lo que me ponías en tu otra respuesta pero no ha funcionado como esperaba. Me había puesto con esta validación porque al ser en equipo corría más prisa. ¿Cómo se valida una respuesta? Es que no veo la opción por ninguna parte
    – Rastajuan
    Commented el 1 dic. 2022 a las 10:34
  • En este enlace explican como aceptar respuestas y el porque es importante hacerlo cuando la respuesta te ha sido útil.
    – masterguru
    Commented el 1 dic. 2022 a las 10:36
  • Respecto a mi otra respuesta, si quieres me dices lo que esperabas en los comentarios de la misma, para ver si es algo que he comprendido mal o ha sido un fallo de concepto tuyo de lo que tenia que suceder.
    – masterguru
    Commented el 1 dic. 2022 a las 10:37
0

Al final lo he solucionado cambiando el preventDefault dentro de cada if, haciendo un return false en cas de error y que la función devuelva true en caso de que todo funcione

Aquí dejo el codigo

//Función que se encarga de validar los datos introducidos por el usuario.
function validacion(e) {
    // e.preventDefault(); Esta linea corta el evento, hace que no lance el submitla f
    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 ";
        e.preventDefault(); //para parar el submit
        return false; //buena practica porque devuelves true al final
    }
    if (this.querySelector("[name=password]").value == "")
    {
        console.log("El campo password está vacío");
        msgError.innerText = "Debes rellenar el campo password";
        e.preventDefault(); //para parar el submit
        return false; //buena practica porque devuelves true al final
    }
    
    return true; //la validacion ha sido correcta
}

Todo el resto de código queda intacto, solo he tenido que modificar esta función

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.