RSS

Login y Registro: Validar con Jquery (cliente)

08 Oct

Sigamos adelante 😀

El siguiente paso en el desarrollo del sistema de login y registro es la VALIDACIÓN. Para esta parte se usará JQUERY.

La validación es muy importante ya que nos aseguramos de que no se está introduciendo información “sin sentido” en la Base de Datos, por ejemplo en un campo de texto que pida el nombre y éste sea Arturo3 o quizá el usuario ponga incorrectamente una dirección de correo electrónico, tenemos que evitarlo siempre; para esto se usará una expresión regular en cada campo.

Otra ventaja es que le ahorra carga de peticiones al servidor, por tal motivo, el servidor “descansa” y está más disponible, en el dado caso que su sistema o sitio web tenga muchas visitas.

Empecemos 😀

Vayamos por pasos:

  1. Agregaremos los mensajes de error e incluiremos los archivos de Jquery necesarios (biblioteca y nuestras funciones), HTML
  2. Daremos estilo a los mensajes con CSS
  3. Haremos las funciones necesarias de JQUERY para validar.

(Aviso que he quitado los comentarios anteriores)

_____________________________________________________________________________________________________

1. En el <head> incluimos el js y nuestras funciones, las líneas comentadas muestran como se debe agregar los mensajes de error, como en el ejemplo de validar con Jquery. (registro.php en la carpeta PHP)

<!DOCTYPE html>
<html>
<head>
	<title>Formulario</title>
	<meta charset="utf-8">
	<!-- Se agrega la biblioteca de jquery y enseguida nuestro js de funciones-->
	<script type="text/javascript" src="./../js/jquery-1.10.2.min.js" ></script>
	<script type="text/javascript" src="./../js/validar.js" ></script>
	<link type="text/css" href="./../css/style.css" rel="stylesheet" />
</head>

<body>
	<div id="registrar">
          	<a href="../index.php"</a>Regresar</a>
    </div>
	<div id="envoltura">
		<div id="contenedor">

			<div id="cabecera">
				<img src="./../css/images/logo.gif" >
			</div>

			<div id="cuerpo">
				<form id="form-login" action="agregar.php" method="post" >

					<p><label for="nombre">Nombre:</label></p>
						<input name="nombre" type="text" id="nombre" class="nombre" placeholder="Pon tu nombre" autofocus=""/ ></p>
						<div id="mensaje1" class="errores"> Ingresa solo caracteres</div>

					<!--=============================================================================================-->
					<!-- En seguida de cada input se agregará un div con el mensaje de error-->
					<p><label for="apellidos">Apellidos:</label></p>
						<input name="apellidos" type="text" id="apellidos" class="apellidos" placeholder="Pon tus apellidos" /></p>
					    <div id="mensaje2" class="errores"> Ingresa solo caracteres</div>
					<!--=============================================================================================-->

					<p><label for="correo">Correo:</label></p>
						<input name="correo" type="text" id="correo" class="correo" placeholder="Pon tu mail" /></p>
						<div id="mensaje3" class="errores"> Mail no valido</div>

					<p><label for="pass">Password:</label></p>
						<input name="pass" type="password" id="pass" class="pass" placeholder="Pon tu contraseña"/ ></p>

					<p><label for="repass">Repetir Password:</label></p>
						<input name="repass" type="password" id="repass" class="repass" placeholder="Repite contraseña" /></p>

					<p id="bot"><input name="submit" type="submit" id="boton" value="Registrar" class="boton"/></p>
				</form>
			</div>

			<div id="pie">Sistema de Login Y Registro</div>
		</div><!-- fin contenedor -->

	</div>

</body>

</html>

___________________________________________________________________________________________________

2. Al final del archivo de CSS, style.css, agregamos lo siguiente (en esta ocasión vi cómo crear una flechita en el cuadro rojo que sale del mensaje de error).

.errores{
	-webkit-boxshadow: 0 0 10px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	border-radius:10px;
	-webkit-border-radius: 10px;
	background: red;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	color: #fff;
	display: none;
	font-size: 12px;
	margin-top: -40px;
	margin-left: 250px;
	padding: 10px;
	position: absolute;
}
.errores:before{ /* Este es un truco para crear una flechita */
    content: '';
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #BC1010;
    border-left: 8px solid transparent;
    left: -16px;
    position: absolute;
    top: 5px;
}

__________________________________________________________________________________________________________

