Java

Validacin de formularios con JavaScript.
APRENDERAPROGRAMAR.COM
JAVASCRIPT VALIDAR
CAMPO TEXTO NO VACO.
QUE VALOR SEA
NUMRICO. EMAIL O
CORREO ELECTRNICO EN
FORMULARIOS.
EJEMPLOS (CU01182E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
Fecha revisin: 2029
Resumen: Entrega n82 del Tutorial bsico JavaScript desde cero.
aprenderaprogramar.com, 2006-2029
Autor: Csar Krall
Validacin de
d formularios con JavaScriptt.
VALIDACIIN DE FORM
MULARIOS CON
C
JAVASCRIPT
Un uso haabitual e imp
portante de JavaScript es
e servir paraa realizar la validacin
v
dee formulario
os. Cuando
un usuariio rellena un formulario
o y pulsa en
n el botn enviar, com
mprobaremoss con JavaSccript si ha
introducid
do los datos mnimos req
queridos y co
on el formato requerido.. Si no es as,, abortaremo
os el envo
del formu
ulario y mostraremos los avisos correespondientess evitando en
nviar la inforrmacin al se
ervidor.
d la inform
macin al serrvidor supon
ndra una de
emora en la respuesta (enviar la infformacin,
El envo de
realizar laa validacin en el servid
dor, enviar laa respuesta
) y dara laa impresin de que la pgina web
est lentta. Con JavaaScript podemos lograr una
u respuestta inmediata, haciendo q
que la navegaacin para
el usuario
o de nuestra pgina web sea satisfacttoria.
La validaccin normalm
mente consisste en detecttar el evento
o submit del formulario y derivar la gestin
g
del
mismo a una funcin
n manejadorra que se encarga de re
evisar el con
ntenido del formulario. Si en esa
revisin se
s detectan errores en los formato
os o falta de
e datos, el envo
e
se aborta y se muestra
m
un
mensaje de
d aviso al usuario.
u
Si en
n la revisin se consideraa que est to
odo conform
me, se proced
de al envo
del formu
ulario.
La validaccin no supo
one ms quee una aplicacin prctica de los con
nocimientos que hemos adquirido
durante el
e curso (acceeso a elemen
ntos del DOM
M, manejo de
e objetos, exxpresiones reegulares, etcc.).
La invocacin a la validacin se puede enfocaar de distintaas maneras. La forma qu
uizs preferib
ble es usar
addEventListener y prreventDefault:
documentt.nombreDelFormulario.addEventListener('subm
mit', validarFo
ormulario);
function validarFormu
v
ulario(evObjeect) {
evObject.p
preventDefaault(); //Evitaa el envo del formulario hasta comprrobar
}
Otra form
ma que ha veenido siendo
o bastante uttilizada es caapturar el evvento en el ccdigo HTMLL para que
devuelva true (en cuyyo caso se en
nviar el form
mulario) o fallse (en cuyo caso no se eenviar):
function validarFormu
v
ulario() {
if ( ) { retturn true; // Si se verificaan las condicciones enviarr formulario
} else { retturn false; /// Si no se verifican las con
ndiciones no
o se enviar eel formulario
o
}
--}
--<form action="" method
d="" id="" naame="" onsu
ubmit="returrn validarForrmulario ()">
>
aprenderraprogramar.co
om, 2006-2029
VALIDAR QUE UN CAMPO NO EST VACO

En muchos formularios se requerir que uno o varios campos no se encuentren vacos. Por ejemplo si
se trata de una reserva de hotel, ser necesario que datos como el nombre de la persona que realiza la
reserva no se encuentren vacos.
Tambin podemos comprobar que no se hayan introducido slo espacios en blanco (que son caracteres
pero no aportan informacin), u otro tipo de comprobaciones ms elaboradas usando expresiones
regulares.
Escribe este cdigo que es un ejemplo de comprobacin de que un campo no est vaco o contenga
slo espacios en blanco y comprueba sus resultados:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">body {background-color:yellow; font-family: sans-serif;} label{color: maroon; display:block;
padding:5px;}
</style>
<script type="text/javascript">
window.onload = function () {
document.formularioContacto.nombre.focus();
document.formularioContacto.addEventListener('submit', validarFormulario);
}
function validarFormulario(evObject) {
evObject.preventDefault();
var todoCorrecto = true;
var formulario = document.formularioContacto;
for (var i=0; i<formulario.length; i++) {
if(formulario[i].type =='text') {
if (formulario[i].value == null || formulario[i].value.length == 0 || /^\s*$/.test(formulario[i].value)){
alert (formulario[i].name+ ' no puede estar vaco o contener slo espacios en blanco');
todoCorrecto=false;
}
}
}
if (todoCorrecto ==true) {formulario.submit();}
}
</script></head>
<body><div id="cabecera"><h1>Portal web aprenderaprogramar.com</h1><h2>Didctica y divulgacin de la
programacin</h2>
</div>

