Javascript: lenguaje interactivo para dinamizar la web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 69
Visitas el mes pasado: 258
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
Una de las comprobaciones que suelen hacerse a menudo con Javascript en los campos de texto de los formularios, es que éstos estén rellenos, es decir que sea obligatorio por parte del usuario rellenarlos.
Para ello debemos comprobar antes de que se mande el formulario que el campo de texto no esté vacío o que no contenga sólo una cadena con espacios en blanco. (que sólo se haya pulsado la barra espaciadora)
Pongamos, por ejemplo el siguiente formulario:
<form name="formulario" action="mailto:direccion@serv.es" onsubmit="return comprobar()"> <input type="text" name="nombre" onfocus="restaurar()"/> Nombre<br/><br/> <input type="text" name="apellido" onfocus="restaurar()" /> Apellido<br/><br/> <input type="submit" value="enviar" /> </form>
Más adelante explicaremos los eventos y las funciones que hemos puesto. De momento
vamos a ver cómo se puede saber si los campos de texto estan o no vacíos. Para ello utilizaremos
la propiedad value
con la cual accedemos al texto que ha escrito el usuario.
Accedemos primero al elemento:
elNombre = document.formulario.nombre.
para acceder después al texto:
textoNombre = elNombre.value
Queremos saber también si el texto no está compuesto sólo por espacios en blancos. En realidad,
lo que vamos a comprobar es que el texto no empieza por un espacio en blanco. Las cadenas de
texto tienen una serie de métodos o funciones para comprobar algunas de sus características, esto
lo veremos en un tema posterior, aquí utilizaremos una de estas funciones indexOf()
. Esta
función indica en qué posición se encuentra un determinado caracter; si hay más de uno indicará
la posición del primero que se encuentre en la cadena. El caracter lo escribimos
entre comillas dentro del paréntesis, por lo que aquí, para buscar el carácter del espacio en
blanco escribiremos:
textoNombre.indexOf(" ")
El metodo indexOf()
empieza a contar los caracteres desde el número 0, como si
la cadena fuera un array, por lo que para comprobar si el texto que ha escrito el usuario es
válido utilizaremos la siguiente comprobación mediante la sentencia if
if (textoNombre == "" || textoNombre.indexOf(" ") == 0)
Por otra parte, para que el formulario no sea enviado cuando se cumplan las condiciones
anteriores, debemos anular el botón de enviar. Para ello no sólo debemos devolver el valor
false
desde la función mediante la instrucción return
,
sino que éste valor se debe aplicar al formulario,
es por ello que en el valor del evento submit
hemos puesto la instrucciòn
return
delante de la llamada a la función. (onsubmit="return comprobar()"
).
Para completar el código debemos avisar al usuario de que debe rellenar el campo obligatorio
En la siguiente página puedes ver este formulario con el script de validación,
además hemos añadido la función restaurar
, que borra el aviso anterior en cuanto
el usuario vuelve a seleccionar un campo de texto obligatorio. Este es el código de la página:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Campos de texto obligatorios</title> <script type="text/javascript"> function comprobar() { var nombre = document.formulario.nombre; var apellido = document.formulario.apellido; var aviso = document.getElementById("aviso"); aviso.innerHTML = "" var enviar = "si" if (nombre.value == "" || nombre.value.indexOf(" ") == 0) { var texto = "Es obligatorio introducir el nombre.<br/>" aviso.innerHTML += texto enviar = "no" } if (apellido.value == "" || apellido.value.indexOf(" ") == 0 ) { var texto = "Es obligatorio introducir el apellido.<br/>" aviso.innerHTML += texto enviar = "no" } if (enviar == "no") {return false} } function restaurar() { var aviso = document.getElementById("aviso"); aviso.innerHTML = "" } </script> </head> <body> <h1>comprobar campos de texto obligatorios</h1> <p>Estos datos son obligatorios, y no pueden empezar por un espacio en blanco.</p> <form name="formulario" action="mailto:direccion@serv.es" onsubmit="return comprobar()"> <input type="text" name="nombre" onfocus="restaurar()"/>ç Nombre<br/><br/> <input type="text" name="apellido" onfocus="restaurar()" /> Apellido<br/><br/> <input type="submit" /> </form> <p id="aviso"></p> </body> </html>
Para ver cómo queda esta pagina en el navagador pulsa en el siguiente enlace:
Cuando se introduce una contraseña por primera vez lo normal es pedir al usuario que la
escriba dos veces, además también es habitual pedir que la contraseña tenga una longitud
mínima. Para comprobar estas condiciones usaremos también la propiedad value
.
pongamos un formulario de ejemplo donde se pide una contraseña; este es el formulario:
<form name="formulario" action="mailto:micorreo@serv.com" onsubmit="return comprobar()"> <p>Dame una contraseña; (mínimo 6 caracteres)</p> <input type="password" name="clave1" onfocus="restaurar() /> Escribe una contraseña<br/><br/> <input type="password" name="clave2" onfocus="restaurar() /> Repite la contraseña<br/><br/> <input type="submit" /> </form> <p id="aviso"></p>
Como en el ejemplo anterior utilizaremos la función return comprobar()
para
dar un aviso al usuario de que la contraseña es incorrecta, y en ese caso devolver false
,
lo que provoca que el formulario no sea enviado. También la función restaurar()
hará que se borre el aviso anterior en cuanto el usuario vuelva a seleccionar el campo de texto.
Para que la contraseña tenga más de 6 caracteres debemos comprobar que la cadena de texto
tiene más de 6 caracteres; esto lo haremos con la propiedad .length
la cual nos dirá
cual es la longitud de la cadena.
largo = document.formulario.clave1.length
el valor de la variable largo
será un número que nos dirá cual es el número de
caracteres de la cadena de texto.
Por otra parte el elemento con id="aviso"
nos servirá para mandar al usuario
los mensajes de error al rellenar el formulario.
Debemos comprobar también que la primera contraseña introducida es igual a la segunda, lo cual lo haremos mediante la propiedad value:
contra1 = document.formulario.clave1.value;
contra2 = document.formulario.clave2.value;
if (contra1 == contra2) ...
Con este código ponemos como condición que las dos claves sean iguales.
El resto del código es muy similar al del ejemplo anterior (validar cuadro de texto), Sólo que aquí el valor por defecto es "no enviar" y sólo si se cumplen las condiciones se envía el formulario:
El script de comprobación será el siguiente:
function comprobar() { var mirarLargo="no"; var mirarIgual="no"; var contra1 = document.formulario.clave1 var contra2 = document.formulario.clave2 var aviso = document.getElementById("aviso"); aviso.innerHTML = "" if (contra1.value.length >= 6) { mirarLargo = "si" } else { texto = "La contraseña debe tener más de 6 caracteres.<br/>" aviso.innerHTML += texto } if (contra1.value == contra2.value) { mirarIgual = "si" } else { texto = "La contraseña y su repetición deben ser iguales.<br/>" aviso.innerHTML += texto } if (mirarLargo == "no" || mirarIgual == "no") { return false } } function restaurar() { var aviso = document.getElementById("aviso"); aviso.innerHTML = "" }
En este script se han seguido los siguientes pasos:
mirarLargo
y mirarIgual
son las variables que comprueban si las condiciones se cumplen;
contra1
y contra2
son los elementos del formulario, y aviso
es el elemento donde escribiremos los mensajes de error. Este último lo igualamos a una
cadena de texto vacía.if (contra1.value.length >= 6)
), de ser así
se cambia la variable de comprobación, y de no serlo se envía un mensaje de error. Lo mismo
hacemos para comprobar que las dos contraseñas sean iguales.return false
, y
el formulario no se envia.restaurar
borra los mensajes de error en cuanto el
usuario vuelve a seleccionar un campo de texto.El ejemplo puede verse en la página del siguiente enlace:
Los elementos textarea no tienen ningún atributo que pueda limitar el número de caracteres que escribamos en ellos, pero mediante javascript sí que podemos delimitarlo.
para ello utilizaremos el evento onkeypress
. Al igual que el evento submit
,
si el valor que devuelve es "return false"
, el evento deja de producirse, con lo que
utilizando este comportamiento y comprobando la longitud de la cadena de texto mediante la
propiedad .length
, podemos hacer que ésta no admita más de un cierto número
de caracteres. En el siguiente ejemplo limitamos el número de caracteres de un
textarea
a 50. Esta es su etiqueta html:
<textarea name="coment" onkeypress="return limitar(this)"> </textarea>
y este es el código javascript de este ejemplo:
function limitar(texto) { if (texto.value.length > 50) { return false } }
Como puedes observar hemos pasado como parámetro de la función el elemento this
,
con esto evitamos tener que buscar el acceso a la función, ya que la función, al recoger
el parámetro es admitido como el elemento que se lo ha mandado. Si en lugar de esto,
hubieramos escrito en la función this.value.length
sin pasarle ningún parámetro,
la función no reconocería el elemento this
.
Cuando la función devuelve false
, el evento onkeypress
deja de
producirse y apretar cualquier tecla no tiene ningún efecto. Puedes ver el ejemplo en el siguiente
cuadro de textarea
con el texto limitado a 50 caracteres.
El problema está en que una vez que se ha llegado al máximo de caraceres no se puede borrar el texto
mediante la tecla de retroceso, ya que no funciona ninguna tecla. Sin embargo podemos poner un botón
que permita borrar el cuadro textarea
, el cual llevará el siguiente código:
<input type="button" value="borrar comentario" onclick ="this.form.coment.value = ''" />
El botón quedará de la siguiente manera, pulsa en él para borrar el textarea
de este ejemplo.
Fíjate que para acceder al elemento textarea partimos del propio elemento (this
), para
acceder desde él al formulario (.form
), para luego acceder al textarea
mediante
su etiqueta name
(.coment
) y luego a la propiedad .value
para cambiarla.
Otras comprobaciones típicas que suelen hacerse mediante javascript en los campos de texto es comprobar que el código se parece al tipo de texto que se pide, es decir, que si pedimos un teléfono, que el texto del usuario sea un número de 9 cifras, o que si pedimos un e-mail, éste lleve por lo menos el signo arroba ( @ ).
Para ello necesitamos saber algunas funciones predeterminadas o métodos que posee javascript, todo esto lo veremos en temas posteriores, donde también veremos algunos de estos ejemplos.
En la página siguiente seguiremos con la validación o comprobación de datos de los formularios, veremos cómo comprobar los datos que los usuarios introducen mediante botones.
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com