Muchas veces es necesario hacer validaciones propias de nuestra aplicación y que son necesarias para el correcto funcionamiento de nuestro sistema, en este tema se explica como podemos crear “vtype’s” para validar nuestros formularios de Ext JS. En el tutorial anterior vimos como hacer validaciones comunes, el día de hoy vamos aprender como hacer validaciones personalizadas además veremos como restringir la entrada de caracteres en las cajas de texto. Te invito a probar la demostración de lo que haremos en este tutorial.

Material de apoyo

Antes de seguir es necesario descargar el material de apoyo, el cual consta de dos archivos solamente, un HTML y un JS; he creado un formulario y lo he puesto dentro de una ventana, asi que el ejercicio será agregar validaciones para algunos campos.

Mostrar los mensajes de error

Si en este momento ejecutamos el material de apoyo veremos que tres campos son requeridos, y al presionar el botón “save” nos dice que existen errores (si no ponemos nada en las cajas de texto), pero únicamente se esta poniendo en color rojo el contorno de los campos. El usuario debe recibir suficiente información para saber que esta mal y como solucionarlo, por lo tanto lo que necesitamos hacer es mostrar el mensaje del error ocasionado, para esto solamente necesitamos escribir las siguientes líneas al inicio del método “init”:

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

La primera línea permite que aparezcan los mensajes flotantes cuando posicionamos el Mouse sobre la caja de texto, con la segunda línea de indicamos que aparezca un ícono de error en la parte lateral del campo.

Validar mayoría de edad

En el campo “Date of birth” vamos a validar que dada la fecha de nacimiento calculemos cuantos años hay hasta el día de hoy, luego verificamos que sea mayor de 18 para pasar la validación del campo. En el tema anterior vimos como utilizar los “vtype’s” que vienen incluidos en el framework de Ext JS, hoy vamos agregar algunas validaciones mas a la clase “Ext.form.VTypes”. Lo primero que necesitamos hacer es extender la clase mencionada de la siguiente manera:

Ext.apply(Ext.form.VTypes,{

	//aqui vamos a definer las validaciones necesarias

});

Lo siguiente es definir el “vtype” de la siguiente manera:

Ext.apply(Ext.form.VTypes,{
	adult: function(val, field){
		try{
			var birth = field.getValue();
			var now = new Date();
			// The number of milliseconds in one year
			var ONE_YEAR = 1000 * 60 * 60 * 24 * 365;
		    	// Convert both dates to milliseconds
		    	var date1_ms = birth.getTime()
		    	var date2_ms = now.getTime()
		    	// Calculate the difference in milliseconds
		    	var difference_ms = Math.abs(date1_ms - date2_ms)
		    	// Convert back to years
		    	var years = difference_ms/ONE_YEAR;
			return years >= 18;
		}catch(e){
			return false;
		}
	},
	adultText: 'You are underage!', //mensaje de error
	adultMask: / /  //regexp para filtrar los caracteres permitidos
});

Primero se define el nombre que le daremos al “vtype”, en este caso “adult” luego le asignamos una función que recibe dos parámetros, el contenido del campo y la instancia del campo que se está validando, dentro de esta función pondremos la lógica para validar y debe regresar “true” para cuando el valor capturado sea correcto o “false” para cuando el valor del campo sea incorrecto. Lo siguiente que debemos hacer es definir el texto que se mostrará en caso de que la información capturada sea incorrecta, debemos recordar que existen más validaciones dentro de este objeto (Ext.form.VTypes), por lo tanto para relacionar el mensaje con la función de validación simplemente le agregamos la palabra “Text” al final del nombre la función, en este caso “adultText”. Opcionalmente podemos definir un filtro para capturar solamente los caracteres correctos, para eso necesitamos definir una mascara con la expresión regular adecuada.

adultMask: /[\d\/]/

La expresión regular anterior valida que solamente se puedan capturar dígitos y una diagonal, estos caracteres son los únicos que necesitamos para escribir una fecha en el formato que hemos definido, nótese que la propiedad se llama “adultMask”, solamente le agregamos al final la palabra “Mask” para relacionarla con la validación que creamos anteriormente. Una vez definida el “vtype” necesitamos asignárselo al campo que necesitamos validar, en este caso al campo “birth” del formulario:

{xtype:'datefield',fieldLabel:'Date of birth',name:'birth',allowBlank:false,format:'d/m/Y',vtype:'adult'},

Validar un teléfono

Vamos a validar el formato de un número telefónico, primero necesitamos definir las reglas de validación.

• Tiene que ser de 10 dígitos, ejemplo: 8192847135
• Solamente puede aceptar paréntesis, guiones, espacios y números, ejemplos: (81) 92 847 135, 81 92-847-135, (81) 92-847-135, 81 92 84 71 35, 8192847135
• No debe capturar ningún otro carácter de los definidos anteriormente

Con esas reglas en mente definimos el “vtype” correspondiente:

phone: function(value,field){
	return value.replace(/[ \-\(\)]/g,'').length == 10;
},
phoneText: 'Wrong phone number, please make sure it contains 10 digits',
phoneMask: /[ \d\-\(\)]/

La función definida en la propiedad “phone” solamente remueve los caracteres aceptados (espacios, guiones, paréntesis) dejando solamente los números, luego valida que sean diez dígitos, la mascara solo acepta los caracteres definidos en las reglas. Por último necesitamos asignarle el “vtype” al campo del formulario que necesitamos validar.

{fieldLabel:'Phone number',name:'phone',vtype:'phone'},

Validar una tarjeta de crédito

En este último ejemplo vamos a validar el número de una tarjeta de crédito, primero necesitamos definir las reglas de validación para tener una idea clara de lo que haremos.

• El número debe ser de 16 dígitos, ejemplo: 1234567891234567
• Solo puede aceptar dígitos, espacios y guiones, ejemplo: 1234 5678 9123 4567, 1234-5678-9123-4567
• No debe aceptar ningún otro carácter que de los anteriores mencionados

Si te das cuenta estas reglas son muy semejantes a las del teléfono, así que podemos hacer un copy/paste y modificar el código para que se adapte a estos requerimientos.

creditcard: function(value,field){
	return value.replace(/[ \-]/g,'').length == 16;
},
creditcardText: 'Wrong credit card number',
creditcardMask: /[ \d\-]/

No cambié muchas cosas en esta parte ya que las reglas son muy semejantes, ahora necesitamos agregar el “vtype” al campo “credit”.

{fieldLabel:'Credit card',name:'credit',vtype:'creditcard'},

Conclusiones

El día de hoy aprendimos a crear nuestras propias validaciones del lado del cliente, como puedes ver fue realmente sencillo. Ext JS nos provee una manera muy fácil de lograr validar e inclusive poner una mascara a nuestros campos. Si tienes alguna duda o sugerencia puedes hacerlo en los comentarios, o bien si es algo más complicado te recomiendo ir a los foros donde la comunidad crece diariamente, es muy amable y sobre todo nos ayudamos entre todos, también recuerda seguirnos en Twitter (@quizzpot) para estar al tanto de las noticias del sitio.

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!