El día de hoy quise hacer un post dirigido a todos aquellos que se inician en el desarrollo web.

Siempre he apreciado mucho las aplicaciones web “artesanales” por asi decirlo, es decir que no utilizan ningún cms previamente fabricado (wordpress, joomla, drupal, etc.) si no que mas bien el desarrollador se toma la molestia de diseñar un sistema para administrar el sitio a su conveniencia.

para todos aquellos que se inician en el desarrollo web, este post podría parecerles interesante ya que mostrare como validar campos en tiempo real con jQuery 🙂

Por que hacemos esto? la respuesta es simple: Por concepto de usabilidad, no conozco a un solo ser humano que deteste llenar formularios una y otra vez porque comete errores y cada que comete uno tiene que volver a comenzar. Y vaya que a veces son bastante tontos.

Asi que sin mas preambulos, manos al codigo!

lo que necesitaremos es:

bien lo primero que haremos sera crear un formulario simple, en un archivo html, php, asp o con lo que sea que querramos lograrlo

<html>

<head>
</head>

<body>

	<form method="POST" action="#">
		nombre de usuario: <input type="text" id="user" name="user" />
		contraseña: <input type="password" id="pass_1" name="pass_1" />
		confirmar contraseña: <input type="password" id="pass_2" name="pass_2" />
		email: <input type="text" id="email" name="email" />
		<input type="submit" value="enviar"/>
	</form>

</body>

</html>

como pueden ver tenemos varios campos, nombre, contraseña (y su confirmación) y email.

cada uno tiene diferentes validaciones, las cuales haremos por medio de jQuery, noten que es sumamente necesario que todos los campos tengan su atributo “id” ademas del atributo “name” pues el “name” es como lo reconoceremos cuando hagamos el POST, y el “id” es como lo reconoceremos en nuestro script de jQuery

bien ahora debemos incluir la libreria jQuery en la seccion head del documento, tras haberla descargado insertamos el siguiente código

<script src="jquery.min.js" type="text/javascript"></script>

Ahora vamos a validar el nombre de usuario, en este ejemplo vamos a suponer las siguientes reglas:

  • el nombre de usuario no puede estar en blanco
  • el nombre de usuario no puede contener apostrofes (‘)
  • el nombre de usuario no puede contener espacios en blanco

y que cada vez que el nombre de usuario no cumpla con alguna de estas reglas, el campo se tornara rojo (o algun tono de rojo), para hacer saber al usuario que hay algo malo con el nombre que eligio. Para ello creamos un tag script, en cualquier parte del documento (de preferencia justo antes de cerrar el tag head) y agregamos el siguiente codigo:

<script type="text/javascript" />
	$(function(){
		$('#user').keyup(function(){
			var _this = $('#user');
			var _user = $('#user').val();
                        _this.attr('style', 'background:white');
			if(_user.indexOf(' ') >= 0){
				_this.attr('style', 'background:#FF4A4A');
			}

			if(_user.indexOf("'") >= 0){
				_this.attr('style', 'background:#FF4A4A');
			}

			if(_user.val() == ''){
				_this.attr('style', 'background:#FF4A4A');
			}
		});
	});
</script>

mas despacio? ok 😀

la primera linea:

$(function(){
});

es la directiva que indica que el script de jQuery que se encuentra dentro de esta funcion se ejecutara justo después de que el documento termine de cargar en su totalidad. Es decir que el script estara listo para validar nuestros campos cuando el documento termine de cargar.

ahora con la funcion:

la primera linea de la funcion es:

$('#user').keyup(function(){
});

aqui capturamos el campo username, por medio de su id “user” y le asignamos una funcion al evento “keyup” o bien tecla levantada, que se dispara cuando liberamos una tecla que previamente hemos presionado, con eso evitamos que se ejecute muchas veces al dejar presionada una tecla.

dentro de esta funcion capturamos dos cosas:

var _this = $('#username');
var _user = $('#username').val();

estas dos lineas representan: _this es el campo en si, y _user es el valor que el campo tiene en determinado momento (cuando la tecla se levanta).

bien 🙂 hemos capturado un evento, ahora es tiempo de hacer valer nuestras condiciones, para validar el campo en tiempo real:

if(_user.indexOf(' ') >= 0){
    _this.attr('style', 'background:#FF4A4A');
}

if(_user.indexOf("'") >= 0){
    _this.attr('style', 'background:#FF4A4A');
}

if(_user.val() == ''){
    _this.attr('style', 'background:#FF4A4A');
}

la primera vuelve rojo el campo cuando detecta un espacio en blanco por medio de la funcion indexOf(), que parse el valor de _user en un momento dado, y si se cumple cambia el atributo style de nuestro campo por medio de _this. volviendo el fondo a un tono de rojo.

de igual manera con el apostrofe, y finalmente verifica que no este vacio.

habiendo explicado esto, tenemos el siguiente codigo para verificar que las contraseñas sean iguales y que el usuario las halla escrito bien

$('#pass_1').keyup(function(){
		var _this = $('#pass_1');
		var pass_1 = $('#pass_1').val();
                _this.attr('style', 'background:white');
		if(pass_1.charAt(0) == ' '){
			_this.attr('style', 'background:#FF4A4A');
		}

		if(_this.val() == ''){
			_this.attr('style', 'background:#FF4A4A');
		}
	});

	$('#pass_2').keyup(function(){
		var pass_1 = $('#pass_1').val();
		var pass_2 = $('#pass_2').val();
		var _this = $('#pass_2');
                _this.attr('style', 'background:white');
		if(pass_1 != pass_2 && pass_2 != ''){
			_this.attr('style', 'background:#FF4A4A');
		}
	});

este codigo se debe agregar debajo de la validacion de usuario en medio del mismo script tag.

y finalmente verificaremos que el email sea valido en cuanto a formato:

$('#email').keyup(function(){
		var _this = $('#email');
		var _email = $('#email').val();

		var re = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
		var valid = re.test(_email);

		if(valid){
			_this.attr('style', 'background:white');
		} else {
			_this.attr('style', 'background:#FF4A4A');
		}
	});

esta vez el codigo es un poco diferente, ya que utilizamos una expresion regular para verificar que el email sea valido, luego la probamos y coloreamos el campo ya sea de rojo o blanco segun esta bien o no.

Este codigo asi mismo debe ponerse junto a las otras funciones en el mismo script tag. Alternativamente y preferiblemente también, podríamos crear un archivo validar.js que contenga todo el código descrito anteriormente y simplemente importarlo en nuestra seccion head. Pero eso queda a discreción del desarrollador.

Si a alguien le place descargar el ejemplo, puede hacerlo pinchando aqui

Como siempre espero que esta información sea de su utilidad, feliz desarrollo.

Posts Relacionados:

3 Formas de definir clases en JavaScript
Ataques de inyección SQL ciegos basados en el tiempo
Manejo de archivos y directorios con node.js

Categorized in:

javascripttecnología

Tagged in:

,