Jquery Validate

1

I had my access to the controlled system from PHP , then I reflected and saw that it is not necessary to go to the server so that you can return a message, such as "fill in both fields", for example. So I opted to implement the library of jqueryvalidation, which works well, but once the form I want is validated, and I want to send something again, it does not validate even if the fields are empty, and what is valid is my file PHP know what is the reason ?, here the code.

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>

And here is where I validated in my file 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');
			});

		}
	});
});

Also I have a question, is there a way to change the messages of "stock", that this library provides you, to make them more colorful?

    
asked by antonio291093 26.09.2017 в 03:19
source

1 answer

1

It already worked XD was a matter of putting the validation of the form within the click event.

$(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";
	});
});

I leave it here in case someone serves you.

    
answered by 26.09.2017 / 04:25
source