Las validaciones son muy importantes cuando se trata de capturar información por parte del usuario, debemos darle mucha importancia y validar toda la información que recibimos. En este tema veremos como utilizar las validaciones que vienen con Ext JS. Es de suma importancia tener en cuenta que debemos validar la captura de información tanto del lado del cliente como en el servidor, utilizando JavaScript podemos darle una mejor experiencia al usuario para capturar información además de que ahorraremos tiempo, pero también debemos tener en cuenta que el servidor es el responsable de validar todo lo que recibe, por lo tanto también tenemos que hacer validaciones en el servidor y mostrar los errores ocasionados. Esta es una tarea complicada, pero gracias a Ext JS podemos agilizar este proceso utilizando las validaciones que el Framework nos ofrece, en este tutorial solamente validaremos información común y sencilla, próximamente mostraré como podemos realizar validaciones más complejas o propias de nuestro negocio.

Material de apoyo

Vamos a descargar el material de apoyo donde he creado un formulario con algunos campos comunes como son “nombre, fecha, e-mail, Website, comentario”, también incluye un archivo PHP donde aleatoriamente regresa algunos errores de validación para mostrar en los formularios.

Demostración

Para beneficio de todos he creado un demo de lo que tendremos al final del tutorial, puedes probarlo y ver las funcionalidades que contiene.

Campos requeridos

Si en este momento ejecutamos el material de apoyo vemos que aparece un formulario vacío, si damos clic sobre el botón “Save” se realiza una petición al servidor por medio de Ajax, luego nos aparece un mensaje de “éxito” o “error”, normalmente en una aplicación siempre hay campos requeridos, deberíamos validar que se envíe al servidor (por medio de Ajax) algunos campos obligatorios como el “nombre” o algunos otros. Para definir un campo como requerido simplemente utilizamos la propiedad “allowBlank:false” en los campos que deseamos hacer obligatorios, vamos a modificar el formulario de la siguiente manera.

this.form = new Ext.form.FormPanel({
	url: 'simplevalidations.php',
	border:false,
	labelWidth: 80,
	defaults: {
		xtype:'textfield',
		width: 150
	},
	items:[
		{fieldLabel:'Name',name:'name',allowBlank:false}, //required field
		{xtype:'datefield',fieldLabel:'Start',name:'start',allowBlank:false}, //required field
		{xtype:'combo',fieldLabel:'Year',name:'year',triggerAction:'all',store:[2009,2008,2007,2006],readOnly:true},
		{fieldLabel:'Email',name:'email'},
		{fieldLabel:'Web site',name:'website'},
		{xtype:'textarea',fieldLabel:'Comment',name:'comment',allowBlank:false},//required field
		{xtype:'checkbox',fieldLabel:'',labelSeparator:'',boxLabel:'Available',name:'available'}
	]
});

En el código anterior solamente le he agregado la propiedad “allowBlank:false” a los campos que quiero hacer requeridos, ahora si actualizamos el explorador donde tenemos nuestro ejemplo y presionamos el botón “Save” podremos ver que nos manda un mensaje de error y nos dice pone los campos que son requeridos en color rojo:

Máximo de caracteres en un TexField

Normalmente definimos en la base de datos el numero de caracteres de algún campo, por lo tanto es recomendable asegurarnos que solamente el usuario pueda capturar hasta ese número definido, de lo contrario tendremos problemas al guardar la información, para hacer esto solamente necesitamos configurar la propiedad “maxLength” con el número máximo que necesitemos.

this.form = new Ext.form.FormPanel({
	//… código removido para ejemplificar las líneas afectadas
	items:[
		{fieldLabel:'Name',name:'name',allowBlank:false,maxLength:20},
		//… código removido para ejemplificar las líneas afectadas
	]
});

Ahora cuando escribamos más de 20 caracteres en el campo “name” aparecerá un error que nos avisará que algo anda mal.

Validaciones comunes

