1

Estoy haciendo un programa de CRM, estoy haciendo el login para la pagina web, lo que quiero hacer es validar un archivo php con javaScript.

En el archivo php tiene un formulario una vez rellenado los campos quiero que los valide con JS y que luego lo envíe a un php que tiene una consulta a la base de datos para saber si tengo el usuario, y que luego me redireccione a la pagina correspondiente.

Este es el código de mi formulario

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <?php include("controladores/conexion.php");
    ?>
    <section class="vh-100" style="background-color: #9A616D;">
        <div class="container py-5 h-100">
            <div class="row d-flex justify-content-center align-items-center h-100">
                <div class="col col-xl-10">
                    <div class="card" style="border-radius: 1rem;">
                        <div class="row g-0">
                            <div class="col-md-6 col-lg-5 d-none d-md-block">
                                <img src="assets/img_pagina/LKINFRAESTRUCTURASLogin.jpg" alt="login form" class="img-fluid" style="border-radius: 1rem 0 0 1rem;" />
                            </div>
                            <div class="col-md-6 col-lg-7 d-flex align-items-center">
                                <div class="card-body p-4 p-lg-5 text-black">

                                    <form id="formulario">

                                        <div class="d-flex align-items-center mb-3 pb-1">
                                            <i class="fas fa-cubes fa-2x me-3" style="color: #ff6219;"></i>
                                            <img src="assets/img_pagina/NUEVO LOGOOOOOO.png" alt="" class="img-fluid">
                                        </div>

                                        <h5 class="fw-normal mb-3 pb-3" style="letter-spacing: 1px;">Iniciar sesión en su cuenta</h5>

                                        <div class="form-outline mb-4">
                                            <input type="text" id="usuarios" class="form-control form-control-lg" name="usuario" />
                                            <label class="form-label" for="form2Example17">Usuario</label>
                                        </div>

                                        <div class="form-outline mb-4">
                                            <input type="password" id="contrasena" class="form-control form-control-lg" name="contrasena" />
                                            <label class="form-label" for="form2Example27">Contraseña</label>
                                        </div>

                                        <div class="pt-1 mb-4">
                                            <input type ="submit" class="enviar btn btn-dark btn-lg btn-block"
                                            name="iniciar" value="iniciar">
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script src="Javascript/login.js"></script>
</body>

</html>

Este el código js para validar el formulario

console.log("hola");
var validacionUsu= false;
var validacionCon = false;
const expresiones ={
    usuarios: /^[a-zA-Z0-9_-]{3,16}$/,
    contrasenas: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()\-_=+{};:,<.>])\S{4,}$/,
}

document.addEventListener("DOMContentLoaded", function () {
    document.getElementById("formulario").addEventListener('submit', validarFormulario)
});

function validarFormulario(evento) {
    evento.preventDefault();
    var usuario = document.getElementById('usuarios').value;
    var contrasena = document.getElementById('contrasena').value;
    if (expresiones.usuarios.test(usuario)) {
        console.log("Usuario correcto");
        validacionUsu = true;
    }else{
        console.log("Usuario incorrecto");
    }
    if (expresiones.contrasenas.test(contrasena)) {
        console.log("contrasena correcto");
        validacionCon = true;
    }else{
        console.log("contrasena incorrecto");
    }
    if (validacionCon == true && validacionUsu == true) {
        this.submit("controladores/AcyAg/loginaction.php");
    }else{
        alert("Error datos erroneos");
    }
   
}

Y por ultimo este es mi código para comprobar que el usuario existe y que luego me redirecciona dependiendo del usuario

    <?php
    //cuando el Login envie los datos se trataran en este php;

    if (isset($_REQUEST['iniciar'])) {
        if (!empty($_REQUEST['usuario'] && $_REQUEST['contrasena'])) {
            //en el caso de que no esten vacios se alamcenan en variables
            $usuario = $_REQUEST['usuario'];
            $contrasena=md5($_REQUEST['contrasena']);
            $consulta = "SELECT * FROM trabajador WHERE usuario='$usuario' AND contraseña='$contrasena'";
            $datos = $RMC->query($consulta);
            //si la consulta indica que el usuario existe  sacara sus datos
            if ($datos) {
                $resultado = $datos->fetch_array();
                if ($resultado) {
                    //iniciamos la sesion y almacemnamos la informacion de la sesion
                   session_start();
                   $_SESSION['usuario']=$resultado['usuario'];
                   //dependiendo si el usuario es Administrador entrara a la pagina de administracion
                    if (strcmp($_SESSION['usuario'],'Administrador1')==0|| strcmp($_SESSION['usuario'],'Administrador2')==0)
                    {
                        header("Location:ver_visitas.php");
                    }else{
                        header("Location:Usuarios/ver_visitas.php");
                    }
                }
            }else{
                echo("Error, El usuario no existe");
            }
        }
    }
