RSS

HTML, CSS, JQUERY: Validación de Campos

02 Ago

Una de las tareas más comunes en los sistemas, sea web o no, es la validación de campos, ya que a partir de la información que se genere en formularios agregada por los usuarios, ésta será enviada para ser procesada; en este caso al servidor.

Este ejemplo me pareció muy ilustrativo para entender conceptos de HTML, CSS y JQUERY. El código que usé lo obtuve de los tutoriales de http://www.vidamrr.com y lo modifiqué un poco para comodidad.

Cabe mencionar que en la actualidad existen varios plugins de JQuery para validar formularios, pero como siempre digo, se debe aprender las entrañas de un procedimiento para luego ver los beneficios de usar alguna herramienta que lo facilite (aún más). Lo interesante de la validación será generar una expresión regular para aceptar edades entre 18 y 60 años.

Todo el ejemplo estará contenido dentro del mismo archivo index.html, obvio no es buena práctica de programación pero por cuestión de comodidad y, para mí que el CSS se me complica un poco, así lo veo más claro. A partir de ese código puedo ir modificando para entender gradualmente qué hacen los diferentes parámetros para darle estilo al formulario.

Primero el HTML, es un formulario que está compuesto por 4 etiquetas <label>, además 4 etiquetas <input> para la entrada de texto y en cada uno hay una etiqueta <div> con un mensaje de error, el cual será tratado con el JQuery más adelante. Por el momento, el código y la vista en el navegador:

<!DOCTYPE html>
<html lang="es">

<head>
	<meta charset="utf-8"/>
	<title>Validación de Formularios</title>
</head>

	<body>
		<div id="contenedor">
			<form id="miFormulario">

				<label>Nombre:</label><br />
				<input type="text" id="itNombre" class="campo" /> <br/>
				<div id="mensaje1" class="errores"> Dame tu nombre</div>

				<label>E-mail:</label><br />
				<input type="text" id="itMail" class="campo" /> <br/>
				<div id="mensaje2" class="errores"> Dame un mail correcto</div>

				<label>Asunto:</label><br />
				<input type="text" id="itAsunto" class="campo" /> <br/>
				<div id="mensaje3" class="errores"> Agrega un asunto</div>

				<label>Edad:</label><br />
				<input type="text" id="itEdad" class="campo" /> <br/>
				<div id="mensaje4" class="errores"> -Edad entre 18 a 60 <br/> -Sólo números</div>

				<center>
				<input type="submit" id="bEnviar" value="Enviar datos" class="boton" />
				</center>
			</form>
		</div>

	</body>

</html>

Así se ve hasta ahora el ejemplo en cuestión:

HTML

HTML básico

=======================================================================

Ahora bien, es momento de agregar el CSS. En lo personal el diseño no se me da muy bien que digamos pero andando en estos caminos de sitios web, se tiene que aprender también 😀 A destacar: el CSS de .errores tiene una propiedad que se llama display: none, ésta hará que los errores no se muestren (los div con mensaje de error), border: outset 6px #6F7EEB es el recuadro rosa del campo y no olviden “jugar” con los valores para ver el comportamiento ;). Dentro del head del html se inserta el style de la siguiente forma:

<!DOCTYPE html>
<html lang="es">

<head>
	<meta charset="utf-8"/>
	<title>Validación de Formularios</title>
	<script type="text/javascript" src="jquery.min.js"></script>
	<style type="text/css">
		body{
			background: #333;
			padding-top: 40px;
		}
		#contenedor{
			-webkit-border-radius: 10px;
			-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
			-moz-border-radius: 10px;
			-moz-border-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
			-o-border-radius: 10px;
			-o-box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
			background: #fff;
			border-radius: 10px;
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
			font-family: sans-serif;
			font-size: 18px;
			margin: 0 auto;
			padding: 20px;
			width: 190px;
		}

		.campo{
			border: outset 6px #6F7EEB;
			font-size: 12px;
			padding: 5px;
			margin-bottom: 10px;
			width: 150px;
		}

		.boton{
			background: #FF0098;
			border: solid 0;
			color: #fff;
			padding: 10px;
			margin-left: auto;
			margin-right: auto;
		}

		.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);
			background: red;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
			color: #fff;
			display: none;
			font-size: 14px;
			margin-top: -50px;
			margin-left: 180px;
			padding: 10px;
			position: absolute;
		}
	</style>
</head>

	<body>
		<div id="contenedor">
			<form id="miFormulario">

				<label>Nombre:</label><br />
				<input type="text" id="itNombre" class="campo" /> <br/>
				<div id="mensaje1" class="errores"> Dame tu nombre</div>

				<label>E-mail:</label><br />
				<input type="text" id="itMail" class="campo" /> <br/>
				<div id="mensaje2" class="errores"> Dame un mail correcto</div>

				<label>Asunto:</label><br />
				<input type="text" id="itAsunto" class="campo" /> <br/>
				<div id="mensaje3" class="errores"> Agrega un asunto</div>

				<label>Edad:</label><br />
				<input type="text" id="itEdad" class="campo" /> <br/>
				<div id="mensaje4" class="errores"> -Edad entre 18 a 60 <br/> -Sólo números</div>

				<center>
				<input type="submit" id="bEnviar" value="Enviar datos" class="boton" />
				</center>
			</form>
		</div>

	</body>

