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> </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?.