3. Lo más interesante lo vemos a continuación :D, sólo dejaré el código comentado, esperando que sea comprensible 😉 (validar.js en la carpeta correspondiente)

//Creamos dos variables que tendrán las expresiones regulares a ser comprobadas
//Una para el correo y otra para verrficar solo letras
var expr = /^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/;
var expr1 = /^[a-zA-Z]*$/;

$(document).ready(function () {
	$("#boton").click(function (){ //función para el boton de enviar
		//recolectamos en variables, lo que tenga cada input.
		//Para mejor manipulación en los if's
		var nombre = $("#nombre").val();
		var apellidos = $("#apellidos").val();
		var correo = $("#correo").val();
		var passw = $("#pass").val();
		var repass = $("#repass").val();

        //Secuencia de if's para verificar contenido de los inputs

        //Verifica que no este vacío y que sean letras
        if(nombre == "" || !expr1.test(nombre)){
			$("#mensaje1").fadeIn("slow"); //Muestra mensaje de error
            return false;				   // con false sale de la secuencia
        }
        else{
			$("#mensaje1").fadeOut();	//Si el anterior if cumple, se oculta el error

            if(apellidos == "" || !expr1.test(apellidos)){
				$("#mensaje2").fadeIn("slow");
                return false;
            }
            else{
				$("#mensaje2").fadeOut();

                if(correo == "" || !expr.test(correo)){
					$("#mensaje3").fadeIn("slow");
                    return false;
                }
                else{
					$("#mensaje3").fadeOut();

					if(passw != repass){
						$("#mensaje4").fadeIn("slow");
						return false;
					}
				}
			}
		}

    });//fin click

    /*Las siguientes funciones son una mejora al ejemplo anterior que mostré
     * Si el mensaje se mostró, el usuario tenía que volver a oprimir el boton
     * de registrar para que el error se ocultará (si era el caso).
     *
     *Con estas funciones de keyup, el mensaje de error se muestra y
     * se ocultará automáticamente, si el usuario escribe datos admitidos.
     * Sin necesidad de oprimir de nuevo el boton de registrar.
     *
     * La función keyup lee lo último que se ha escrito y comparamos
     * con nuestras condiciones, si cumple se quita el error.
     *
     * Es cuestión de analizar un poco para entenderlas
     * Cualquier duda, comenten
     * */
	$("#nombre, #apellidos").keyup(function(){
		if( $(this).val() != "" && expr1.test($(this).val())){
			$("#mensaje1, #mensaje2").fadeOut();
			return false;
		}
    });

    $("#correo").keyup(function(){
		if( $(this).val() != "" && expr.test($(this).val())){
			$("#mensaje3").fadeOut();
			return false;
		}
    });

    var valido=false;
    $("#repass").keyup(function(e) {
		var pass = $("#pass").val();
		var re_pass=$("#repass").val();

		if(pass != re_pass)
		{
			$("#repass").css({"background":"#F22" }); //El input se pone rojo
			valido=true;
		}
		else if(pass == re_pass)
		{
			$("#repass").css({"background":"#8F8"}); //El input se ponen verde
			$("#mensaje4").fadeOut();
			valido=true;
		}
    });//fin keyup repass

});//fin ready
Validación con Jquery

Validación con Jquery

Esto se pone cada vez más interesante 😀 el siguiente paso es validar con PHP y enviar la infrmación a la base de datos con una clase hecha con la extensión MySQLi (la nueva forma de usar la comunicación con MySQL)

Siguiente entrada:

elefantee

@huguidugui || ringhugos@gmail.com

Anuncios
 
4 comentarios

Publicado por en 8 octubre, 2013 en HTML, CSS, JQUERY, PHP

 

4 Respuestas a “Login y Registro: Validar con Jquery (cliente)

  1. Levis Torrealba

    7 enero, 2015 at 01:18

    Yo no tenia ni idea de como crear la flecha del cuadro rojo. Gracias a ti ya se crearlo. Tu código esta muy bien explicado te felicito por eso.

     
    • huguidugui

      7 enero, 2015 at 19:40

      Muchas gracias Levis, de igual forma te agradezco que leas el blog. Saludos

       
  2. jose miguel

    3 abril, 2015 at 08:55

    gracias por el aporte me ayudo mucho

     
  3. uriel

    13 octubre, 2016 at 18:44

    un excelente aporte me sirvio de mucho

     

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: