0

estoy validando un LOGIN y necesito hacer que funcione tanto la validación de entrada, es decír, lo que ingresa el usuario, si es mayor a 20, menor a 3 etc, eso me funciona sin implementar AJAX, pero cuando implemento AJAX que es para verificar si ese usuario existe en la base de datos y la contraseña tammbién, me aparece solamente la respuesta que recibe ajax pero no la validación aparte de jQuery.

Les dejo los ejemplos:

// VALIDAR EL LOGIN - AREAD DE INICIAR SESIÓN...

var btnLogin = $('#send');
 btnLogin.click(function(e){
 	if (email.val().length > 40) {
 		e.preventDefault();
 		textWrn.text("El correo debe ser menor de 40 caractéres");
 		textWrn.show();
 	}
 	else if(email.val().length < 3){
 		e.preventDefault();
 		textWrn.text("El correo debe ser mayor de 3 caractéres");
 		textWrn.show();
 	}
 	else if(pass.val().length > 20){
 		e.preventDefault();
 		textWrn.text("La contraseña debe tener de 3 a 20 caractéres");
 		textWrn.show();
 	}
 })
<!-- 			INICIAR SESIÓN - AREA LOGIN 			-->

<section class="content1" id="content1" align="center">

		<h2><label class="fa fa-sign-in-alt"></label> Inicia Sesión</h2>
		
		<form method="POST">

			<div class="frm-cnt">

				<p class="bg-warning" id="txtValue"> Este texto contiene la validacion del login</p>

				<div class="form-group">
					<div class="input-group">
						<label class="sr-only" for="e-mail">Correo: </label>
						<div class="input-group-addon"><span class="fa fa-user"></span></div>
							<input class="form-control" type="mail" id="email" placeholder="Nombre de usuario" name="usuario">
					</div>
				</div>

				<div class="form-group">
					<div class="input-group">
						<label class="sr-only" for="password">Contraseña: </label>
						<div class="input-group-addon"><span class="fa fa-unlock-alt"></span></div>
							<input class="form-control" type="password" id="password" placeholder="Contraseña" name="passWord">
					</div>
				</div>

			</div>

			<button type="submit" id="send" class="btn btn-primary"><span class="fa fa-sign-in-alt"></span> Entrar</button>

		</form>

	</section>

// AJAX (FUNCIÓN PARA VALIDAR EL LOGIN)
 // LOGIN

$('#send').click(function(e){
	e.preventDefault();
	var data = {usuario : $('#email').val(), passWord : $('#password').val() };
	var request = $.ajax({
		url: 'login.php',
		method:'post',
		data: data,
		dataType: 'html',
	})

	request.done(function(response){
		if(parseInt(response) == 1){
			location.assign("profile.php");
		}else{	
			$('#txtValue').text(response).fadeIn();
		}
	})

	request.fail(function(jqXHR, textstatus){
		$('#txtValue').text("Hubo un problema al enviar los datos" + textstatus);
	})
})

 <?php 

#CODIGO PHP
#LOGIN.PHP

session_start();

$usuario = $_POST['usuario'];
$password = $_POST['passWord'];

$_SESSION['usuario'] = $usuario;

include('conexion.php');

$existData = mysqli_query($conexion, "SELECT Usuarios,Contrasena FROM datausers WHERE Usuarios = '".$usuario."' AND Contrasena = '".$password."'");

if (mysqli_num_rows($existData) == 0) {
    $info = "El nombre de usuario o la contraseña son incorrectos.!";
}
else{
    $info = 1;
}

echo $info;?>
2
  • porque no indicas la validación antes de llamar las funciones de ajax. ya que en ambas usas el evento click.
    – Leonel
    el 7 dic. 2018 a las 17:13
  • No entiendo, me dices que debería implementar la validación del login en la de ajax usando solamente un evento "click" para ambas?
    – Abdiel
    el 7 dic. 2018 a las 17:21

1 respuesta 1

0

Puedes trasladar toda la lógica a una sola función de escucha, dado que siempre la condición será el click de un botón.

Aquí yo uso una variable txtMessage que se irá llenando con eventuales mensajes de error en caso de que no pase alguna de las validaciones. Luego se puede usar esa misma variable para verificar si la misma está llena o vacía. Si está llena, muestras el mensaje que contiene, si está vacía, significa que pasó la validación y puedes entonces proceder a la petición Ajax.

$('#send').click(function(e){
    e.preventDefault();
    var mEmail = $('#email').val();
    var mPass  = $('#password').val();
    var txtMessage = "";
    /*Usamos operadores ternarios para guardar el eventual mensaje de error*/
    txtMessage = ( mEmail.length > 40 ) ? "El correo debe ser menor de 40 caractéres" : "";
    txtMessage = ( mEmail.length < 3 )  ? "El correo debe ser mayor de 3 caractéres" : "";
    txtMessage = ( mPass.length > 20 )  ? "La contraseña debe tener de 3 a 20 caractéres" : "";
    /*Si ocurre alguna de las condiciones de error txtMessage no será false*/
    if(txtMessage){
        textWrn.text(txtMessage);
        textWrn.show();
    }else{  
        var data = {usuario : mEmail, passWord : mPass };
        var request = $.ajax({
            url: 'login.php',
            method:'post',
            data: data,
            dataType: 'html'
        });

        request.done(function(response){
            if(parseInt(response) == 1){
                location.assign("profile.php");
            }else{  
                $('#txtValue').text(response).fadeIn();
            }
        });

        request.fail(function(jqXHR, textstatus){
            $('#txtValue').text("Hubo un problema al enviar los datos" + textstatus);
        });
    }
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.