PDF de programación - DHTML Validación de formas

DHTML


Validación
de
formas


Validación
de
formas


• 

La
validación
de
formas
es
el
proceso
de
verificar
los
datos
que
el
usuario

escribe
en
los
campos
de
un
forma.


•  Se
puede
llevar
a
cabo
del
lado
del
servidor
y
del
lado
del
cliente
ó
en


ambas
partes.


•  Para
realizar
la
validación
se
uAliza
un
lenguaje
de
script.


•  Cuando
se
hace
del
lado
del
cliente,
permite
ahorrar
ancho
de
banda
y

ahorra
Aempo
al
usuario
que
no
Aene
que
esperar
el
ciclo
completo
de

envío
y
respuesta
del
servidor
para
darse
cuenta
de
un
error
de
captura.


•  No
es
posible
prescindir
de
la
validación
del
lado
del
servidor
ya
que
no
se


puede
garanAzar
que
el
cliente
ejecutó
el
script.


Formas
de
validar
del
lado
del
cliente


•  La
validación
del
lado
del
cliente
puede
hacerse
de
2


maneras:

–  En
batch,
es
decir
una
vez
que
se
llenan
todos
los
campos
y


se
pretende
envíar
la
forma,
se
acAva
un
mecanismo
que

verifica
todos
los
campos.


–  En
Aempo
real.
Detectando
cada
acción
del
usuario


mientras
va
llenando
la
forma
y
tan
pronto
termina
de

llenar
un
campo
inmediatamente
se
le
noAfica
en
caso
de

error.


Validación
batch


•  Se
asocia
una
funcion
manejadora
de
eventos

(event
handler)
al
botón
submit
de
la
forma.



•  Si
la
función
regresa
el
valor
booleano
false,
la


forma
no
será
enviada
al
servidor.


Algunas
maneras
de
registrar
la
función
de


validación


<form
name
=
“forma1”
id=“forma1”



acAon
=
“”

onSubmit
=
“return
ValidarForma(this);”>


window.onload
=
initForm;


funcAon
initForm()
{



document.forms[0].onsubmit
=
funcAon()
{return
validarForma();}


}

window.onload
=
initForm;


funcAon
initForm()
{
document.forms[0].onsubmit
=
validarForma;

}

return
Keyword


La
palabra
“return”
que
precede
la
invocación
de
la

función

asociada
al
evento
submit
indica
que
el

resultado
sera
enviado
al
browser
y
de
este
valor

dependerá
su
comportamiento.
Si
el
valor
es
false
el

browser
aborta
el
envío
de
la
forma.



Verificando
que
se
llene
un
campo
de


texto


Se
uAliza
el
atributo
value,
suponga
que
el
nombre
y
id
del
campo
es
“contacto”


if
(
document.forma1.contacto.value
==
""
)
{valid
=
false;
}


ó


if
(
document.getElementById(“contacto”).value
==
""
)
{valid
=
false;
}


Verificando
opciones
seleccionadas


En
caso
de
una
lista
“select”
(Drop‐Down
List
)Se
puede
usar
el
atributo
value

ó
el
atributo


“selectedIndex”
el
cual
vale
0
para
la
primera,
1
para
la
segunda
opción,
etc.


Si
se
deja
la
primera
opción
como
informaAva
por
ejemplo
“favor
de

seleccionar
su
edad”),
se
puede
verificar
que
se
haya
hecho
una
selección

efecAva
verificando
si
selectedindex
es
diferente
de
0:


if
(
document.forma1.edad.selectedIndex
==
0
)
{valid
=
false;
}


Verificando
Radio
botones
o


checkboxes


Se
puede
uAlizar
el
atributo
checked
el
cual
es
verdadero
(true)
si
la

casilla
está
seleccionada
falso
si
no.
En
un
grupo
de
radio
botones,

los
botones
se
organizan
en
un
areglo,
permiAendo
la
lectura
de

cada
uno
de
ellos
mediante
el
índice
del
arreglo:


if
(
(
document.forma1.edoCivil[0].checked
==
false
)
&&

(
document.forma1.edoCivil[1].checked
==
false
)
)
{
valid
=
false;
}