</html>

Y se verá así:

Agregando CSS

Agregando CSS

=================================================================================

Lo mejor de este ejemplo es sin duda el uso de JQuery :D. Lo que se hará es darle funcionalidad de la siguiente forma: Cada vez que el usuario dé click sobre el botón ‘enviar datos’, se hará una secuencia de if’s anidados que verificarán en orden descendente, y si encuentra un campo sin información o que no coincide con la expresión regular, se mostrará el mensaje de error a un lado del campo. Esto último se debe a las líneas del CSS que tiene dentro .errores que son margin-top: -50px, margin-left: 180px y position: absolute.

Se deben agregar las instrucciones de JQuery dentro del <head>. Dentro de este código comenté sólo los dos primeros if’s; al último if no se le agrega un else porque ya se llego al final de los campos que se deben validar.

<!DOCTYPE html>
<html lang="es">

<head>
	<meta charset="utf-8"/>
	<title>Validación de Formularios</title>
	<script type="text/javascript" src="jquery.min.js"></script>
	<style type="text/css">
		body{
			background: #333;
			padding-top: 40px;
		}
		#contenedor{
			-webkit-border-radius: 10px;
			-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
			-moz-border-radius: 10px;
			-moz-border-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
			-o-border-radius: 10px;
			-o-box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
			background: #fff;
			border-radius: 10px;
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
			font-family: sans-serif;
			font-size: 18px;
			margin: 0 auto;
			padding: 20px;
			width: 190px;
		}

		.campo{
			border: outset 6px #6F7EEB;
			font-size: 12px;
			padding: 5px;
			margin-bottom: 10px;
			width: 150px;
		}

		.boton{
			background: #FF0098;
			border: solid 0;
			color: #fff;
			padding: 10px;
			margin-left: auto;
			margin-right: auto;
		}

		.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);
			background: red;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
			color: #fff;
			display: none;
			font-size: 14px;
			margin-top: -50px;
			margin-left: 180px;
			padding: 10px;
			position: absolute;
		}
	</style>

	<script>
		//Expresión para validar un correo electrónico
		var expr = /^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/;
		//Expresión para validar edad de 18 a 60 años
		var expr2 = /^1[8-9]|[2-5]\d|60$/;
		$(document).ready(function(){
			//función click
			$("#bEnviar").click(function(){
				//Guardar en variables el valor que tengan las cajas de texto
				//Por medio de los id's
				//Y tener mejor manipulación de dichos valores
				var nombre = $("#itNombre").val();
				var correo = $("#itMail").val();
				var asunto = $("#itAsunto").val();
				var edad = $("#itEdad").val();

				// --- Condicionales anidados ----
				//Si nombre está vacío
				//Muestra el mensaje
				//Con false sale de los if's y espera a que sea pulsado de nuevo el botón de enviar
				if(nombre == ""){
					$("#mensaje1").fadeIn("slow");
					return false;
				}
				//en otro caso, el mensaje no se muestra
				else{
					$("#mensaje1").fadeOut();

					//Si correo está vacío y la expresión NO corresponde -test es función de JQuery
					//Muestra el mensaje
					//Con false sale de los if's y espera a que sea pulsado de nuevo el botón de enviar
					if(correo == "" || !expr.test(correo)){
						$("#mensaje2").fadeIn("slow");
						return false;
					}
					else{
						$("#mensaje2").fadeOut();

						if(asunto == ""){
							$("#mensaje3").fadeIn("slow");
							return false;
						}
						else{
							$("#mensaje3").fadeOut();

							if(edad == "" || !expr2.test(edad)){
								$("#mensaje4").fadeIn("slow");
								return false;
							}
						}
					}
				}

			});//click
		});//ready
	</script>

</head>

	<body>
		<div id="contenedor">
			<form id="miFormulario" method="GET">

				<label>Nombre:</label><br />
				<input type="text" id="itNombre" class="campo" /> <br/>
				<div id="mensaje1" class="errores"> Dame tu nombre</div>

				<label>E-mail:</label><br />
				<input type="text" id="itMail" class="campo" /> <br/>
				<div id="mensaje2" class="errores"> Dame un mail correcto</div>

				<label>Asunto:</label><br />
				<input type="text" id="itAsunto" class="campo" /> <br/>
				<div id="mensaje3" class="errores"> Agrega un asunto</div>

				<label>Edad:</label><br />
				<input type="text" id="itEdad" class="campo" /> <br/>
				<div id="mensaje4" class="errores"> -Edad entre 18 a 60 <br/> -Sólo números</div>

				<center>
				<input type="submit" id="bEnviar" value="Enviar datos" class="boton" />
				</center>
			</form>

		</div>

	</body>

</html>

La expresión regular para la edad es la siguiente y explico en partes:

