1

Tenía mi acceso al sistema controlado desde PHP, luego reflexioné y vi que no es necesario ir al servidor para que te regrese un mensaje, como "rellene ambos campos", por ejemplo. Así que opté por implementar la librería de jqueryvalidation, la cual funciona bien, pero una ves que esta validado el formulario que deseo, y vuelvo a querer mandar algo, ya no valida aunque estén los campos vacíos, y lo que valida es mi archivo PHP saben ¿a qué se deberá?, aquí el código.

HTML

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="estilos/estiloLogin.css"/>
	<meta charset="utf-8">
</head>

<body>
<div id="popup">
		<div id="formulario">
			<h1 id="header" align="center">Ingresar</h1>	
			<br>
			<hr>					
			<br>					
			<form action="Controlador/login.php" method="POST" id="formLogin">
				<table>
				<tr>
					<td>Usuario:</td>
					<td><input type="text" name="usuario" id="usuario"></td>
				</tr>
				<tr>
					<td>Password:</td>
					<td><input type="password" name="pass" id="pass"></td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td><input id="botonIngresar" type="submit"></td>
				</tr>
				<tr>
					<td colspan="2" align="right"><a id="linkRegistrarse">¡Registrate!</a></td>
				</tr>
				</table>
			</form>
		</div>
	</div>
	<script src="js/jquery-3.2.1.min.js"></script> <!--Utilizar libreria JQUERY-->
	<script src="js/jquery.validate.min.js"></script><!--Lo utilizamos para validar campos-->
	<script src="js/codigologin.js"></script> <!--TODO lo que utilize JQUERY deberá ser referenciado 										despues de la libreria.-->
</body>
</html>

Y acá es donde valido en mi archivo JS.

$(document).ready(function() {
	$('#formLogin').validate({
		rules: {
			usuario: { required: true},
			pass: { required: true}
		},
		messages: {

			usuario: "Debe ingresar un nombre de usuario.",
			
			pass: "Ingrese una contraseña."

		},
		submitHandler: function(form){
			//REGISTRAR UN NUEVO USUARIO EN NUESTRA BASE DE DATOS MEDIANTE PETICION AJAX
			//EFECTUAR INGRESO AL SISTEMA MEDIANTE PETICION AJAX
			$('#botonIngresar').click(function(event) {
				
			event.preventDefault();
			usuario = $('#usuario').val();
			password = $('#pass').val();
			var rangoUsuario;

			$.ajax({
				url: 'Controlador/login.php',
				type: 'POST',
				dataType: 'JSON',
				data: {usuario, password},
				beforeSend:function(){
					console.log("Se esta procesando tu peticion");
				}
			})
			.done(function(data) {
				console.log("success");
			  	$.each(data, function(index, val) {
				  	if (val.estadoCuenta == 'ok') {
			  			if (val.rango == 'Administrador') {
				  			document.location.href = "admin.php"
			  			}else if(val.rango == 'Viper' || val.rango == 'starter'){
				  			document.location.href = "index.php"
			  			}else if(val == 'No existen usuarios registrados con esos datos'){
					  		alert(val);
			  			}else if(val == 'Por favor rellena ambos campos'){
					  		alert(val);
			  			}
			  		}else{
				  		alert(val);
			  		}
			  	});
			})
			.fail(function() {
				console.log("error");
			})
			.always(function() {
				console.log("complete");
			},'json');
			});

		}
	});
});

Ademas tengo una duda,¿existe una forma de cambiar los mensajes de "stock", que te proporciona esta librería, para hacerlos mas vistosos?.

1 respuesta 1

1

Ya funcionó XD era cuestión de meter la validación del formulario dentro del evento click.

$(document).ready(function() {
	//EFECTUAR INGRESO AL SISTEMA MEDIANTE PETICION AJAX
	$('#botonIngresar').click(function(event) {
		$('#formLogin').validate({
		rules: {
			usuario: { required: true},
			pass: { required: true}
		},
		messages: {

			usuario: "Debe ingresar un nombre de usuario.",
			
			pass: "Ingrese una contraseña."

		},
		submitHandler: function(form){
			event.preventDefault();
			usuario = $('#usuario').val();
			password = $('#pass').val();
			var rangoUsuario;
			$.ajax({
				url: 'Controlador/login.php',
				type: 'POST',
				dataType: 'JSON',
				data: {usuario, password},
				beforeSend:function(){
					console.log("Se esta procesando tu peticion");
				}
			})
			.done(function(data) {
				console.log("success");
			  	$.each(data, function(index, val) {
				  	if (val.estadoCuenta == 'ok') {
			  			if (val.rango == 'Administrador') {
				  			document.location.href = "admin.php"
			  			}else if(val.rango == 'Viper' || val.rango == 'starter'){
				  			document.location.href = "index.php"
			  			}else if(val == 'No existen usuarios registrados con esos datos'){
					  		alert(val);
			  			}else if(val == 'Por favor rellena ambos campos'){
					  		alert(val);
			  			}
			  		}else{
				  		alert(val);
			  		}
			  	});
			})
			.fail(function() {
				console.log("error");
			})
			.always(function() {
				console.log("complete");
			},'json');
		}
		});

	});
		

	//SI HACEMOS CLICK EN LA ETIQUETA A CON ID LINKREGISTRARSE, QUE NOS REDIRIGA A REGISTRARSE.HTML
	$('#linkRegistrarse').click(function(event) {
		document.location.href = "registrarse.html";
	});
});

Lo dejo por acá por si a alguien le sirve.

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.