Ext JS cuenta con una componente que contiene algunas validaciones comunes y que podemos agregarle las que necesitemos, en este tutorial vamos a utilizar las que vienen por defecto. El componente responsable de almacenar estas validaciones es el “Ext.form.VTypes” y cuenta con cuatro validaciones por defecto las cuales veremos a continuación.

Sólo caracteres alpha

Los caracteres alpha son las letras y el guión bajo, no incluye números ni cualquier otro símbolo, vamos asignarle un “vtype” al campo “name” para que acepte solamente este tipo de caracteres.

this.form = new Ext.form.FormPanel({
	//… código removido para ejemplificar las líneas afectadas
	items:[
		{fieldLabel:'Name',name:'name',allowBlank:false,maxLength:20,vtype:'alpha'},
		//… código removido para ejemplificar las líneas afectadas
	]
});

Mediante la propiedad “vtype” podemos configurar la validación que necesitemos, en este caso utilizamos “alpha” la cual esta definida dentro del componente “Ext.form.VTypes”, esto es importante tomarlo en cuenta.

Validar un correo electrónico (e-mail)

Una validación muy común es el e-mail, vamos asignarle el “vtype” correspondiente al campo del nuestro formulario de la siguiente manera:

this.form = new Ext.form.FormPanel({
	//… código removido para ejemplificar las líneas afectadas
	items:[
		//… código removido para ejemplificar las líneas afectadas

		{fieldLabel:'Email',name:'email',vtype:'email'}, // validar un e-mail

//… código removido para ejemplificar las líneas afectadas
	]
});

Gracias a Ext JS no demoramos ni un minuto en agregar esa validación, ahora el formulario se verá semejante a la siguiente pantalla cuando introduzcamos un e-mail inválido.

Validar un URL

Vamos a ver como validar una dirección o “URL” de un sitio Web.

this.form = new Ext.form.FormPanel({
	//… código removido para ejemplificar las líneas afectadas
	items:[
		//… código removido para ejemplificar las líneas afectadas

		{fieldLabel:'Web site',name:'website',vtype:'url'}, //validar una URL

//… código removido para ejemplificar las líneas afectadas
	]
});

Es importante notar que también acepta protocolos “https” y “ftp” para validar correctamente.

Validar en el servidor

Hasta ahora hemos visto como validar en el cliente, pero también es de suma importancia validar en el servidor, vamos a ver como podemos desplegar los errores de validación que se ocasionan en el servidor. Ext JS cuenta con una funcionalidad que nos ahorrará mucho tiempo al desplegar los errores ocasionados en el servidor, marcando el campo exacto donde se ocasionó y desplegando un mensaje del porqué del error, para poder utilizar esta funcionalidad únicamente la respuesta del servidor debe estar en el siguiente formato:

{
	success: false,
	msg: 'Mensaje general de error',
	errors: {
		campo : 'Mensaje del porqué',
		otroCampoConError: 'porque se generó el error?'
       }
}

Teniendo en mente lo anterior vamos a editar el archivo “simplevalidations.php” y generar algunos errores de prueba.

$info = array(
	'success' => false,
	'msg' => 'There was an error saving the record',
	'errors' => array(
		'name' => $name+' is not an employee of this corporation',
		'email' => 'E-mail does not exist in the database',
		'comment' => 'The comment is to short'
	)
);

Estos cambios son suficientes, así que no tenemos que hacer nada más, veamos el resultado. Con esto podemos ver que aunque las validaciones del cliente sean correctas, la información puede ser incorrecta debido a nuestra lógica de negocio, en este ejemplo el nombre de la persona debería existir en nuestro catálogo de empleados (ejemplo hipotético).

Conclusiones

Las validaciones son muy importantes, hoy vimos como utilizar las validaciones por defecto, además aprendimos como desplegar los mensajes de error que se generan en el servidor, con Ext JS todo esto es más sencillo. Recuerda que si tienes dudas puedes hacerlas en el foro donde podremos platicar mejor además de que serás ayudado por la comunidad que se está formando, únete y participa hoy mismo.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Aprendiendo Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!