LIBROSWEB

7.3. Validación
La principal utilidad de JavaScript en el manejo de los formularios es la validación de los datos introducidos por los usuarios. Antes de enviar un formulario al servidor, se recomienda validar mediante JavaScript los datos insertados por el usuario. De esta forma, si el usuario ha cometido algún error al rellenar el formulario, se le puede notificar de forma instantánea, sin necesidad de esperar la respuesta del servidor. Notificar los errores de forma inmediata mediante JavaScript mejora la satisfacción del usuario con la aplicación (lo que técnicamente se conoce como "mejorar la experiencia de usuario") y ayuda a reducir la carga de procesamiento en el servidor. Normalmente, la validación de un formulario consiste en llamar a una función de validación cuando el usuario pulsa sobre el botón de envío del formulario. En esta función, se comprueban si los valores que ha introducido el usuario cumplen las restricciones impuestas por la aplicación. Aunque existen tantas posibles comprobaciones como elementos de formulario diferentes, algunas comprobaciones son muy habituales: que se rellene un campo obligatorio, que se seleccione el valor de una lista desplegable, que la dirección de email indicada sea correcta, que la fecha introducida sea lógica, que se haya introducido un número donde así se requiere, etc. A continuación se muestra el código JavaScript básico necesario para incorporar la validación a un formulario:
< f o r m   a c t i o n = " "   m e t h o d = " "   i d = " "   n a m e = " "   o n s u b m i t = " r e t u r n   v a l i d a c i o n ( ) " >     . . . < / f o r m >

