Validaciones Utilizando Ext-2.x.

Validaciones Utilizando

Ext-2.x.x

Validaciones Utilizando Ext-2.x.x

<Versión 1.0>

1

Validaciones Utilizando Ext-2.x.

2

Validaciones Utilizando Ext-2.x.

Índice

Introducción.......................................................................................................................4Desarrollo..........................................................................................................................5Validación de un formulario con Javascript......................................................................5Tipos de validaciones en el cliente:...................................................................................5Expresiones regulares disponibles.....................................................................................7

Lista de expresiones regulares disponibles ...................................................................9Empleando validaciones con EXT-2.0:.............................................................................9Funciones para componentes...........................................................................................11

Trabajo con Mensajes de error en la validación..........................................................11Eventos en JavaScript......................................................................................................12

3

Introducción

Para garantizar que un proceso se haga de manera ordenado y cumpla de manera

exitosa todos los requerimientos y estándares establecidos, se han definido una serie

de elementos que ayudarán durante todo el proceso a la comprensión, asimilación y

cumplimiento de lo anteriormente mencionado.

Los elementos que a continuación se relacionan se respetarán a todos los niveles, a

no ser con previa consulta con el equipo de arquitectura.

Desarrollo

Validación de un formulario con Javascript

La validación de un formulario es el proceso que permite comprobar la validez de

los datos introducidos en función de unos requerimientos establecidos. De esta

manera si se intenta introducir en un campo un valor que no le corresponde la

validación debe controlar esta contingencia y mostrar un mensaje u otro tipo de

acción similar.

P / ¿Cómo validar un formulario en una página web, en el lado del cliente con

JavaScript?

R / Se comprueban todos sus campos cumplen las precondiciones y reglas

establecidas para su cumplimiento como requerimiento y si son correctos, se

envía el formulario, en otro caso, se retiene el envío.

Tipos de validaciones en el cliente:

1. Valor Entero

Entero +

Entero -

Que se encuentre este en un rango de valores determinado.

2. Valor Real

Real +

Real –

Que se encuentre este en un rango de valores determinado.

3. Que sea de tipo email.

4. Que el campo no esté vacío.

5. Número

“0-9”.

6. Alfabeto

“a-z”

“A-Z”.

7. Alfa-Num

“a-z”

“A-Z”

“0-9”

8. Fecha

Que solo escriba fechas actuales.

Fecha en el formato dd/mm/aaaa.

Fecha desde menor que hasta.

Expresiones regulares disponibles.

Estas expresiones regulares se pueden utilizar siempre que se ajusten a los

requerimientos de validación, y constituyen una herramienta muy útil y eficiente para

validar. Siempre que la validación que se necesita llevar a cavo se pueda implementar

a nivel de expresiones regulares, es una muy buena práctica.

Nota: Preste atención a la siguiente indicación:

1. Las Expresiones regulares cuyo nombre comienza con "solo[algo] " se utilizan

como en el siguiente ejemplo que solo deja escribir valores enteros:

var carneId = new Ext.form.TextField({

fieldLabel:'Carne de identidad',

maskRe: /^-?\d*$/

});

Este tipo de expresiones regulares funcionan como máscara para a medida que el

usuario va escribiendo, se realiza la verificación, si cumple se coloca el carácter, si no

cumple se cancela el evento y no se coloca el carácter. Esto no siempre se puede

lograr a nivel de expresiones regulares pues a veces se hacen un poco más complejas

en el tipo de verificación, y lo que se hace es que se combinan de varias formas.

Para solucionar el tema de la máscara no a nivel de expresiones regulares,

generalmente se controla el evento al presionar una tecla, se realiza la verificación de

alguna forma y se cancela o libera el evento, pero implementando una función propia.

A este tipo de validación se le conoce como función formatear texto, pues a medida

que se escribe se va formateando el texto con la función determinada y que cumpla

con los requerimientos específicos de la validación.

2. Las Expresiones regulares cuyo nombre comienza con "es[algo] " valida que una

cadena cumple el requisito especificado (te señala el error al invocar la validación

pero deja escribir).

var carneId = new Ext.form.TextField({

fieldLabel:'Carne de identidad',

regex: /^-?\d*$/,

regexText : 'este valor no es correcto'

});

Nota - Siempre que existan las dos posibilidades es bueno utilizar ambas.

Lista de expresiones regulares disponibles

soloEntero esEntero => Valida que un elemento sea de tipo entero.

/^-?\d*$/

soloEnteroPositivo esEnteroPositivo => sea de tipo entero solo + (no -).

/^\d*$/

soloAlfa esAlfa => caracteres de la "A-Z" - "a-z"

/^([a-zA-ZáéíóúñüÑ]+ ?[a-zA-ZáéíóúñüÑ]*)+$/

soloAlfaNum esAlfaNum => caracteres de la "A-Z" - "a-z" y "0-9"

/^([a-zA-ZáéíóúñüÑ\d]+ ?[a-zA-ZáéíóúñüÑ\d]*)+$/

esReal => Trabajo con valores de tipo real.

/^-?\d+(\.\d*)?$/

esRealPositivo => real solo + (no -).

/^\d+(\.\d*)?$/

