You are on page 1of 4

UNIVERSIDAD TÉCNICA DE AMBATO

ESPECIALIZACIÓN EN DISEÑO Y ANIMACIÓN WEB MÓDULO JAVA SCRIPT
INTEGRANTES: • ADRIANA SOLIS • JENNY PUJOS • CRISTIAN PAEZ

TEMA: Ejercicio de Aplicación OBJETIVOS: • • • Poner en práctica los conocimientos adquiridos en clase en cuanto a validación de datos en el cliente. Utilizar funciónes para las validaciones respectivos Utilización de Formularios para estructurar de manera ordenada y organizada la información. CONCEPTUALIZACIÓN VALIDACIÓN DE DATOS EN JAVA SCRIPT Una de las grandes aportaciones de JavaScript a la creación de interfaces web es la posibilidad de acceder al contenido de los campos de los formularios para realizar acciones sobre los valores introducidos por el usuario, modificarlos y, en última instancia, validarlos. La validación de los datos de un formulario mediante scripts JavaScript no sustituye a la validación que debe realizarse, por motivos de seguridad, en la aplicación del servidor que recibe la información. Sin embargo, al añadir una validación local con JavaScript, la experiencia de usuario mejora notablemente, al no ser necesario enviar los datos al servidor y esperar su respuesta para obtener sólo un mensaje informando de la incorrección de la información suministrada. Resulta frustrante cumplimentar un formulario, pulsar el botón enviar, y esperar 30 o 40 segundos para saber que hemos introducido mal un campo. JavaScript, desde sus comienzos, introdujo los mecanismos necesarios para validar campos de formulario. Estas son algunas de las validaciones típicas: • • • • Comprobar que se han suministrado todos los campos obligatorios Comprobar que el formato de un campo es el esperado (fechas, teléfonos, etc.) Comprobar la validez (sintáctica) de las direcciones de correo y URLs Comprobar que no se sobrepasa la longitud, número de líneas o tamaño de la entrada

CÓDIGO HTML Y JAVA SCRIPT
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN'> <html>

UNIVERSIDAD TÉCNICA DE AMBATO
ESPECIALIZACIÓN EN DISEÑO Y ANIMACIÓN WEB MÓDULO JAVA SCRIPT
<head> <title>Validaciones</title> </head> <body> <script language=javascript> function validarFormulario(){ var isNotOk; //validación nombre var nombre = window.document.formValidar.nombre.value; if (nombre=='') { document.getElementById('name').style.display='inline'; //window.document.formValidar.nombre.focus(); //return 0; isNotOk=true; } else{ document.getElementById('name').style.display='none'; } //validación apellido var apellido = window.document.formValidar.apellido.value; if (apellido==''){ document.getElementById('lastName').style.display='inline'; //window.document.formValidar.apellido.focus(); //return 0; isNotOk=true; } else{ document.getElementById('lastName').style.display='none'; } //validación calle var calle = window.document.formValidar.calle.value; if (calle==''){ document.getElementById('street').style.display='inline'; //window.document.formValidar.calle.focus(); //return 0; isNotOk=true; } else{ document.getElementById('street').style.display='none'; } INTEGRANTES: • ADRIANA SOLIS • JENNY PUJOS • CRISTIAN PAEZ

UNIVERSIDAD TÉCNICA DE AMBATO
ESPECIALIZACIÓN EN DISEÑO Y ANIMACIÓN WEB MÓDULO JAVA SCRIPT
INTEGRANTES: • ADRIANA SOLIS • JENNY PUJOS • CRISTIAN PAEZ

//validación nro de calle var numero; numero= window.document.formValidar.numero.value; if (isNaN(numero) || (numero=='')){ document.getElementById('number').style.display='inline'; //window.document.formValidar.numero.focus(); //return 0; isNotOk=true; } else{ document.getElementById('number').style.display='none'; } if (isNotOk){ return 0; } else{ window.document.formValidar.submit(); } } </script> <form name='formValidar' > <table> <tr> <td>Nombre:</td> <td> <input type=text name='nombre' maxlength=20></td> <td> <div id='name' style='display:none; color:red'>&nbsp;Nombre inválido</div> </td> </tr> <tr> <td>Apellido:</td> <td> <input type=text name='apellido' maxlength=20></td> <td> <div id='lastName' style='display:none; color:red'>&nbsp;Apellido inválido</div> </td> </tr> <tr> <td>Direccion:</td> <td> <input type=text name='calle' maxlength=20></td> <td>

UNIVERSIDAD TÉCNICA DE AMBATO
ESPECIALIZACIÓN EN DISEÑO Y ANIMACIÓN WEB MÓDULO JAVA SCRIPT
INTEGRANTES: • ADRIANA SOLIS • JENNY PUJOS • CRISTIAN PAEZ

<div id='street' style='display:none; color:red'>&nbsp;Calle inválida</div> </td> </tr> <tr> <td>Telefono:</td> <td> <input type=text name='numero' maxlength=5 ></td> <td> <div id='number' style='display:none; color:red'>&nbsp;Número inválido</div> </td> </tr> <tr><td> <input type=button value=Enviar onclick='validarFormulario()'> </tr></td> </table> </form> </body> </html>

CONCLUSIONES • Mediante la validacioón de datos se puede la información que se va guardar en la Base de datos ofreciendo de una manera más segura que la información a almacenar sea coherente y correcta. • Además Java Script permite ejecutarse en el cliente simplificando de manera eficiente la detección de errores generados producto de información incoherente e incorrecta. RECOMENDACIONES

Tomar en cuenta que datos son los que se debe validar, utilizar bien la sintaxis de Java Script para que no se genere ningun error. Poner en práctica los conocimientos adquiridos en clase para de esta manera perfeccionar las validacione srespectivas.

BIBLIOGRAFÍA:

Documentación emitida por la Ing. Maritzol Tenemaza Clase 2 y 3

INTERNET
• •

http://www.elcodigo.net/tutoriales/jsavanzado/jsavanzado13.html http://www.elcodigo.net/cgi-bin/DBread.cgi?tabla=scripts&campo=0&clave=63&info=1