Y el esquema de la función v a l i d a c i o n ( )  es el siguiente:
f u n c t i o n   v a l i d a c i o n ( )   {     i f   ( c o n d i c i o n   q u e   d e b e   c u m p l i r   e l   p r i m e r   c a m p o   d e l   f o r m u l a r i o )   {         / /   S i   n o   s e   c u m p l e   l a   c o n d i c i o n . . .         a l e r t ( ' [ E R R O R ]   E l   c a m p o   d e b e   t e n e r   u n   v a l o r   d e . . . ' ) ;         r e t u r n   f a l s e ;     }     e l s e   i f   ( c o n d i c i o n   q u e   d e b e   c u m p l i r   e l   s e g u n d o   c a m p o   d e l   f o r m u l a r i o )   {

 se devuelve el valor t r u e . La clave de esta técnica consiste en comprobar todos y cada uno de los elementos del formulario. . el formulario permanecerá sin enviarse.        / /   S i   n o   s e   c u m p l e   l a   c o n d i c i o n . ' ) ;         r e t u r n   f a l s e ;     }       / /   S i   e l   s c r i p t   h a   l l e g a d o   a   e s t e   p u n t o . el evento ' o n s u b m i t  varía su comportamiento en función del valor que se devuelve. Por lo tanto. el formulario se envía como lo haría normalmente. Dentro de la función v a l i d a c i o n ( )  se comprueban todas las condiciones impuestas por la aplicación. Así. Si se llega al final de la función. . . se devuelve f a l s e  y por tanto el formulario no se envía. si el evento o n s u b m i t  devuelve el valor t r u e . . el formulario no se envía. ' ) ;         r e t u r n   f a l s e ;     }     .     e l s e   i f   ( c o n d i c i o n   q u e   d e b e   c u m p l i r   e l   ú l t i m o   c a m p o   d e l   f o r m u l a r i o )   {         / /   S i   n o   s e   c u m p l e   l a   c o n d i c i o n . . se devuelve el valor f a l s e . Sin embargo.   p o r   l o   q u e   s e   d e v u e l v e   e l   v a l o r   t r u e     r e t u r n   t r u e ; } El funcionamiento de esta técnica de validación se basa en el comportamiento del evento o n s u b m i t  de JavaScript. . en primer lugar se define el evento o n s u b m i t  del formulario como: o n s u b m i t = " r e t u r n   v a l i d a c i o n ( ) " Como el código JavaScript devuelve el valor resultante de la función v a l i d a c i o n ( ) . Al igual que otros eventos como o n c l i c k  y o n k e y p r e s s . . todas las condiciones se han cumplido correctamente.         a l e r t ( ' [ E R R O R ]   E l   c a m p o   d e b e   t e n e r   u n   v a l o r   d e . En el caso de que la función v a l i d a c i o n ( )  devuelva f a l s e . . En el código del ejemplo anterior simplemente se muestran mensajes mediante la función a l e r t ( ) indicando el error producido. por lo que se devuelve t r u e  y el formulario se envía. si el evento o n s u b m i t  devuelve el valor f a l s e . . . La notificación de los errores cometidos depende del diseño de cada aplicación.         a l e r t ( ' [ E R R O R ]   E l   c a m p o   d e b e   t e n e r   u n   v a l o r   d e . Las aplicaciones web mejor diseñadas muestran cada . En cuando se encuentra un elemento incorrecto. Cuando no se cumple una condición.   t o d a s   l a s   c o n d i c i o n e s     / /   s e   h a n   c u m p l i d o . el formulario solamente se enviará al servidor si esa función devuelve t r u e . Si no se encuentra ningún error.

numérico. Validar un campo de texto obligatorio Se trata de forzar al usuario a introducir un valor en un cuadro de texto o textarea en los que sea obligatorio. se comprueba que el valor introducido sea válido. sólo es necesario copiar literalmente esta condición. l e n g t h   = =   0   | |   / ^ \ s + $ / . 7. La condición JavaScript consiste en: v a l o r   =   d o c u m e n t . g e t E l e m e n t B y I d ( " c a m p o " ) . t e s t ( v a l o r ) )  obliga a que el valor introducido por el usuario no sólo esté formado por espacios en blanco. Por lo tanto. v a l u e ; i f (   v a l o r   = =   n u l l   | |   v a l o r . Si el valor de una variable es n u l l . La condición en JavaScript se puede indicar como: v a l o r   =   d o c u m e n t . v a l u e ; i f (   i s N a N ( v a l o r )   )   {     r e t u r n   f a l s e ; . Esta comprobación se basa en el uso de "expresiones regulares". la variable no contiene ningún valor de tipo objeto. 7. g e t E l e m e n t B y I d ( " c a m p o " ) . la tercera parte de la condición ( / ^ \ s + $ / .1. La segunda parte de la condición obliga a que el texto introducido tenga una longitud superior a cero caracteres. t e s t ( v a l o r )   )   {     r e t u r n   f a l s e ; } Para que se de por completado un campo de texto obligatorio. que no sea un texto vacío.2. La palabra reservada n u l l  es un valor especial que se utiliza para indicar "ningún valor". Validar un campo de texto con valores numéricos Se trata de obligar al usuario a introducir un valor numérico en un cuadro de texto.3.mensaje de error al lado del elemento de formulario correspondiente y también suelen mostrar un mensaje principal indicando que el formulario contiene errores. un recurso habitual en cualquier lenguaje de programación pero que por su gran complejidad no se van a estudiar. array. Una vez definido el esquema de la función v a l i d a c i o n ( ) . se muestran algunas de las validaciones más habituales de los campos de formulario. Por último. poniendo especial cuidado en no modificar ningún carácter de la expresión. cadena de texto o booleano. que el número de caracteres introducido sea mayor que cero y que no se hayan introducido sólo espacios en blanco.3. A continuación. esto es. se debe añadir a esta función el código correspondiente a todas las comprobaciones que se realizan sobre los elementos del formulario.

 se comprueba si el índice de la opción seleccionada es válido y además es distinto de cero. 5 4 " ) ;   / /   t r u e 7.4.3. 3 4 5 ) ;     / /   f a l s e i s N a N ( + 2 3 .} Si el contenido de la variable v a l o r  no es un número válido. Validar que se ha seleccionado una opción de una lista Se trata de obligar al usuario a seleccionar un elemento de una lista desplegable. Por tanto. etc.3. 3 5 4 5 ) ;           / /   f a l s e i s N a N ( 3 2 3 2 3 . signos. ya que JavaScript se encarga de tener en cuenta los decimales. g e t E l e m e n t B y I d ( " o p c i o n e s " ) . A continuación se muestran algunos resultados de la función i s N a N ( ) : i s N a N ( 3 ) ;                     / /   f a l s e i s N a N ( " 3 " ) ;                 / /   f a l s e i s N a N ( 3 . 2 " ) ;         / /   f a l s e i s N a N ( " 2 3 a " ) ;             / /   t r u e i s N a N ( " 2 3 . no se cumple la condición. s e l e c t e d I n d e x ; i f (   i n d i c e   = =   n u l l   | |   i n d i c e   = =   0   )   {     r e t u r n   f a l s e ; }   < s e l e c t   i d = " o p c i o n e s "   n a m e = " o p c i o n e s " >     < o p t i o n   v a l u e = " " > ­   S e l e c c i o n a   u n   v a l o r   ­ < / o p t i o n >     < o p t i o n   v a l u e = " 1 " > P r i m e r   v a l o r < / o p t i o n >     < o p t i o n   v a l u e = " 2 " > S e g u n d o   v a l o r < / o p t i o n >     < o p t i o n   v a l u e = " 3 " > T e r c e r   v a l o r < / o p t i o n > < / s e l e c t > A partir de la propiedad s e l e c t e d I n d e x .3. 7. La ventaja de utilizar la función interna i s N a N ( )  es que simplifica las comprobaciones. El siguiente código JavaScript permite conseguirlo: i n d i c e   =   d o c u m e n t . La condición JavaScript consiste en: . 2 ) ;             / /   f a l s e i s N a N ( " ­ 2 3 . Validar una dirección de email Se trata de obligar al usuario a introducir una dirección de email con un formato válido. lo que se comprueba es que la dirección parezca válida. La primera opción de la lista (­   S e l e c c i o n a   u n   v a l o r – ) no es válida. 4 3 . ya que no se comprueba si se trata de una cuenta de correo electrónico real y operativa. por lo que no se permite el valor 0  para esta propiedad s e l e c t e d I n d e x .

v a l u e ;   v a l o r   =   n e w   D a t e ( a n o .   m e s . 7. v a l u e ; i f (   ! ( / \ w + ( [ ­ + .v a l o r   =   d o c u m e n t .   m e s . Aunque esta regla valida la mayoría de direcciones de correo electrónico utilizadas por los usuarios. Validar una fecha Las fechas suelen ser los campos de formulario más complicados de validar por la multitud de formas diferentes en las que se pueden introducir.3. Es muy importante tener en cuenta que el número de mes se indica de 0  a 1 1 . ya que el mínimo permitido es 1  y el máximo 3 1 . g e t E l e m e n t B y I d ( " c a m p o " ) . ] \ w + ) * \ . La validación consiste en intentar construir una fecha con los datos proporcionados por el usuario. la fecha no se puede construir correctamente y por tanto la validación del formulario no será correcta. a continuación se . El siguiente código asume que de alguna forma se ha obtenido el año. ' ] \ w + ) * @ \ w + ( [ ­ . ya que las direcciones de correo electrónico válidas pueden ser muy diferentes. no soporta todos los diferentes formatos válidos de email. Validar un número de DNI Se trata de comprobar que el número proporcionado por el usuario se corresponde con un número válido de Documento Nacional de Identidad o DNI. Los días del mes siguen una numeración diferente. el mes y el día introducidos por el usuario: v a r   a n o   =   d o c u m e n t .   d i a ) ;   i f (   ! i s N a N ( v a l o r )   )   {     r e t u r n   f a l s e ; } La función D a t e ( a n o . la expresión regular anterior es una simplificación.3. v a l u e ; v a r   d i a   =   d o c u m e n t .6. el mes y el día de la fecha. 7. Por otra parte. g e t E l e m e n t B y I d ( " a n o " ) . g e t E l e m e n t B y I d ( " m e s " ) . t e s t ( v a l o r ) )   )   {     r e t u r n   f a l s e ; } La comprobación se realiza nuevamente mediante las expresiones regulares. como el estándar que define el formato de las direcciones de correo electrónico es muy complejo.   d i a )  es una función interna de JavaScript que permite construir fechas a partir del año. \ w + ( [ ­ .5. g e t E l e m e n t B y I d ( " d i a " ) . ] \ w + ) / . v a l u e ; v a r   m e s   =   d o c u m e n t . Aunque para cada país o región los requisitos del documento de identidad de las personas pueden variar. Si los datos del usuario no son correctos. siendo 0  el mes de Enero y 1 1  el mes de Diciembre.

  ' P ' .   ' M ' . 7. La segunda comprobación aplica el algoritmo de cálculo de la letra del DNI y la compara con la letra proporcionada por el usuario.   ' E ' . El algoritmo de cada documento de identificación es diferente. A continuación se muestran otras expresiones regulares que se pueden utilizar para otros .   ' Y ' . la comprobación sería / ^ \ d { 1 0 } [ A ­ Z ] { 2 } $ /  y así sucesivamente. separando los números con guiones.   ' L ' .   ' Z ' . g e t E l e m e n t B y I d ( " c a m p o " ) .   ' F ' .3. agrupado por pares.   ' S ' .muestra un ejemplo genérico fácilmente adaptable. s u b s t r i n g ( 0 . con prefijo internacional. g e t E l e m e n t B y I d ( " c a m p o " ) . etc. Validar un número de teléfono Los números de teléfono pueden ser indicados de formas muy diferentes: con prefijo nacional. t e s t ( v a l o r ) )   )   {     r e t u r n   f a l s e ; }   i f ( v a l o r . Si en vez de ocho números y una letra.   ' R ' . la condición de JavaScript se basa en el uso de expresiones regulares.   ' A ' .   ' W ' .   ' B ' .   8 ) ) % 2 3 ] )   {     r e t u r n   f a l s e ; } La primera comprobación asegura que el formato del número introducido es el correcto.7. c h a r A t ( 8 )   ! =   l e t r a s [ ( v a l o r . que comprueban si el valor indicado es una sucesión de nueve números consecutivos.   ' X ' . La validación no sólo debe comprobar que el número esté formado por ocho cifras y una letra. sino que también es necesario comprobar que la letra indicada es correcta para el número introducido: v a l o r   =   d o c u m e n t . es decir.   ' H ' .   ' K ' .   ' G ' .   ' V ' . t e s t ( v a l o r ) )   )   {     r e t u r n   f a l s e ; } Una vez más. v a l u e ; i f (   ! ( / ^ \ d { 9 } $ / .   ' D ' .   ' N ' . la comprobación sería / ^ [ A ­ Z ] \ d { 8 } $ / . v a l u e ; v a r   l e t r a s   =   [ ' T ' . El siguiente script considera que un número de teléfono está formado por nueve dígitos consecutivos y sin espacios ni guiones entre las cifras: v a l o r   =   d o c u m e n t .   ' J ' .   ' C ' . por lo que esta parte de la validación se debe adaptar convenientemente.   ' T ' ] ;   i f (   ! ( / ^ \ d { 8 } [ A ­ Z ] $ / .   ' Q ' . Si la letra está al principio de los números. que está formado por 8 números seguidos y una letra. se requieren diez números y dos letras.

e l e m e n t s . l e n g t h ;   i + + )   {     v a r   e l e m e n t o   =   f o r m u l a r i o . las 3 primeras encerradas por paréntesis y un espacio de separación respecto del resto Prefijo internacional (+  seguido de 2 o 3 cifras). espacio en blanco y 9 cifras consecutivas + 3 4 / ^ \ + \ d { 2 .3. las siguientes agrupadas de 2 0 0 ( 9 0 0 ) 9 0 0 9 0 0 / ^ \ ( \ d { 3 } \ ) \ s \ d { 6 } $ / 9 cifras. JavaScript permite comprobarlo de forma muy sencilla: e l e m e n t o   =   d o c u m e n t . g e t E l e m e n t B y I d ( " f o r m u l a r i o " ) ; f o r ( v a r   i = 0 ;   i < f o r m u l a r i o . las 3 primeras separadas por un en 2 9 0 0 9 0 0 9 0 0 / ^ \ d { 9 } $ / 9 0 0 ­ 9 0 0 ­ 9 0 0 9 0 0 9 0 0 9 0 0 / ^ \ d { 3 } ­ \ d { 3 } ­ \ d { 3 } $ / / ^ \ d { 3 } \ s \ d { 6 } $ / 9 0 0   9 0   0 9 / ^ \ d { 3 } \ s \ d { 2 } \ s \ d { 2 } \ s \ d { 2 } $ / espacio. t y p e   = =   " c h e c k b o x " )   {         i f ( ! e l e m e n t o . Validar que un checkbox ha sido seleccionado Si un elemento de tipo checkbox se debe seleccionar de forma obligatoria. las 3 primeras separadas por un espacio 9 cifras.formatos de número de teléfono: Número Expresión regular Formato 9 cifras seguidas 9 cifras agrupadas de 3 en 3 y separadas por guiones 9 cifras. es más fácil utilizar un bucle: f o r m u l a r i o   =   d o c u m e n t . c h e c k e d )   {             r e t u r n   f a l s e ;         }     } } . e l e m e n t s [ i ] ;     i f ( e l e m e n t o . 3 } \ s \ d { 9 } $ / 9 0 0 9 0 0 9 0 0 7. c h e c k e d   )   {     r e t u r n   f a l s e ; } Si se trata de comprobar que todos los checkbox del formulario han sido seleccionados.8. g e t E l e m e n t B y I d ( " c a m p o " ) ; i f (   ! e l e m e n t o .

g e t E l e m e n t s B y N a m e ( " o p c i o n e s " ) ;   v a r   s e l e c c i o n a d o   =   f a l s e ; f o r ( v a r   i = 0 ;   i < o p c i o n e s . la validación de los radiobutton presenta una diferencia importante: en general.9. l e n g t h ;   i + + )   {             i f ( o p c i o n e s [ i ] . © 2013 LibrosWeb. Mediante JavaScript.471 días online .3.es 2. es sencillo determinar si se ha seleccionado algún radiobutton de un grupo: o p c i o n e s   =   d o c u m e n t . Cuando se encuentra el primer radiobutton seleccionado. c h e c k e d )   {         s e l e c c i o n a d o   =   t r u e ;         b r e a k ;     } }   i f ( ! s e l e c c i o n a d o )   {     r e t u r n   f a l s e ; } El anterior ejemplo recorre todos los radiobutton que forman un grupo y comprueba elemento por elemento si ha sido seleccionado. Validar que un radiobutton ha sido seleccionado Aunque se trata de un caso similar al de los checkbox.7. la comprobación que se realiza es que el usuario haya seleccionado algún radiobutton de los que forman un determinado grupo. se sale del bucle y se indica que al menos uno ha sido seleccionado.

Sign up to vote on this title
UsefulNot useful