LIBROSWEB

7.3.Validacin
LaprincipalutilidaddeJavaScriptenelmanejodelosformularioseslavalidacindelos datosintroducidosporlosusuarios.Antesdeenviarunformularioalservidor,serecomienda validarmedianteJavaScriptlosdatosinsertadosporelusuario.Deestaforma,sielusuario hacometidoalgnerroralrellenarelformulario,selepuedenotificardeformainstantnea, sinnecesidaddeesperarlarespuestadelservidor. NotificarloserroresdeformainmediatamedianteJavaScriptmejoralasatisfaccindel usuarioconlaaplicacin(loquetcnicamenteseconocecomo"mejorarlaexperienciade usuario")yayudaareducirlacargadeprocesamientoenelservidor. Normalmente,lavalidacindeunformularioconsisteenllamaraunafuncindevalidacin cuandoelusuariopulsasobreelbotndeenvodelformulario.Enestafuncin,se compruebansilosvaloresquehaintroducidoelusuariocumplenlasrestricciones impuestasporlaaplicacin. Aunqueexistentantasposiblescomprobacionescomoelementosdeformulariodiferentes, algunascomprobacionessonmuyhabituales:queserelleneuncampoobligatorio,quese seleccioneelvalordeunalistadesplegable,queladireccindeemailindicadasea correcta,quelafechaintroducidasealgica,quesehayaintroducidounnmerodondeas serequiere,etc. AcontinuacinsemuestraelcdigoJavaScriptbsiconecesarioparaincorporarla validacinaunformulario:
< 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 >

Yelesquemadelafuncinv a l i d a c i o n ( ) eselsiguiente:
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 ) {

 / / 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 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 . . . 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 } / / 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 , 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 , 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 }

Elfuncionamientodeestatcnicadevalidacinsebasaenelcomportamientodelevento o n s u b m i t deJavaScript.Aligualqueotroseventoscomoo n c l i c k yo n k e y p r e s s ,elevento

' o n s u b m i t varasucomportamientoenfuncindelvalorquesedevuelve.

As,sieleventoo n s u b m i t devuelveelvalort r u e ,elformularioseenvacomolohara normalmente.Sinembargo,sieleventoo n s u b m i t devuelveelvalorf a l s e ,elformulariono seenva.Laclavedeestatcnicaconsisteencomprobartodosycadaunodeloselementos delformulario.Encuandoseencuentraunelementoincorrecto,sedevuelveelvalorf a l s e . Sinoseencuentraningnerror,sedevuelveelvalort r u e . Porlotanto,enprimerlugarsedefineeleventoo n s u b m i t delformulariocomo:
o n s u b m i t = " r e t u r n v a l i d a c i o n ( ) "

ComoelcdigoJavaScriptdevuelveelvalorresultantedelafuncinv a l i d a c i o n ( ) ,el formulariosolamenteseenviaralservidorsiesafuncindevuelvet r u e .Enelcasodeque lafuncinv a l i d a c i o n ( ) devuelvaf a l s e ,elformulariopermanecersinenviarse. Dentrodelafuncinv a l i d a c i o n ( ) secompruebantodaslascondicionesimpuestasporla aplicacin.Cuandonosecumpleunacondicin,sedevuelvef a l s e yportantoelformulario noseenva.Sisellegaalfinaldelafuncin,todaslascondicionessehancumplido correctamente,porloquesedevuelvet r u e yelformularioseenva. Lanotificacindeloserrorescometidosdependedeldiseodecadaaplicacin.Enel cdigodelejemploanteriorsimplementesemuestranmensajesmediantelafuncina l e r t ( ) indicandoelerrorproducido.Lasaplicacioneswebmejordiseadasmuestrancada

mensajedeerroralladodelelementodeformulariocorrespondienteytambinsuelen mostrarunmensajeprincipalindicandoqueelformulariocontieneerrores. Unavezdefinidoelesquemadelafuncinv a l i d a c i o n ( ) ,sedebeaadiraestafuncinel cdigocorrespondienteatodaslascomprobacionesqueserealizansobreloselementosdel formulario.Acontinuacin,semuestranalgunasdelasvalidacionesmshabitualesdelos camposdeformulario.

7.3.1.Validaruncampodetextoobligatorio
Setratadeforzaralusuarioaintroducirunvalorenuncuadrodetextootextareaenlosque seaobligatorio.LacondicinenJavaScriptsepuedeindicarcomo:
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 " ) . v a l u e i f ( v a l o r = = n u l l | | v a l o r . l e n g t h = = 0 | | / ^ \ s + $ / . t e s t ( v a l o r ) ) { r e t u r n f a l s e }

Paraquesedeporcompletadouncampodetextoobligatorio,secompruebaqueelvalor introducidoseavlido,queelnmerodecaracteresintroducidoseamayorqueceroyque nosehayanintroducidosloespaciosenblanco. Lapalabrareservadan u l l esunvalorespecialqueseutilizaparaindicar"ningnvalor".Si elvalordeunavariableesn u l l ,lavariablenocontieneningnvalordetipoobjeto,array, numrico,cadenadetextoobooleano. Lasegundapartedelacondicinobligaaqueeltextointroducidotengaunalongitud superioracerocaracteres,estoes,quenoseauntextovaco. Porltimo,latercerapartedelacondicin( / ^ \ s + $ / . t e s t ( v a l o r ) ) obligaaqueelvalor introducidoporelusuarionosloestformadoporespaciosenblanco.Estacomprobacin sebasaenelusode"expresionesregulares",unrecursohabitualencualquierlenguajede programacinperoqueporsugrancomplejidadnosevanaestudiar.Porlotanto,sloes necesariocopiarliteralmenteestacondicin,poniendoespecialcuidadoennomodificar ningncarcterdelaexpresin.

7.3.2.Validaruncampodetextoconvaloresnumricos
Setratadeobligaralusuarioaintroducirunvalornumricoenuncuadrodetexto.La condicinJavaScriptconsisteen:
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 " ) . 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

Sielcontenidodelavariablev a l o r noesunnmerovlido,nosecumplelacondicin.La ventajadeutilizarlafuncininternai s N a N ( ) esquesimplificalascomprobaciones,yaque JavaScriptseencargadetenerencuentalosdecimales,signos,etc. Acontinuacinsemuestranalgunosresultadosdelafuncini 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 . 3 5 4 5 ) / / f a l s e i s N a N ( 3 2 3 2 3 . 3 4 5 ) / / f a l s e i s N a N ( + 2 3 . 2 ) / / f a l s e i s N a N ( " 2 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 . 4 3 . 5 4 " ) / / t r u e

7.3.3.Validarquesehaseleccionadounaopcindeunalista
Setratadeobligaralusuarioaseleccionarunelementodeunalistadesplegable.El siguientecdigoJavaScriptpermiteconseguirlo:
i n d i c e = d o c u m e n t . g e t E l e m e n t B y I d ( " o p c i o n e s " ) . 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 >

Apartirdelapropiedads e l e c t e d I n d e x ,secompruebasielndicedelaopcinseleccionada esvlidoyademsesdistintodecero.Laprimeraopcindelalista( S e l e c c i o n a u n v a l o r )noesvlida,porloquenosepermiteelvalor0 paraestapropiedads e l e c t e d I n d e x .

7.3.4.Validarunadireccindeemail
Setratadeobligaralusuarioaintroducirunadireccindeemailconunformatovlido.Por tanto,loquesecompruebaesqueladireccinparezcavlida,yaquenosecompruebasi setratadeunacuentadecorreoelectrnicorealyoperativa.LacondicinJavaScript consisteen:

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 " ) . v a l u e i f ( ! ( / \ w + ( [ + . ' ] \ w + ) * @ \ w + ( [ . ] \ w + ) * \ . \ w + ( [ . ] \ w + ) / . t e s t ( v a l o r ) ) ) { r e t u r n f a l s e }

Lacomprobacinserealizanuevamentemediantelasexpresionesregulares,yaquelas direccionesdecorreoelectrnicovlidaspuedensermuydiferentes.Porotraparte,comoel estndarquedefineelformatodelasdireccionesdecorreoelectrnicoesmuycomplejo,la expresinregularanterioresunasimplificacin.Aunqueestareglavalidalamayorade direccionesdecorreoelectrnicoutilizadasporlosusuarios,nosoportatodoslosdiferentes formatosvlidosdeemail.

7.3.5.Validarunafecha
Lasfechassuelenserloscamposdeformulariomscomplicadosdevalidarporlamultitud deformasdiferentesenlasquesepuedenintroducir.Elsiguientecdigoasumequede algunaformasehaobtenidoelao,elmesyeldaintroducidosporelusuario:
v a r a n o = d o c u m e n t . g e t E l e m e n t B y I d ( " a n o " ) . v a l u e v a r m e s = d o c u m e n t . g e t E l e m e n t B y I d ( " m e s " ) . v a l u e v a r d i a = d o c u m e n t . g e t E l e m e n t B y I d ( " d i a " ) . v a l u e v a l o r = n e w D a t e ( a n o , m e s , 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 }

LafuncinD a t e ( a n o , m e s , d i a ) esunafuncininternadeJavaScriptquepermiteconstruir fechasapartirdelao,elmesyeldadelafecha.Esmuyimportantetenerencuentaqueel nmerodemesseindicade0 a1 1 ,siendo0 elmesdeEneroy1 1 elmesdeDiciembre.Los dasdelmessiguenunanumeracindiferente,yaqueelmnimopermitidoes1 yelmximo

3 1 .

Lavalidacinconsisteenintentarconstruirunafechaconlosdatosproporcionadosporel usuario.Silosdatosdelusuarionosoncorrectos,lafechanosepuedeconstruir correctamenteyportantolavalidacindelformularionosercorrecta.

7.3.6.ValidarunnmerodeDNI
Setratadecomprobarqueelnmeroproporcionadoporelusuariosecorrespondeconun nmerovlidodeDocumentoNacionaldeIdentidadoDNI.Aunqueparacadapasoregin losrequisitosdeldocumentodeidentidaddelaspersonaspuedenvariar,acontinuacinse

muestraunejemplogenricofcilmenteadaptable.Lavalidacinnoslodebecomprobar queelnmeroestformadoporochocifrasyunaletra,sinoquetambinesnecesario comprobarquelaletraindicadaescorrectaparaelnmerointroducido:

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 " ) . v a l u e v a r l e t r a s = [ ' T ' , ' R ' , ' W ' , ' A ' , ' G ' , ' M ' , ' Y ' , ' F ' , ' P ' , ' D ' , ' X ' , ' B ' , ' N ' , ' J ' , ' Z ' , ' S ' , ' Q ' , ' V ' , ' H ' , ' L ' , ' C ' , ' K ' , ' E ' , ' T ' ] i f ( ! ( / ^ \ d { 8 } [ A Z ] $ / . 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 . c h a r A t ( 8 ) ! = l e t r a s [ ( v a l o r . s u b s t r i n g ( 0 , 8 ) ) % 2 3 ] ) { r e t u r n f a l s e }

Laprimeracomprobacinaseguraqueelformatodelnmerointroducidoeselcorrecto,es decir,queestformadopor8nmerosseguidosyunaletra.Silaletraestalprincipiode losnmeros,lacomprobacinsera/ ^ [ A Z ] \ d { 8 } $ / .Sienvezdeochonmerosyunaletra, serequierendieznmerosydosletras,lacomprobacinsera/ ^ \ d { 1 0 } [ A Z ] { 2 } $ / yas sucesivamente. LasegundacomprobacinaplicaelalgoritmodeclculodelaletradelDNIylacompara conlaletraproporcionadaporelusuario.Elalgoritmodecadadocumentodeidentificacin esdiferente,porloqueestapartedelavalidacinsedebeadaptarconvenientemente.

7.3.7.Validarunnmerodetelfono
Losnmerosdetelfonopuedenserindicadosdeformasmuydiferentes:conprefijo nacional,conprefijointernacional,agrupadoporpares,separandolosnmerosconguiones, etc. Elsiguientescriptconsideraqueunnmerodetelfonoestformadopornuevedgitos consecutivosysinespaciosniguionesentrelascifras:
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 " ) . v a l u e i f ( ! ( / ^ \ d { 9 } $ / . t e s t ( v a l o r ) ) ) { r e t u r n f a l s e }

Unavezms,lacondicindeJavaScriptsebasaenelusodeexpresionesregulares,que compruebansielvalorindicadoesunasucesindenuevenmerosconsecutivos.A continuacinsemuestranotrasexpresionesregularesquesepuedenutilizarparaotros

formatosdenmerodetelfono: Nmero Expresinregular Formato 9cifrasseguidas 9cifrasagrupadasde3en3yseparadas porguiones 9cifras,las3primerasseparadasporun espacio 9cifras,las3primerasseparadasporun en2

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,lassiguientesagrupadasde2 0 0

( 9 0 0 ) 9 0 0 9 0 0

/ ^ \ ( \ d { 3 } \ ) \ s \ d { 6 } $ /

9cifras,las3primerasencerradaspor parntesisyunespaciodeseparacin respectodelresto Prefijointernacional(+ seguidode2o3 cifras),espacioenblancoy9cifras consecutivas

+ 3 4 / ^ \ + \ d { 2 , 3 } \ s \ d { 9 } $ / 9 0 0 9 0 0 9 0 0

7.3.8.Validarqueuncheckboxhasidoseleccionado
Siunelementodetipocheckboxsedebeseleccionardeformaobligatoria,JavaScript permitecomprobarlodeformamuysencilla:
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 ( " c a m p o " ) i f ( ! e l e m e n t o . c h e c k e d ) { r e t u r n f a l s e }

Sisetratadecomprobarquetodosloscheckboxdelformulariohansidoseleccionados,es msfcilutilizarunbucle:
f o r m u l a r i 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 . 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 . e l e m e n t s [ i ] i f ( e l e m e n t o . t y p e = = " c h e c k b o x " ) { i f ( ! e l e m e n t o . c h e c k e d ) { r e t u r n f a l s e } } }

7.3.9.Validarqueunradiobuttonhasidoseleccionado
Aunquesetratadeuncasosimilaraldeloscheckbox,lavalidacindelosradiobutton presentaunadiferenciaimportante:engeneral,lacomprobacinqueserealizaesqueel usuariohayaseleccionadoalgnradiobuttondelosqueformanundeterminadogrupo. MedianteJavaScript,essencillodeterminarsisehaseleccionadoalgnradiobuttondeun grupo:
o p c i o n e s = d o c u m e n t . 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 . l e n g t h i + + ) { i f ( o p c i o n e s [ i ] . 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 }

Elanteriorejemplorecorretodoslosradiobuttonqueformanungrupoycomprueba elementoporelementosihasidoseleccionado.Cuandoseencuentraelprimerradiobutton seleccionado,sesaledelbucleyseindicaquealmenosunohasidoseleccionado.

2013LibrosWeb.es

2.471dasonline