var expr2 = /^1[8-9]|[2-5]\d|60$/;

Para formar una expresión se usan /^expresión-regular$/ como delimitadores.

1[8-9] significa que son válidas las edades de 18 y 19

[2-5]\d Hace válidas las edades desde 20 hasta 59

60 Valida sólo a ese número.

Para juntar a todas éstas se usa la barra  |

Algunas capturas:

nombre nombre2 nombre3

No cabe duda que aprender es toda una hazaña que debe hacerse en pasos pequeños para luego, hacer zancadas grandes 😉 Así lo hice…

Aprende a crear un PDF desde PHP

aaaa

Crear PDF desde PHP

¿Quieres apoyar el blog?

Anuncios
 
17 comentarios

Publicado por en 2 agosto, 2013 en HTML, CSS, JQUERY

 

17 Respuestas a “HTML, CSS, JQUERY: Validación de Campos

  1. Jumartos

    23 septiembre, 2013 at 23:47

    excelente me sirvio de mucho.

     
  2. pablo

    27 septiembre, 2013 at 20:13

    Es un excelente trabajo que se ha diseñado, y que bien que se ha dejado su código para el que le interese lo modifique a su antojo eso he hecho yo, gracias por subir este tipo de programas, y también estoy aprendiendo y seguiré ese ejemplo aunque me cueste mucho. gracias nuevamente por todo.

     
    • huguidugui

      27 septiembre, 2013 at 21:07

      Hola pablo 🙂 De verdad agradezco mucho tus palabras sobre este tuto. Al igual que tú, he investigado por aquí y por allá sobre estos temas de Jquery, HTML-CSS y pues, haciendo pruebas y practicando llegué a aprender mejor, también con código de otros programadores.

      Saludos. 🙂

       
  3. José Gregorio Hernández Sosa

    31 diciembre, 2013 at 07:45

    Muchísimas gracias, me ha sido muy útil

     
    • huguidugui

      2 enero, 2014 at 02:06

      Muchas gracias José por tu comentario, me alegra que te haya servido y pues a seguir con nuevos mini-tutos para este 2014 😀
      Saludos.

       
  4. Eduardo lopez

    11 marzo, 2014 at 15:56

    si hombre!!que buen tuto.. buenisimo michosomas gracias

     
  5. jose armando

    17 marzo, 2014 at 22:48

    muy bueno! que tal si le agregar algo de eventos:

    function soloNumeros(evt)
    {
    evt = (evt) ? evt : event;
    var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode : ((evt.which) ? evt.which : 0));
    var respuesta = true;
    if ( (charCode 57) )
    {
    respuesta = false;
    }
    return respuesta;
    }
    function soloLetras(evt)
    {
    evt = (evt) ? evt : event;
    var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode : ((evt.which) ? evt.which : 0));
    var respuesta = true;
    if ((charCode 32 ) && (charCode 90) && (charCode 122))
    {
    respuesta = false;
    }
    return respuesta;
    }

    Nombre:

    Dame tu nombre
    .
    .
    .
    .
    .
    Edad:

    -Edad entre 18 a 60 -Sólo números

    eso lo encontre por ahi! gracias por compartir, saludos! 😀

     
  6. Adrián

    2 mayo, 2015 at 18:49

    Muy bueno!!! gracias a gente como vos que comparten sus conocimientos hacen de gran interés estos foros y sirven para todos aquellos que todavía no aprendimos a caminar o que recién estamos empezando a hacerlo por este entretenido camino de programación web. Excelente!!! Felicitaciones!!!

     
    • huguidugui

      3 mayo, 2015 at 09:53

      Hey Adrián, muchas gracias por tus palabras y pues seguimos adelante con nuevos tutos con nuevas ideas

       
  7. Pantare DreamMaker

    16 mayo, 2015 at 18:53

    Disculpa amigo tengo un problema super urgente no puedo validar un rango de numeros en un iput text usando jquery ya use el metodo que das y no puedo leer el valor de la variable realmente necesito muuucho de tu ayuda

     
  8. Adriano F. Gutierrez

    18 mayo, 2015 at 08:22

    graciassssss!!!!!!!!!!!!!!!!! me sirvio de mucho

     
  9. jenny garcia

    27 agosto, 2015 at 06:41

    olaa a todos 😀 tengo un problema super grande no puedo validar un formulario y ya use el método que das y también el que me dan en otros tutoriales y el que me da el instructor 😦 , realmente necesito bastante ayuda

     
    • huguidugui

      30 agosto, 2015 at 09:29

      Hola Jenny, si quieres te puedo ayudar, envíame tu código a ringhugos@gmail.com y describe los errores que tienes o los problemas que te generan y con gusto te ayudo.
      Saludos

       
  10. Janner

    20 noviembre, 2015 at 10:56

    Hola, si el formulario en ves de ser enviado con type=”submit” se envia con type=”button” funcionara?

     
    • huguidugui

      6 diciembre, 2015 at 18:29

      Claro, checa información sobre formularios con submit y button.

       

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: