Cargando



Validaciones con Bootstrap Validator

Aquí enseñaremos todo lo que necesitas saber para empezar a usar el plugin de Bootstrap Validator en tus desarrollos, veremos cómo funciona, los validadores presentes y algunos ejemplos útiles de la utilización del mismo.


nov 25 2014 01:38
Profesional
Total de Apartados : 4
dic 09 2016 14:52

Uno de los puntos más importantes en el desarrollo web y que a veces se descuida o no se le presta la atención necesaria es la validación de los formularios y de los campos que los comprenden, estas validaciones van desde que valores pueden aceptar, longitud de los mismos hasta el hecho si son necesarios o no.

 

Estas validaciones del lado del cliente en el pasado eran realizadas mediante Javascript construyendo engorrosas funciones para validar unos pocos campos y obtener resultados que no siempre eran los más óptimos, también se optaba por validar del lado del servidor pero esto no le brindaba al usuario una experiencia amigable ya que primero había que procesar los datos y esperar la respuesta del servidor para verificar que todos nuestros datos estuviesen correctos.

 

Después de un tiempo de haber trabajado con netamente Javascript para realizar todo tipo de operaciones en el lado del cliente, aparecen los framework para facilitar las cosas, entre ellos, uno de los más famosos: jQuery; Con una estructura predefinida y una manera más limpia y óptima de hacer las cosas se consiguió dejar atrás todas las malas prácticas y darle al desarrollador una herramienta mucho más completa para conseguir estas operaciones, entre ellas, las validaciones.

 

Pero a pesar que jQuery facilitaba muchas operaciones del lado del cliente, todavía no se había desarrollado algo que atacara de manera directa el tema de las validaciones, es por ello que se crea el plugin de Bootstrap Validator el cual usa todas las bondades de jQuery y del framework de HTML5 y CSS3, Bootstrap.

 


1. Bootstrap Validator


Bootstrap Validator es un plugin que está basado en jQuery y Bootstrap, el mismo permite validar formularios, así como los elementos dentro de este con una simple inclusión de las librerías del plugin y la utilización de su potente pero sencillo API, esto sin olvidarnos de todas las características que el mismo posee, veamos algunas de estas:
  • Integración con las fuentes y estilos de Bootstrap.
  • Validaciones predefinidas de campos que incluyen: largo del contenido, fechas, tarjetas de crédito, teléfonos, correo electrónico, entre otros.
  • Validaciones personalizadas para campos.
  • Posibilidad de agregar múltiples validaciones por campo.
  • Posibilidad de mostrar un ícono de feedback de acuerdo al resultado de la validación.
  • Posibilidad de utilizar mensajes en el HTML de acuerdo al resultado de la validación.

 

Como pudimos ver estas características lo hacen ser la opción número uno a tener en cuenta para la implementación de validaciones en nuestros proyectos.

 

¿Qué necesitamos para utilizarlo?
Para poder utilizar Bootstrap Validator necesitamos incluir jQuery en su última versión preferiblemente, Bootstrap a partir de su versión 3.x y los archivos .css y .js de la librería. Adicionalmente necesitaremos tener una instalación de un servidor web como Wamp si estamos trabajando en Windows o Lamp en Linux.

 

 


2. Validadores


Antes de entrar de lleno con la parte práctica de este tutorial, es importante conocer algunos de los validadores más importantes que utiliza Bootstrap Validator para el manejo de las validaciones dentro de los formularios, veamos:

 

base64
Valida una cadena de caracteres encodeada en base 64.

 

between
Verifica si el valor de un campo está estrictamente o no entre dos números dados.

 

creditCard
Valida el número de una tarjeta de crédito.

 

date
Valida una fecha de acuerdo a ciertas opciones entre las que destacan el formato, una fecha máxima, mínima e incluso por separador.

 

digits
Retorna true o verdadero si el valor contiene solo números.

 

emailAdress
Como su nombre lo indica valida una dirección de correo electrónico.

 

regexp
Valida si el valor dado hace match o corresponde con una expresión regular de Javascript.

 

Esto solo es una pequeña muestra del repertorio completo de validadores que contamos en Bootstrap Validator, para el listado completo de los validadores podemos ingresar aquí y consultar el que se adapte mejor a nuestras necesidades:

 


3. Formulario de inicio de sesión


Una de los aspectos más importantes en cualquier web actual es el formulario de inicio de sesión, donde nuestros usuarios pueden ingresar con su usuario y contraseña a nuestra página y gozar de ventajas adicionales al realizar el inicio de sesión.

 

Bootstrap Validator nos permite validar estos dos campos con unas simples líneas de código, adicionalmente Bootstrap nos permite darle un toque adicional al permitirnos implementar una ventana modal de manera sencilla, de esta forma construyendo un formulario de login que se verá profesional y agradable a la vista del usuario.

 

Cómo no realizaremos ninguna modificación al código fuente de ninguno de los archivos mencionados, vamos a incluir los mismos desde sus respectivo CDN, primero realizaremos la inclusión de los archivos .css tanto de Boostrap como de Bootstrap Validator:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"></link>

<link href="//oss.maxcdn.com/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css" rel="stylesheet"></link
Ahora incluiremos los archivos .js y para tener una estructura mucho más limpia vamos a separar el código de nuestras validaciones en un archivo llamado validator.js:
<script src="//oss.maxcdn.com/jquery/1.11.1/jquery.min.js"></script>

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<script src="//oss.maxcdn.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>

<script type="text/javascript" src="validator.js"></script>
Luego utilizaremos las bondades de Bootstrap para construir nuestra ventana modal, la cual con solo aplicar las clases necesarias a los elementos que la componen se le aplica la funcionalidad deseada:
<div class="loginbtn" align="center" style="margin:100px;">

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#loginModal">

<span class="glyphicon glyphicon-log-in"></span> Formulario de Login</button>

</div>


<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal-dialog">

	 <div class="modal-content">

		 <div class="modal-header">

			 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

			 <h4 class="modal-title">Inicio de Sesión</h4>

		 </div>


		 <div class="modal-body">

			 <form id="loginForm" method="post" class="form-horizontal" action="none">

				 <div class="form-group">

					 <label class="col-md-3 control-label">Nombre de Usuario</label>

					 <div class="col-md-7">

						 <input type="text" class="form-control" name="usuario" />

					 </div>

				 </div>

				 <div class="form-group">

		 			<label class="col-md-3 control-label">Password</label>

					 <div class="col-md-7">

						 <input type="password" class="form-control" name="password" />

					 </div>

				 </div>

				 <div class="form-group">

					 <div class="col-md-5 col-md-offset-3">

						 <button type="submit" class="btn btn-default">Login</button>

					 </div>

				 </div>

			 </form>

		 </div>

	 </div>

</div>

</div>

Veamos como luce hasta ahora nuestro ejemplo cuando lo ejecutamos en el navegador:

 

validaciones-bootstrap-validator.jpg

 

Ya tenemos nuestra ventana modal funcionando, junto con nuestro formulario, ahora solo nos queda incluir las validaciones con Bootstrap Validator, para ello vamos a inicializar un document.ready en nuestro archivo validator.js y dentro de este llamaremos al método boostrapValidator():

$('#loginForm').bootstrapValidator({

	 message: 'Este valor no es valido',

	 feedbackIcons: {

		 valid: 'glyphicon glyphicon-ok',

		 invalid: 'glyphicon glyphicon-remove',

		 validating: 'glyphicon glyphicon-refresh'

	 },

	 fields: {

		 usuario: {

			 validators: {

				 notEmpty: {

					 message: 'El nombre de usuario es requerido'

				 }

			 }

		 },

		 password: {

			 validators: {

				 notEmpty: {

					 message: 'La contraseña es requerida'

				 }

			 }

		 }

	 }

});

Lo primero que debemos notar en este código es la utilización del selector para inicializar el método, en este caso usamos el ID del formulario que se llama loginForm, esto para ir recorriendo el árbol DOM y llegar a los elementos por debajo de el en la jerarquía. Definimos luego un mensaje general y los íconos de feedback, para de esta forma darle un toque visual a nuestro formulario en el caso de éxito o error en las validaciones.

 

Por último tenemos nuestras validaciones y cómo podemos apreciar a simple vista es algo sumamente legible y de una simplicidad sin igual, indicamos el nombre de los campos de nuestros formularios y en este ejemplo utilizaremos una sola validación que será la del campo requerido, pero como comentamos pueden ser más de una por campo.

 

Veamos en la siguiente imagen como luce nuestro formulario cuando tratamos de enviar la información sin haber completado los campos:

 

validaciones-bootstrap-validator2.jpg

 

