Guia7

101
-1

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
101
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Guia7

  1. 1. INSTITUTO TÉCNICO RICALDONEDEPARTAMENTO DE INFORMÁTICATECNOLOGÍAPERIODO:02/2013GUÍA DE LABORATORIO # 7NOMBRE DE LA PRACTICA: Validación de formularios con JavaScriptLUGAR DE EJECUCIÓN: Laboratorio #.TIEMPO ESTIMADO: 90 minutos.MATERIA: Tecnología.I. OBJETIVOS:Que el estudiante: Elabore formularios en HTML que sean validados con JavaScript. Implemente los conocimientos de programación en JavaScript para comprobar los datos escritos en unformulario.II. INTRODUCCIÓN TEÓRICA.Mediante esta guía vamos realizar un ejemplo de un formulario completo para validar. Las validaciones se hacen en elpropio navegador antes de enviarlo. Si hubo algún campo no relleno o con información errónea, el formulario muestra elcampo que está incorrecto y solicita al usuario que lo cambie. Si todos los datos del formulario son correctos se envía lainformación del formulario.Esquema de proceso de validación de un formulario desarrollado en HTML y comprobado con JavaScriptsIntroducir lainformaciónValidación delos camposEnvio de lainformación
  2. 2. Hemos querido hacer un formulario sencillo, para que el ejercicio no se haga demasiado complicado. No obstante, serealizan validaciones en campos con distintos valores, para hacerlo más variado. Se comprueba un campo donde debefigurar un texto, otro donde debe introducirse un número mayor que 18 y un último con un campo select donde debenhaber seleccionado un valor.El formulario con el que vamos a trabajar es el siguiente:A continuación el código que nos permitirá tener el formulario dicho anteriormente.12341) Validación de campo de texto para que nopermita enviar sin datos el nombre.2) En este campo debemos de poner la edad mayoro igual a 18 años.3) Debemos de seleccionar un interés para quepodamos enviar la información.4) Botón de envió de todos los datos delformulario.
  3. 3. Es un formulario cualquiera. Los únicos puntos donde debemos prestar atención son: El nombre del formulario, "fvalida", que utilizaremos para referirnos al él mediante Javascript. El botón de enviar, que en lugar de ser un submit corriente, es un botón que llama a una función, que se encargade validar el formulario y enviarlo si todo fue correcto.Función JavaScript para validar el formularioAhora veremos la función que hemos creado para validar el formulario. Se llama valida_envia(). Simplemente, para cadacampo del formulario, comprueba que el valor introducido es correcto. Si no es correcto, muestra un mensaje de alerta,pone el foco de la aplicación en el campo que ha dado el error y abandona la función retornando el valor 0.Si todos los campos eran correctos, la función continúa hasta el final, sin salirse, por no estar ningún campo incorrecto.Entonces ejecuta la sentencia última, que es el envío del formulario.Veamos la función por sección aunque notas las partes van relacionadas, se pone así para que se logre ver todo el códigoque se implementa.OJO: todo este código lo posicionaremos en el encabezado de la página es decir entre las etiquetas <head></head>
  4. 4. En el primer bloque se valida el campo nombre. La validación que se hace es simplemente si se ha escrito algo en elcampo. Para ello comprueba si el número de caracteres escritos en el campo nombre es cero. En ese caso, muestra elmensaje de alerta, sitúa el foco en el campo de texto y se sale de la función devolviendo el valor 0.La validación de la edad mayor que 18 años tiene dos partes. Primero debemos comprobar que en el campo de texto hayescrito un valor entero. Luego, si teníamos un entero, habría que comprobar que es mayor que 18.Antes de realizar la validación de la edad propiamente dicha, se obtiene el valor introducido en el campo de formularioedad y se guarda en una variable llamada edad. Luego se ejecuta la función pasando esta edad. Su resultado lo utilizamospara volcarlo otra vez al campo de texto. Entonces, se comprueba si el valor devuelto por la función es un string vacío. Enese caso, es que el valor escrito en el formulario no era un entero, por lo que se muestra el mensaje de error, se sitúa elfoco y se sale de la función.En caso de que el campo edad contuviese un entero, se debe comprobar a continuación si es mayor que 18. En caso deque sea menor, se muestra el error y se sale. En caso contrario -entonces el valor sería mayor o igual que 18-, se continúacon las comprobaciones.Por último se valida el campo select, donde aparece el interés del supuesto visitante, que le motiva para enviarnos elformulario. En ese campo se debe haber seleccionado cualquier opción menos la primera. Para asegurarnos, simplementese comprueba si el atributo selectedIndex del campo select tiene el valor 0. Ese atributo almacena el índice seleccionadoen el menú desplegable. El primer campo tiene el índice 0, el segundo el índice 1...Si se comprueba que selectedIndex vale 0, se muestra un mensaje de alerta, se pone el foco en el campo del formulario yse sale de la función.Si hemos llegado hasta este punto sin salirnos de la función es que todos los campos del formulario estaban rellenoscorrectamente. En ese caso se debe enviar el formulario. Antes de enviar el formulario se muestra un mensaje de alerta,agradeciendo que se haya rellenado correctamente. Este mensaje se puede suprimir si se desea.Para enviar el formulario se hace una llamada al método submit() de dicho formulario.Nota: el foco de la aplicación es el lugar donde está situado el cursor. El foco puede estar en cualquier sitio.Por ejemplo en un campo de texto, en un select, en un enlace o en la propia página. Si presionamos una tecladel teclado afecta al lugar donde está situado el foco. Si, por ejemplo, el foco está en un campo de texto, aloperar con el teclado estaremos escribiendo en ese campo de texto.
  5. 5. ConclusiónEste ejercicio es de lo más básico y útil que se puede hacer en JavaScript. Requiere ciertos conocimientos, ya ligeramenteavanzados, pero en el fondo no resulta complicado. Incluso ampliarlo es bastante sencillo, siempre que sigamos unesquema similar para cada uno de los campos.III. MATERIALES Y EQUIPO.Para la realización de la guía práctica se necesita lo siguiente:Nº Requerimiento Cantidad1 Guía de laboratorio Nº1. 12 Computadora con Windows instalado. 13 Tener instalado cualquier editor de texto(Notepad, Notepad++, Sublime Text2) 1IV. PROCEDIMIENTO.Indicaciones: de acuerdo a lo estudiando en la parte teórica se te propone los siguientes ejercicios, los cuales debes deanalizar y planificar antes de que procedas a plasmarlos en la computadora.Ejercicio #1La empresa X - Computer necesita en su página web la creación de un formulario de contactos el cual debe desolicitar la siguiente información:1) Nombre de la persona que se quiera contactar con ellos.2) Su correo electrónico.3) Un campo de edad en el que se valide que sea mayor de 18 años para que pueda enviar información.4) Tiene que establecer un campo de asunto donde solo puede seleccionar tres apartados los cuales son:pregunta, sugerencia o comentario.5) Debe de tener un área de texto donde podamos escribir el asunto.6) Por ultimo tener un botón para enviar la información y que en este mismo se valide todo el formulario.Nota: Para desarrollar este ejercicio tienes complementar el que está en la primera parte de esta guía,debido a que debes seguir el mismo patrón, recuerda analizarlo y planificarlo antes tomando la mismalógica del primero
  6. 6. Ejercicio #2La empresa X- RESTAURANTE necesita un formulario de registro de clientes el cual solicitara la siguiente información:a) El nombres de la persona.b) Apellidos.c) Fecha de nacimiento.d) País.(El Salvador, Guatemala, Honduras, CostaRica, Panamá)e) Ciudadf) Direccióng) Teléfono casah) Teléfono móvili) Estado civil.(Casado, Soltero, Viudo,Acompañado, Divorciado)j) Correo electrónico.A continuación nos ofrecen como debe de quedar organizado el formulario de forma gráfica.FORMULARIO DE REGISTRO DE CLIENTESNOMBRE: APELLIDOS:FECHA DE NACIMIENTO:DÍA MES AÑOPAÍS: CIUDAD:DIRECCIÓN:TELÉFONO DE CASA: TELÉFONO MÓVIL:ESTADO CIVIL:EMAIL:REGISTRAR

×