Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Javascript

Javascript: lenguaje interactivo para dinamizar la web.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

última modificación: 13-07-2018.

Visitas este mes: 69

Visitas el mes pasado: 258

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de Javascript
Desarrollo Web, por Miguel Angel Álvarez
Libros Web: introducción a Javascript
Libros web, por Javier Eguíluz Pérez
Curso de Javascript: Programación Web
www.programacionweb.net
WebEstilo: JavaScript
www.webestilo.com
W3 schools; Javascript Tutorial
www.w3schools.com
Manual de Javascript: José Antonio Rodríguez.
Jose Antonio Rodriguez: manual en PDF


Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




7. Formularios (IV)

7.4 Validar textos

javascript

Campos de texto obligatorio

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:

Campos de texto obligatorios



Comprobar contraseñas

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:

El ejemplo puede verse en la página del siguiente enlace:

Comprobar contraseñas.



Limitar el tamañó de un textarea

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

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.

7.5. Validar botones.



manual de Javascript

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com