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