<form name ="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com">
<p>Si quieres contactar con nosotros envanos este formulario relleno:</p>
<label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" /></label>
<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" /></label>
<label for="email"><span>Correo electrnico:</span> <input id="email" type="text" name="email" /></label>
<label><input type="submit" value="Enviar"><input type="reset" value="Cancelar"></label>
</form></body></html>
Recordar lo que explicamos en los apartados del curso dedicados a expresiones regulares. /^\s*$/
define una expresin regular donde \s es el espacio en blanco, ^ indica comienzo de cadena con ese
carcter, * indica repeticin cualquier nmero de veces y $ seala el carcter de terminacin de
cadena. Por tanto la expresin regular indica las cadenas que empiezan con espacio en blanco, siguen
con cualquier nmero de espacios en blanco y terminan con un espacio en blanco.
El mtodo test devuelve true si la cadena hace match con la expresin regular o false si la cadena no
hace match.
VALIDAR QUE UN CAMPO CONTIENE UN VALOR NUMRICO

En ocasiones se puede requerir que un campo contenga un valor numrico. Las comprobaciones se
pueden hacer basndonos en expresiones regulares, basndonos en la funcin isNaN, o basndonos en
que el valor numrico debe ser mayor, menor, mayor o igual, menor o igual que otro valor numrico de
referencia.
Recordar que isNaN(x) devuelve true si x es un valor no asimilable a un nmero o false si el valor es
asimilable a un nmero. La funcin isNaN es laxa en el sentido de que tratar de asimilar a un nmero
todo lo que sea posible. Por ejemplo alert(isNaN(-3.23)); devuelve false (se considera -3.23 un nmero).
Esto puede ser interesante en algunas ocasiones pero no interesante en otras.
Ejemplo: pedimos la altura respecto al nivel del mar, siendo 0 el nivel del mar, un valor positivo una
altura sobre el nivel del mar y un valor negativo una altura por debajo del nivel del mar (por ejemplo la
altura de un submario). En este caso nos interesa usar isNaN.
Otro ejemplo: pedimos la edad de una persona. En este caso ser preferible usar expresiones regulares,
por ejemplo comprobar que el valor del campo se corresponda con uno dos dgitos, lo que hara
vlido 5, 44, 88, pero hara invlidos 148, -3.23 5.25.
Escribe este cdigo que es un ejemplo de validaciones con campos numricos y comprueba sus
resultados.
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
body {background-color:yellow; font-family: sans-serif;}
label{color: maroon; display:block; padding:5px;}
</style>
<script type="text/javascript">
window.onload = function () {
document.formularioContacto.nombre.focus();
document.formularioContacto.addEventListener('submit', validarFormulario);
}
function validarFormulario(evObject) {
evObject.preventDefault();
var todoCorrecto = true;
var formulario = document.formularioContacto;
if (isNaN(formulario.edad.value)==true || /^[1-9]\d$/.test(formulario.edad.value)==false ) {alert ('Edad no valida');
todoCorrecto=false;}
if (isNaN(formulario.altura.value)==true || formulario.altura.value<=0 || formulario.altura.value>=2.50) {
alert ('Altura no valida'); todoCorrecto=false;}
if (todoCorrecto ==true) {formulario.submit();}
}
</script></head>
<body><div id="cabecera"><h1>Portal web aprenderaprogramar.com</h1><h2>Didctica y divulgacin de la
programacin</h2></div>
<label for="apellidos"><span>Edad:</span> <input id="edad" type="text" name="edad" /></label>
<label for="email"><span>Altura:</span> <input id="altura" type="text" name="altura" /></label>
</form></body></html>
El resultado esperado es que el formulario no se enve si la edad no est formada por dos dgitos (no
sera vlido 124 ni -3.23) o si la altura es un valor negativo, mayor o igual a 2.50 no tiene formato
numrico.
VALIDAR UNA DIRECCIN DE EMAIL