Cómo vemos nuestras validaciones funcionan y hasta que no se ingrese información en los campos el formulario no realizará el submit ya que el botón se deshabilita por defecto, veamos en la siguiente imagen como luce nuestro formulario cuando ingresamos los datos necesarios y los íconos de feedback cambian de acuerdo a esto:

 

validaciones-bootstrap-validator3.jpg

 

En unos cuantos minutos pudimos construir un formulario de inicio de sesión con sus respectivas validaciones del lado del cliente todo esto gracias a Bootstrap Validator.

 


4. Formulario de registro


El caso anterior es sencillo y bastante útil pero no es el único presente en los desarrollos, existen los formularios de registro los cuales contienen muchos más campos y las restricciones en cuanto a la información que hay que ingresar, es diferente.

 

Esto en el pasado presentaba un problema ya que dependiendo de la cantidad de campos había que realizar un contador e ir validando campo por campo y cuando este contador llegara a un número determinado significaba que no existían errores, esto sin olvidarnos de las validaciones individuales de cada campo, como formatos de fechas, que aceptará solo números o incluso la longitud del campo.

 

Con Boostrap Validator y sus validadores predefinidos nos ayudan en esta tarea de una manera sencilla y rápida, veamos:

 

Primero incluiremos los archivos .css y .js que utilizamos en el ejemplo anterior, adicionalmente incluiremos unas librerías para poder utilizar el datetimepicker de Boostrap:

<link rel="stylesheet" href="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css

"/>

<script src="//oss.maxcdn.com/momentjs/2.8.2/moment.min.js"></script>

<script src="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/src/js/bootstrap-datetimepicker.js"></script>

Hecho esto construimos nuestro formulario y le damos un nombre apropiado a cada campo:
<form id="registrationForm" method="post" class="form-horizontal mitad" action="#">

			

				<h2>Formulario de Registro</h2>

					<div class="form-group">

						<label class="col-lg-3 control-label">Nombres</label>

						<div class="col-lg-3">

							<input type="text" class="form-control" name="nombre" />

						</div>

					</div>



					 <div class="form-group">

						<label class="col-lg-3 control-label">Apellidos</label>

						<div class="col-lg-3">

							<input type="text" class="form-control" name="apellido" />

						</div>

					</div>



					<div class="form-group">

						<label class="col-lg-3 control-label">Correo Electrónico</label>

						<div class="col-lg-3">

							<input type="text" class="form-control" name="email" />

						</div>

	 			 </div>



					<div class="form-group">

						<label class="col-lg-3 control-label">Password</label>

						<div class="col-lg-3">

							<input type="password" class="form-control" name="password" />

						</div>

					</div>



					<div class="form-group">

		<label class="col-lg-3 control-label">Fecha de Nacimiento</label>

		<div class="col-lg-3">

				<input type="text" class="form-control" name="datetimepicker" id="datetimepicker" data-date-format="YYYY-MM-DD" />

		 </div>

			</div>



					<div class="form-group">

						<label class="col-lg-3 control-label">*****</label>

						<div class="col-lg-9">

							<div class="radio">

								<label>

									<input type="radio" name="*****" value="M" /> Masculino

								</label>

							</div>

							<div class="radio">

								<label>

									<input type="radio" name="*****" value="F" /> Femenino

								</label>

							</div>

						</div>

					</div>



					<div class="form-group">

						<label class="col-lg-3 control-label">Teléfono</label>

						<div class="col-lg-3">

							<input type="text" class="form-control" name="telefono" />

						</div>

					</div>



					<div class="form-group">

			 		 <label class="col-lg-3 control-label">Teléfono Celular</label>

						<div class="col-lg-3">

							<input type="text" class="form-control" name="telefono_cel" />

						</div>

			 	 </div>	



			 <div class="form-group">

						<div class="col-lg-9 col-lg-offset-3">

							<button type="submit" class="btn btn-success left">Registrarse</button>

						</div>

					</div>

				</form>
Veamos como luce este formulario en nuestro navegador:

 

validaciones-bootstrap-validator4.jpg

 

Antes de pasar a las validaciones es importante que pongamos a funcionar nuestro datetimepicker para ello solo necesitamos incluir las siguientes líneas de código en nuestro archivo validator.js y darle el ID que posee nuestro campo en el formulario:

$(function () {

$('#datetimepicker').datetimepicker({

				 pickTime: false

			 });

});

Veamos como luce este complemento:

 

validaciones-bootstrap-validator8.jpg

 

