Aprendiendo Ext JS 3

Validaciones simples en formularios Más videos

Descripción del tema

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.
Validaciones en Ext JS

Ejemplo del tutorial finalizado

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:
Validaciones en Ext JS

Campos requeridos en el formulario

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 en Ext JS

Restringir número de caracteres en un campo

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.
Validaciones en Ext JS

Sólo caracteres alpha

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.
Validaciones en Ext JS

Validación de un e-mail

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.
Validaciones en Ext JS

Validación de una URL

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.
Validaciones en Ext JS

Desplegar errores de validación ocasionados en el servidor

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!

Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.

¿Olvidaste tu contraseña?

9Comentarios

  • Avatar-10 gusatvo 10/08/2009

    En caso de querer modificar por ejemploo en url me gustaria que salga direcamente "www" sin necesidad de http:// eso lo hago directamente en el css o en algun lado de javascript

    • Avatar-10 Crysfel 10/08/2009

      Tendrías que sobre-escribir el "vtype" de la validación o crear un nuevo "vtype", eso lo veremos en el próximo tutorial, posiblemente mañana ;) saludos

      • Avatar-1 Jurasec 11/08/2009

        Como siempre, una muy buena y clara explicación. Gracias

        • Avatar-5 Jean Hernández 18/11/2009

          Oye, una pregunta, es normal que al asignar validaciones simples a los campos automáticamente los muestre como inválidos?, como puedo hacer para que no lo haga?

          • Avatar-5 Marcos Jara 20/06/2010

            Hola Crysfel.. Excelente material de aprendizajes tienes, bueno mi pregunta ahora va para saber si existe un vtype especifico para campos numericos, tipo float o int, ya que en esta oportunidad mostraste el alpha, que no permite dijitos, seria lo contrario lo que pregunto...

            • Avatar-11 Manuel 10/08/2010

              Hola gracias por el tutorial. Está excelente. Mi pregunta es la misma de Jean Hernandez como hacer para que los campos automáticamente no los muestre como inválidos? Marcos para numeros usa "number", en extjsdebug allí encuentras las reglas de validación.

              • Avatar-3 abelmores 02/10/2010

                Holaa Crysfel... Te saluda Abel de Chimbote - Peru, muchas gracias por los tutoriales.. , te escribo para comentarte que en mi caso estoy usando la vercion "ext-3.2" y en parte del codigo : "{xtype:'combo',fieldLabel:'Year',name:'year',triggerAction:'all',store:[2009,2008,2007,2006],readOnly:true}, " se me mostraba como un "fieldLabel" sin poder escribir ni seleccionar nada.... la solucion para que se muestre como un "ComboBox" fue quitar la ultima propiedad "readOnly:true" quedando asi: "{xtype:'combo',fieldLabel:'Year',name:'year',triggerAction:'all',store:[2009,2008,2007,2006]}, " y ahora si funciona todo bien... me imagino que es por la vercion.. EXITOSSS!!!

                • Avatar-5 Luis 16/05/2011

                  hola y muchas gracias por el tuto, y diganme dos cosas, como valido un combo? y como pongo por defecto el primer valor a mi combo, Gracias lhilariocontreras@gmail.com saludos cordiales

                  • Avatar-5 MARIA STELLA GARCIA ROMERO 23/03/2012

                    hOLA ES QUE ESTOY VIENDO PHP, Y NO SE COMO HACER PARA FILTRAR QUE EN LOS CAMPOS NOMBRES NO ENTRE NUMEROS SI NO LETRAS

                    Instructor del curso

                    Crysfel3

                    Autor: Crysfel Villa

                    Es ingeniero de software con más de 7 años de experiencia en desarrollo web.

                    Descarga Código Fuente Ver Demostración

                    Regístrate a este curso

                    Este tutorial pertenece al curso Aprendiendo Ext JS 3, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.

                    Tendrás acceso a descargar los videos, códigos y material adicional.

                    Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.

                    Llevarás un registro de tu avance.