Hola que tal buenas noches o días, que tal a todos, estoy realizando un proyecto con html y php,he realizado una pagina de login con con 2 cajas de texto una para el nombre de usuario y la otra para
la contraseña, he logrado implementar una función en jquery para procesar el formulario mediante ajax
y php, al presionar el botón submit del formulario de login aparece una animación con un div que contiene un spinner (una imagen gif de ajax) y la palabra loading, ademas se ve en blur la pagina, simulando el proceso de
de carga para el login .
Me pregunta es como implementar una validación mediante jQuery en la misma función que ya tengo, para campos vacíos o erróneos del formulario de login, usando php si lo puedo realizar, solo que quiero entrar mas de lleno a jQuery.
Mi objetivo es lograr que al terminar la animación de la caja de "loading", si es que el campo de nombre de
usuario o password están vacíos o son inválidos,con efecto de fade, su borde cambie a color rojo y aparezca un mensaje que pueda se personalizado, de que el campo tiene que ser llenado justo debajo del input o caja de texto, en este caso no se procesa el formulario a php, y si están correctos los campos si se envía, en este caso se imprime un mensaje de que todo ha ido bien.
A continuacion muestro una imagen de lo que llevo realizado hasta el momento
y esto es lo que quiero lograr al terminar la animacion ajax
Este mi codigo html del formulario de login
Código HTML :
<div class="loading-mask"></div> <div class="loading"></div> <div id="result" class="clearfix"></div> <div class="leaving-wrapper"> <div class="leaving-header"> <h1>AUTENTICATION REQUIRED</h1> </div> <div class="leaving-content clearfix"> <div class="leaving-message"> <form id="ajaxform" name="ajaxform" action="../php/process.php"> <h1>You need Login to Acess this Area</h1> <div class="field clearfix"> <label for="username">Username:</label> <input type="text" class="textfield" id="username" name="username" maxlength="32" value=""> </div> <div class="field clearfix"> <label for="password">Password:</label> <input type="password" class="textfield" id="password" name="password" maxlength="32" value=""> </div> <input type="submit" id="btnsubmit" name="btnsubmit" value="login" class="btn btn-green" /> <a href="project" target="_blank" id="link" name="link" alt="Go To Project" class="btn-link">Forgot password!</a> </form> </div> </div> </div>
Este mi codigo jquery
Código Javascript :
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript">
//Begin main function
jQuery(document).ready(function() {
//EN ESTA PARTE ES DONDE QUIERO IMPLEMENTAR LA VALIDACION
//DE JQUERY
//SOLO QUE NO SE COMO ESTRUCTURAR LA FUNCIÓN PARA QUE PRIMERO VALIDE
//Y LUEGO PROCESE LOS DATOS Y LA ANIMACION
//Begin ajax call
$('#ajaxform').submit(function() {
$('.loading').empty();
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serializeArray(),
//EVENTOS DE JQUERY AJAX PARA CARGAR LA ANIMACION PRIMERO Y LUEGO PROCESAR LOS DATOS
beforeSend: function()
{
$('.loading-mask').fadeIn('slow');
$('.loading').fadeIn('slow');
$('.loading').append("<img src='images/ajax-loader.gif' /> loading...");
},
complete: function()
{
$('.loading-mask').fadeOut('slow');
$('.loading').fadeOut('slow');
},
success: function(data)
{
$('#result').fadeIn(1000).html(data)
}
})
return false;
});
//End ajax call
})
//End main Function
Muchas de antemano por su ayuda