Como pudimos apreciar el formulario tiene campos mixtos, entre ellos de texto, campos de contraseña, datetimepicker e incluso botones radio, pero esto no es ningún problema para Bootstrap Validator, utilizaremos nuestro mismo archivo validator.js para las validaciones solo debemos realizar una nueva instancia del método boostrapValidator con el ID del nuevo formulario y allí incluir las mismas:

$('#registrationForm').bootstrapValidator({

	 feedbackIcons: {

		 valid: 'glyphicon glyphicon-ok',

		 invalid: 'glyphicon glyphicon-remove',

		 validating: 'glyphicon glyphicon-refresh'

	 },

	 fields: {

		 nombre: {

			 validators: {

				 notEmpty: {

					 message: 'El nombre es requerido'

				 }

			 }

		 },

		 apellido: {

			 validators: {

				 notEmpty: {

					 message: 'El apellido es requerido'

				 }

			 }

		 },

		 email: {

			 validators: {

				 notEmpty: {

					 message: 'El correo es requerido y no puede ser vacio'

				 },

				 emailAddress: {

					 message: 'El correo electronico no es valido'

				 }

			 }

		 },

		 password: {

			 validators: {

				 notEmpty: {

					 message: 'El password es requerido y no puede ser vacio'

				 },

				 stringLength: {

					 min: 8,

					 message: 'El password debe contener al menos 8 caracteres'

				 }

			 }

		 },

		 datetimepicker: {

			 validators: {

				 notEmpty: {

					 message: 'La fecha de nacimiento es requerida y no puede ser vacia'

				 },

				 date: {

					 format: 'YYYY-MM-DD',

					 message: 'La fecha de nacimiento no es valida'

				 }

			 }

		 },

		 *****: {

			 validators: {

				 notEmpty: {

					 message: 'El ***** es requerido'

				 }

			 }

		 },

		 telefono: {

			 message: 'El teléfono no es valido',

			 validators: {

				 notEmpty: {

					 message: 'El teléfono es requerido y no puede ser vacio'

				 },

				 regexp: {

					 regexp: /^[0-9]+$/,

					 message: 'El teléfono solo puede contener números'

				 }

			 }

		 },

		 telefono_cel: {

			 message: 'El teléfono no es valido',

			 validators: {

				 regexp: {

					 regexp: /^[0-9]+$/,

					 message: 'El teléfono solo puede contener números'

				 }

			 }

		 },



	 }

});

Podemos apreciar que para las dos primeras validaciones son similares a la del ejemplo anterior pero al encontrarnos con el campo del correo electrónico, vemos que posee la validación del campo requerido y adicionalmente con el validador emailAdress verificamos que sea un correo valido, veamos cómo se comporta esta validación:

 

validaciones-bootstrap-validator5.jpg

 

Con los datepicker no tenemos problemas para el ingreso de fechas, sin embargo si queremos recibir esto de la manera más limpia posible podemos validar el formato como podemos ver en la validación siguiente donde le indicamos que el formato debe ser YYYY-MM-DD para qué sea válido:

 

validaciones-bootstrap-validator6.jpg

 

Incluso podemos validar de cuantos caracteres puede ser la contraseña con stringLength y la opción de min:

 

validator10.jpg

 

Para finalizar y demostrar el poder de este plugin vamos a validar el teléfono, pudimos utilizar el validador de dígitos pero en este caso utilizaremos algo más complejo como una expresión regular y lo mejor de todo es que ya contamos con un validador para eso: el regexp, veamos cómo funciona en nuestro formulario:

 

validaciones-bootstrap-validator7.jpg

 

Ya habiendo probado que todas nuestras validaciones funcionan de manera correcta, vamos a corregir toda la información de nuestro formulario y ver como luce el mismo con la información apropiada:

 

validator9.jpg

 

Con esto finalizamos este tutorial, en el cual aprendimos a utilizar las validaciones de Boostrap Validator, un potente plugin que no necesita instalación ni configuración y que nos permite validar nuestros formularios de manera rápida y sencilla con unas simples líneas de código.


¿Te ayudó este Tutorial?


3 Comentarios

esta exelente el ejemplo pero me cuesta trabajo hacer la validación desde dreamweaver o mas bien no se como hacerlo correctamente, me podrían explicar  en el paso de la validación 


Cristian Rodriguez
oct 11 2016 06:16

Mil gracias, buen tutorial


Antoni José León
dic 17 2016 18:44
Excelente tutor muy bueno :-)
No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X