Validaciones Utilizando Ext-2.x.

Validaciones Utilizando Ext-2.x.x

Validaciones Utilizando Ext-2.x.x

<Versin 1.0>

Validaciones Utilizando Ext-2.x.

Validaciones Utilizando Ext-2.x.

ndice

Introduccin.......................................................................................................................4 Desarrollo..........................................................................................................................5 Validacin de un formulario con Javascript......................................................................5 Tipos de validaciones en el cliente:...................................................................................5 Expresiones regulares disponibles.....................................................................................7 Lista de expresiones regulares disponibles ...................................................................8 Empleando validaciones con EXT-2.0:.............................................................................8 Funciones para componentes...........................................................................................10 Trabajo con Mensajes de error en la validacin..........................................................10 Eventos en JavaScript......................................................................................................10

Introduccin

Para garantizar que un proceso se haga de manera ordenado y cumpla de manera exitosa todos los requerimientos y estndares establecidos, se han definido una serie de elementos que ayudarn durante todo el proceso a la comprensin, asimilacin y cumplimiento de lo anteriormente mencionado. Los elementos que a continuacin se relacionan se respetarn a todos los niveles, a no ser con previa consulta con el equipo de arquitectura.

Desarrollo

Validacin de un formulario con Javascript

La validacin de un formulario es el proceso que permite comprobar la validez de los datos introducidos en funcin de unos requerimientos establecidos. De esta manera si se intenta introducir en un campo un valor que no le corresponde la validacin debe controlar esta contingencia y mostrar un mensaje u otro tipo de accin similar. P / Cmo validar un formulario en una pgina 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 enva el formulario, en otro caso, se retiene el envo.

Tipos de validaciones en el cliente:

1.

Valor Entero Entero + Entero Que se encuentre este en un rango de valores determinado. Real + Real Que se encuentre este en un rango de valores determinado.

2.

Valor Real

3. 4. 5.

Que sea de tipo email. Que el campo no est vaco. Nmero

6.

0-9.

Alfabeto

7.

a-z A-Z.

Alfa-Num


8.

a-z A-Z 0-9 Que solo escriba fechas actuales. Fecha en el formato dd/mm/aaaa. Fecha desde menor que hasta.

Fecha

Expresiones regulares disponibles.

Estas expresiones regulares se pueden utilizar siempre que se ajusten a los requerimientos de validacin, y constituyen una herramienta muy til y eficiente para validar. Siempre que la validacin que se necesita llevar a cavo se pueda implementar a nivel de expresiones regulares, es una muy buena prctica. Nota: Preste atencin a la siguiente indicacin: 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 mscara para a medida que el usuario va escribiendo, se realiza la verificacin, si cumple se coloca el carcter, si no cumple se cancela el evento y no se coloca el carcter. Esto no siempre se puede lograr a nivel de expresiones regulares pues a veces se hacen un poco ms complejas en el tipo de verificacin, y lo que se hace es que se combinan de varias formas. Para solucionar el tema de la mscara no a nivel de expresiones regulares, generalmente se controla el evento al presionar una tecla, se realiza la verificacin de alguna forma y se cancela o libera el evento, pero implementando una funcin propia. A este tipo de validacin se le conoce como funcin formatear texto, pues a medida que se escribe se va formateando el texto con la funcin determinada y que cumpla con los requerimientos especficos de la validacin. 2. Las Expresiones regulares cuyo nombre comienza con "es[algo] " valida que una cadena cumple el requisito especificado (te seala el error al invocar la validacin 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 habamos 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 validacin, 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 estarn presentes en algunos componentes que soportan unas configuraciones u otras, pero nunca se utilizar alguna que no implemente el componente. Prestar especial atencin 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. Especificacin del evento que dar comienzo a un tipo de validacin. validationEvent : String/Boolean 4. Que valide adems utilizando una funcin definida por el desarrollador, esta funcin ser llamada una vez que se comience a validar y se pasarn los parmetros establecidos en la configuracin. validator : Function 5. Especificar un valor vlido correcto para un tipo de elemento determinado.

vtype : String

6. Especifica un mensaje para cuando utilice el vtype y no cumpla la especificacin.

vtypeText : String 7. Valida que la entrada de un carcter por teclado sea uno de los que se especifique en la expresin regular. maskRe : RegExp 8. Tamao mximo de caracteres de entrada que podr escribir en el campo a validar. maxLength : Number 9. Tamao mnimo de caracteres de entrada que deber escribir en el campo a validar. minLength : Number 10. Efecto de animacin para mostrar el mensaje de error. msgFx : String. 11. Localizacin de un nodo donde se mostrar el mensaje de error. msgTarget : String Los elementos de partida van a ser uno de los que a continuacin se listan: Valor ----------qtip title under side [elem id] Descripcin ---------------------------------------------------------------------Muestra un quick tip donde el usuario configure su muestreo. Muestra un popup por defecto en el navegador. Aade un elemento div. debajo del componente con el error. Adiciona un icono a la parte derecha del campo con el texto de error. Usando el innerHTML adiciona el texto al nodo HTML con este id.

12. Hacer que el campo sea de solo lectura. readOnly : Boolean 13. Expresin reg. de JavaScript para validar que un componente cumpla una precondicin especfica para su valor. regex : RegExp

14. Mensaje que se mostrar cuando falle la validacin de [ regex ].

regexText : String 15. Funcin 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 vlido. 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 parmetro, este se marca como no vlido en caso que no cumpla las reglas de validacin. validateValue( Mixed value ) : Boolean 4. Adicionar un evento a capturar y una funcin a ejecutar cuando sea disparado. addListener( String eventName, Function handler) : void 5. Preguntar si un determinado campo est correctamente en estado vlido. isValid() : bolean

Trabajo con Mensajes de error en la validacin.

En Ext hay una clase que se encarga de manejar los elementos de mensajera, permite utilizar un determinado tipo de configuracin para diferentes elementos y mostrarlos bajo ciertos escenarios. Inicializacin del singlenton para configuraciones de mensajera. Ext.QuickTips.init();

Ejemplo de uso de la configuracin 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 ejecutarn determinadas acciones o funciones al cargar la pgina (el body) o una imagen. onMouseDown: al mantener un botn del ratn pulsado. onMouseMove: cuando se mueve el ratn. onMouseOut: cuando el ratn est fuera de determinado elemento. onMouseOver: al posicionar el cursor del ratn sobre cierto elemento. onMouseUp: cuando el botn del ratn es liberado. onReset: al pulsar sobre el botn de reset de un formulario. onResize: cuando una ventana o frame es redimensionado. onSelect: al seleccionar determinado texto. onSubmit: cuando pulsamos sobre el botn submit de un formulario. onUnload: cuando abandonamos la pgina web.