Para comprobar que el usuario introduce una direccin de email vlida podemos hacer distintos tipos
de comprobaciones. La ms bsica es comprobar que la cadena contiene cualquier nmero de
caracteres seguido del carcter @ segudio de cualquier nmero de caracteres, seguido de un punto, y
seguido de cualquier nmero de caracteres. Esta validacin es amplia y no aceptara la mayor parte de
direcciones no vlidas, por ejemplo no se aceptara <<andres@gmailcom>> porque le falta el punto.
En general ser suficiente usar una expresin regular simple del tipo:
/\S+@\S+\.\S+/
En muchas pginas de internet se encuentran expresiones ms complejas que tratan de tener en cuenta
posibilidades menos frecuentes de formato de correo electrnico, por ejemplo esta:
/ [a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z09-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/
Las comprobaciones se haran de la misma forma a como hemos visto en los ejemplos anteriores.
EJERCICIO
Dado el siguiente cdigo HTML que contiene un formulario con tres campos (nombre, apellidos y
email):
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">body {background-color:yellow; font-family: sans-serif;}
label{color: maroon; display:block; padding:5px;}
</style>
</head>
<body>
<div id="cabecera"><h1>Portal web aprenderaprogramar.com</h1><h2>Didctica y divulgacin de la programacin</h2>
</div>
<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" /></label>
<label for="email"><span>Correo electrnico:</span> <input id="email" type="text" name="email" /></label>
</form>
</body>
</html>
Crear el cdigo JavaScript que cumpla con las siguientes funciones:

a) Si la longitud (nmero de caracteres) del campo nombre es mayor de 15 o igual a cero, el formulario
no se enviar.
b) Si la longitud (nmero de caracteres) del campo apellidos es mayor de 30 o igual a cero, el formulario
no se enviar.
c) Si la longitud (nmero de caracteres) del campo email es mayor de 35 o igual a cero, el formulario no
se enviar. Si el email no contiene el carcter @ el formulario no se enviar.
d) Si se produce cualquiera de las circunstancias anteriores, debe aparecer un recuadro con color de
fondo naranja y texto negro a la derecha de la casilla de introduccin de datos, informando del
problema detectado en ese campo (si es que ese campo presenta algn problema). Nota: estos
mensajes se deben mostrar slo si el campo es errneo despus de pulsado el botn enviar, y deben
desaparecer si el usuario realiza un nuevo intento y el campo es correcto. Los mensajes se incorporarn
al DOM (no sern mensajes usando alert).
Ejemplo de ejecucin. El usuario deja el nombre, apellidos y correo electrnico vacos. A la derecha de
las casillas de introduccin de datos aparecer: El nombre no puede estar vaco. Los apellidos no
pueden estar vacos. El correo electrnico no puede estar vaco.
Ahora el usuario introduce nombre: <<Juan Manuel de Todos los Santos Efmeros Ecunimes de Todos
los das de la Tercera Edad>>. Como apellidos introduce: <<Surez>>. Y como correo electrnico
introduce: <<juanmanueldetodoslosantosefimerosecuanimesdetodoslosdias@gmail.com>>. Pulsa
enviar. A la derecha de la casilla de introduccin del nombre debe aparecer: Nombre demasiado largo.
Mximo 15 caracteres. A la derecha de apellidos no aparecer nada porque el apellido es correcto. A la
derecha del correo electrnico debe aparecer: Correo electrnico demasiado largo. Mximo 35
caracteres. Ahora el usuario escribe como nombre: Juan Manuel. Como apellidos: Surez. Y como
correo electrnico juanmanuel@gmail.com. Pulsa enviar y el formulario es enviado.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
Prxima entrega: CU01183E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:
http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

Java

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Java

Uploaded by

Copyright:

Available Formats

Validacin de formularios con JavaScript.

Autor: Csar Krall

Validacin de formularios con JavaScript.

VALIDAR QUE UN CAMPO NO EST VACO

Validacin de formularios con JavaScript.

VALIDAR QUE UN CAMPO CONTIENE UN VALOR NUMRICO

Validacin de formularios con JavaScript.

VALIDAR UNA DIRECCIN DE EMAIL

Validacin de formularios con JavaScript.

Crear el cdigo JavaScript que cumpla con las siguientes funciones:

Validacin de formularios con JavaScript.

Prxima entrega: CU01183E

You might also like