?>

Por favor de verdad necesito ayuda

5
  • No me quedó claro cuál es el problema? Qué error estas teniendo? Commented el 10 jul. 2023 a las 12:48
  • quiero validar con JavaScript los campos del formulario con una expresión regular y luego llamar a un archivo php que valida si el usuario que le meten por el formulario existe en mi base de datos y dentro del mismo código me redireccione a las paginas correspondientes
    – Sebas
    Commented el 10 jul. 2023 a las 19:36
  • Si, eso lo entiendo, pero en dónde estás teniendo problemas? Qué error estás teniendo? Commented el 10 jul. 2023 a las 19:54
  • Quiero saber como hacerlo ya que he intentado hacer lo mismo con otros programas y nunca lo consigo, a veces no hace lo que le indico,otras veces si envía los datos pero me muestra una pagina en blanco
    – Sebas
    Commented el 10 jul. 2023 a las 19:58
  • Recomiendo que agregues un ejemplo mínimo verificable para que sea más fácil ayudarte Commented el 10 jul. 2023 a las 20:53

1 respuesta 1

0

En el código de la página principal te falta el atributo "Action" en el "Form", debería estar así:

<form id="formulario" method="post" action="controladores/AcyAg/loginaction.php">

Y en tu código JavaScript también hice cambios en la función "validarFormulario":

console.log("hola");
var validacionUsu= false;
var validacionCon = false;
const expresiones ={
    usuarios: /^[a-zA-Z0-9_-]{3,16}$/,
    contrasenas: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()\-_=+{};:,<.>])\S{4,}$/,
}

document.addEventListener("DOMContentLoaded", function () {
    document.getElementById("formulario").addEventListener('submit', validarFormulario)
});

function validarFormulario(evento) {
    evento.preventDefault();
    var usuario = document.getElementById('usuarios').value;
    var contrasena = document.getElementById('contrasena').value;
    if (expresiones.usuarios.test(usuario)) {
        console.log("Usuario correcto");
        validacionUsu = true;
    }else{
        console.log("Usuario incorrecto");
        alert("Usuario incorrecto");
        return false;
    }

    if (expresiones.contrasenas.test(contrasena)) {
        console.log("contrasena correcto");
        validacionCon = true;
    }else{
        console.log("contrasena incorrecto");
        alert("contrasena incorrecto");
        return false;
    }

    if (validacionCon == true && validacionUsu == true) {
        this.submit("controladores/AcyAg/loginaction.php");
    }
   
}      

Con estos cambios a mi me funciona perfecto. Un saludo y espero que te sea útil.

4
  • Tu respuesta podría mejorarse con información de apoyo adicional. Por favor, pulsa en editar para añadir más detalles, como citas o documentación, para que otros puedan confirmar que tu respuesta es correcta. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 10 jul. 2023 a las 15:21
  • gracias por la ayuda pero trate de hacerlo como tu dices antes, pero no me redirecciona a la pagina que quiero, es decir le ponía el usuario administrador y no me redirecciona la pagina, de ahí mi pregunta
    – Sebas
    Commented el 10 jul. 2023 a las 19:38
  • Quita los espacios antes de <?php , quizás si envías espacios el Header no trabaje bien. Recuerda que header() ha de ser llamado antes de mostrar nada por pantalla, etiquetas HTML, espacios en blanco desde un fichero o desde PHP. Y supongo que respetas mayúsculas y minúsculas en los nombres de carpetas. También es importanque que la conexión a la BBDD sea correcta, que no la veo en tu script de llamada a la consulta. Siento no poder ayudarte más. Commented el 10 jul. 2023 a las 22:04
  • Muchas gracias tu respuesta anterior me ayudo, ya pude hacer lo que quería, aunque tuve que realizar algunos cambios
    – Sebas
    Commented el 11 jul. 2023 a las 6:31

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.