Empleando validaciones con EXT-2.0:

Como habíamos comentado anteriormente el Framework brinda ya un conjunto de

configuraciones que nos van a permitir abstraernos de tener que validar algo

determinado simplemente vamos a configurar el tipo de validación, y este se encarga

de determinas las acciones a partir de las precondiciones.

Hay que tener en cuenta que estas configuraciones son de tipo general, y estarán

presentes en algunos componentes que soportan unas configuraciones u otras, pero

nunca se utilizará alguna que no implemente el componente. Prestar especial atención

al tipo de componente y las validaciones que implementa.

Configuraciones de los componentes

1. Que valide al quitar el Foco del control del formulario.

validateOnBlur : Boolean

2. Especifica el tiempo que va a demorar antes de comenzar a validar una vez que el

usuario comience a teclear.

validationDelay : Number

3. Especificación del evento que dará comienzo a un tipo de validación.

validationEvent : String/Boolean

4. Que valide además utilizando una función definida por el desarrollador, esta

función será llamada una vez que se comience a validar y se pasarán los

parámetros establecidos en la configuración.

validator : Function

5. Especificar un valor válido correcto para un tipo de elemento determinado.

vtype : String

6. Especifica un mensaje para cuando utilice el vtype y no cumpla la especificación.

vtypeText : String

7. Valida que la entrada de un carácter por teclado sea uno de los que se

especifique en la expresión regular.

maskRe : RegExp

8. Tamaño máximo de caracteres de entrada que podrá escribir en el campo a

validar.

maxLength : Number

9. Tamaño mínimo de caracteres de entrada que deberá escribir en el campo a

validar.

minLength : Number

10. Efecto de animación para mostrar el mensaje de error.

msgFx : String.

11. Localización de un nodo donde se mostrará el mensaje de error.

msgTarget : String

Los elementos de partida van a ser uno de los que a continuación se listan:

Valor Descripción

----------- ----------------------------------------------------------------------

qtip Muestra un “quick tip” donde el usuario configure su muestreo.

title Muestra un popup por defecto en el navegador.

under Añade un elemento div. debajo del componente con el error.

side Adiciona un icono a la parte derecha del campo con el texto de error.

[elem id] Usando el innerHTML adiciona el texto al nodo HTML con este id.

12. Hacer que el campo sea de solo lectura.

readOnly : Boolean

13. Expresión reg. de JavaScript para validar que un componente cumpla una

precondición específica para su valor.

regex : RegExp

14. Mensaje que se mostrará cuando falle la validación de [ regex ].

regexText : String

15. Función personalizada que será llamada para validar el valor del campo.

validator : Function

16. Valor con el que inicializará este campo una vez reenderezado.

value : Mixed

Funciones para componentes

1. Marcar un componente como no válido.

markInvalid ( String msg ) : void

2. Validar un componente en el formulario en determinado momento.

validate() : Boolean

Devuelve verdadero si está correctamente validado. Falso en caso contrario.

3. Validar un campo en el formulario para un valor determinado pasado como

parámetro, este se marca como no válido en caso que no cumpla las reglas de

validación.

validateValue( Mixed value ) : Boolean

4. Adicionar un evento a capturar y una función a ejecutar cuando sea disparado.

addListener( String eventName, Function handler) : void

5. Preguntar si un determinado campo está correctamente en estado válido.

isValid() : bolean

Trabajo con Mensajes de error en la validación.

En Ext hay una clase que se encarga de manejar los elementos de mensajería,

permite utilizar un determinado tipo de configuración para diferentes elementos y

mostrarlos bajo ciertos escenarios.

Inicialización del singlenton para configuraciones de mensajería.

Ext.QuickTips.init();

Ejemplo de uso de la configuración de msgTarget para componentes de entrada

de texto.

Ext.form.Field.prototype.msgTarget = 'side';

Eventos en JavaScript

onAbort: éste evento ejecutará lo que le indiquemos, cuando la carga de una

imagen es interrumpida.

onBlur: se produce al perder el foco, por ejemplo, de un campo de texto de un

formulario

onChange: cuando se ha producio un cambio en un campo.

onClick: cuando hacemos click sobre determinado elemento.

ondblclick: cuando hacemos doble click.

onerror: cuando se produce un error cargando un documento o imagen.

onFocus: se ejecutará al posar el foco sobre el elemento o campo.

onKeyDown: cuando se pulsa una tecla.

onKeyPress: al pulsar o mantener pulsada una tecla.

onKeyUp: cuando dejamos de pulsar una tecla.

onLoad: se ejecutarán determinadas acciones o funciones al cargar la página (el

body) o una imagen.

onMouseDown: al mantener un botón del ratón pulsado.

onMouseMove: cuando se mueve el ratón.

onMouseOut: cuando el ratón está fuera de determinado elemento.

onMouseOver: al posicionar el cursor del ratón sobre cierto elemento.

onMouseUp: cuando el botón del ratón es liberado.

onReset: al pulsar sobre el botón de reset de un formulario.

onResize: cuando una ventana o frame es redimensionado.

onSelect: al seleccionar determinado texto.

onSubmit: cuando pulsamos sobre el botón submit de un formulario.

onUnload: cuando abandonamos la página web.