3. Instituto de Educación Superior Tecnológico Público
“Francisco de Paula Gonzales Vigíl” - Tacna
Computación e Informática Unidad Didáctica: Proyectos Web
1. VALIDACIÓN DE FORMULARIOS CON JAVASCRIPT
¿Qué es JavaScript?
JavaScript es un lenguaje de programación utilizado para crear páginas web dinámicas, que incorpora
efectos como textos que aparecen y desaparecen, animaciones, acciones que se activan al pulsar
botones y ventanas con mensajes de aviso al usuario.
Técnicamente, JavaScript es un lenguaje de programación interpretado, por lo que no es necesario
compilar los programas para ejecutarlos. En otras palabras, los programas escritos con JavaScript se
pueden probar directamente en cualquier navegador sin necesidad de procesos intermedios.
¿Qué es JavaScript?
La sintaxis de JavaScript es muy similar a la de otros lenguajes de programación como Java y C. Las
normas básicas que definen la sintaxis de JavaScript son las siguientes:
No se tienen en cuenta los espacios en blanco y las nuevas líneas
Se distinguen las mayúsculas y minúsculas
No se define el tipo de las variables
No es necesario terminar cada sentencia con el carácter de punto y coma (;)
Se pueden incluir comentarios
Evita depender del servidor Web para cálculos sencillos.
Capturar los eventos generados por el usuario y responder a ellos sin salir a Internet.
Simular el comportamiento de las macros CGI cuando no es posible usarlas.
Comprobar los datos que el usuario introduce en un formulario antes de enviarlos.
Comunicarse con el usuario mediante diversos métodos.
EJEMPLO 1 - Hola Mundo: ejem1-js.html EJEMPLO 3 – Última modificación: ejem3-js.html
<html><head>
<html> <title>Última modificación</title>
<head> <script type="text/javascript">
<title>El primer script</title> alert("Verficar la fecha !!!!");
<script type="text/javascript"> </script> </head>
Alert ("Hola Mundo!"); <body>
</script> <h2>Ejemplo de Fecha con JavaScript</h2>
</head> <br><br><br><br><br><br><br>
<body> <div align="center"> Última modificación:
<p>Esta página contiene un script usando <script language="javascript">
type</p> document.write(document.lastModified);
</body> </script>
</html> </div>
</body> </html>
EJEMPLO 2 - Hola Mundo: ejem2-js.html
<html> EJEMPLO 4 – Color de fondo: ejem4-js.html
<head> <html><head>
<title>El primer script</title> <title>Cambiando color de fondo</title></head>
</head> <body>
<body> Cambio de color de fondo
<p>Esta página contiene un script usando <br><br><br><br><br><br><br>
language</p> <script>
<script language="javascript"> alert("Ahora el fondo será color Rojo...");
Alert ("Hola Mundo!"); document.bgColor="#ff0000";
</script> </script>
</body> </div>
</html> </body>
</html>
Validación de formularios utilizando CSS y JavaScript
La validación de un formulario consiste en llamar a una función de validación cuando el usuario pulsa
sobre el botón de envío del formulario. En esta función, se comprueban si los valores que ha introducido
el usuario cumplen las restricciones impuestas por la aplicación.
Docente: Mgr. David Caipa Mamani Prac01 (3 de 6)
4. Instituto de Educación Superior Tecnológico Público
“Francisco de Paula Gonzales Vigíl” - Tacna
Computación e Informática Unidad Didáctica: Proyectos Web
EJEMPLO 5 - Validación de campo vacío en el Nombre: {
ejem5-js.html alert("no ha llenado todos los datos...");
return false;
<HTML><HEAD><TITLE>Ejemplo 5: Validación de campo }
vacío en el Nombre</TITLE> else
<STYLE type="text/css"> {
Body { return true;
background-color: #cccccc; }
} }
</STYLE> </SCRIPT></HEAD>
<SCRIPT> <BODY>
function validar (form1) <H1>Validación de Formularios</H1>
{
<FORM id="form1" name="form1" ACTION=""
if (document.form1.nombre.value=="" ) METHOD="POST" onsubmit="return validar()">
{ Nombre: <INPUT TYPE="text" NAME="nombre"><BR>
Alert ("Debe ingresar su Nombre…...."); Apellido: <INPUT TYPE="text" NAME="apellido"><BR>
return false; E-Mail:<INPUT TYPE="text" NAME="email" ><BR>
} Teléfono: <INPUT TYPE="text" NAME="telefono" ><BR>
else Comentario:<textarea NAME="comentario" cols="20"
{
rows="2" ></textarea><BR><BR>
return true;
<INPUT TYPE="submit"><INPUT TYPE="Reset">
}
</FORM></BODY></HTML>
}
</SCRIPT>
EJEMPLO 7 - Validar individualmente cada uno de los
</HEAD>
<BODY> campos de un formulario: ejem7-js.html
<H1>Validación de Formularios</H1> <HTML>
<FORM ID="form1" NAME="form1" ACTION="" <HEAD>
METHOD="POST" ONSUBMIT="return validar()"> <TITLE>Ejemplo 7: Validar individualmente cada campo
Nombre: <INPUT TYPE="text" NAME="nombre"><BR> </TITLE>
Apellido: <INPUT TYPE="text" NAME="apellido"><BR> <style type="text/css">
E-Mail:<INPUT TYPE="text" NAME="email" ><BR> body{
Teléfono: <INPUT TYPE="text" NAME="telefono" ><BR> background-color:#cccccc;
Comentario:<textarea NAME="comentario" cols="20" }
rows="2" ></textarea> <BR><BR> </style>
<INPUT TYPE="submit"><INPUT TYPE="Reset"> <script>
</FORM></BODY></HTML> function validar(form1)
{
EJEMPLO 6 - Validar todos los campos de un formulario: if (document.form1.nombre.value=="" )
ejem6-js.html {
<HTML> alert("Debe llenar su nombre...");
<HEAD> document.form1.nombre.focus();
<TITLE>Ejemplo 6: Validar todos lo campos del formulario return false;
</TITLE> }
<style type="text/css"> else if (document.form1.apellido.value=="")
body{ {
background-color:#cccccc; alert ("Debe llenar su apellido...");
} document.form1.apellido.focus();
</style> return false;
<SCRIPT> }
function validar(form1) else if (document.form1.email.value=="")
{ {
if (document.form1.nombre.value=="" || alert ("Debe llenar su correo electrónico...");
document.form1.apellido.value=="" || document.form1.email.focus();
document.form1.email.value=="" || return false;
document.form1.telefono.value=="" || }
document.form1.comentario.value=="") else if (document.form1.telefono.value=="")
Docente: Mgr. David Caipa Mamani Prac01 (4 de 6)
5. Instituto de Educación Superior Tecnológico Público
“Francisco de Paula Gonzales Vigíl” - Tacna
Computación e Informática Unidad Didáctica: Proyectos Web
{ {
alert ("Debe llenar su teléfono..."); alert("Debe ingresar sólo números en el
document.form1.telefono.focus(); campo teléfono..");
return false; document.form1.telefono.focus();
} return false;
else if (document.form1.comentario.value=="") }
{ else
alert ("Debe escribir un comentario..."); {
document.form1.comentario.focus(); alert("Envío satisfactorio de teléfono...");
return false; return true;
} }
else }
{ </script>
alert("Envío satisfactorio..."); <BODY>
return true; <H1>Validación de Formularios</H1>
} <FORM id="form1" name="form1" action=""
} method="post" onsubmit="return validar()">
</script> Nombre: <INPUT TYPE="text" NAME="nombre"><BR>
</HEAD> Apellido: <INPUT TYPE="text" NAME="apellido"><BR>
<BODY> E-Mail:<INPUT TYPE="text" NAME="email" ><BR>
<H1>Validación de Formularios</H1> Teléfono: <INPUT TYPE="text" NAME="telefono" ><BR>
<FORM id="form1" name="form1" action=" " Comentario:<textarea NAME="comentario" cols="20"
method="post" onsubmit="return validar()"> rows="2" ></textarea><BR><BR>
Nombre: <INPUT TYPE="text" NAME="nombre"><BR> <INPUT TYPE="submit" VALUE="Enviar">
Apellido: <INPUT TYPE="text" NAME="apellido"><BR> <INPUT TYPE="Reset" value="Limpiar">
E-Mail:<INPUT TYPE="text" NAME="email" ><BR> </FORM>
Teléfono: <INPUT TYPE="text" NAME="telefono" ><BR> </BODY>
Comentario:<textarea NAME="comentario" cols="20" </HTML>
rows="2" ></textarea><BR><BR>
<INPUT TYPE="submit" VALUE="Enviar"><INPUT TAREA:
TYPE="Reset" value="Limpiar"> Ubicar cada uno de los
</FORM></BODY></HTML> campos en una tabla
EJEMPLO 8 - Validar el campo Teléfono: ejem8-js.html EJEMPLO 9 - Validar el campo E-Mail: ejem9-js.html
<HTML>
<HTML>
<HEAD><TITLE>Ejemplo 8: Validación de números en el
<HEAD>
teléfono</TITLE>
<TITLE>Ejemplo 9: Validación de E-Mail</TITLE>
<style type="text/css">
<style type="text/css">
body{
body{
background-color:#ffcc00;
background-color:#ffcc00;
}
}
</style>
</style>
</HEAD>
<script>
<script>
function validar(form1)
function validar(form1)
{
{
var ok="no";
var ok="yes";
var temp;
var temp;
var valid="@";
var valid="0123456789";
var valor2=document.form1.email.value;
var valor2=document.form1.telefono.value;
for (var i=0; i<valor2.length; i++)
for (var i=0; i<valor2.length; i++)
{
{
temp=""+valor2.substring(i,i+1);
temp=""+valor2.substring(i,i+1);
if (valid.indexOf(temp)!= "-1")
if (valid.indexOf (temp)== "-1")
ok="yes";
ok="no";
}
}
if (ok=="no")
Docente: Mgr. David Caipa Mamani Prac01 (5 de 6)
6. Instituto de Educación Superior Tecnológico Público
“Francisco de Paula Gonzales Vigíl” - Tacna
Computación e Informática Unidad Didáctica: Proyectos Web
if (ok=="no") if (nombre.length==0 )
{ {
alert("Debe ingresar un E-Mail correcto .........."); alert ("Debe ingresar un Nombre…....");
document.form1.email.focus(); return false;
return false; }
} else
else {
{ if(correo.length==0)
alert("Envío satisfactorio de E-Mail..."); {
return true; alert ("Debe ingresar un E-Mail…....");
} return false;
} }
</script> else
</HEAD> {
<BODY> return true;
<H1>Validación de Formularios</H1> }
<table width="349" border="2"> }
<FORM id="form1" name="form1" ACTION="" }
METHOD="POST" onsubmit="return validar()"> </SCRIPT>
<tr> </HEAD>
<td height="30">E-Mail:</td> <BODY>
<td><INPUT TYPE="text" NAME="email" ></td> <H1>Validación de Formularios con varibles... y el
</tr> resultado en otra Página</H1>
<tr> <FORM ID="form1" NAME="form1" METHOD="POST"
<td height="32"><INPUT TYPE="submit" ONSUBMIT="return validar()" ACTION="resultado.html">
VALUE="Enviar"></td> Nombre: <INPUT TYPE="text" NAME="txtnombre"><BR>
<td><INPUT TYPE="Reset" value="Limpiar"></td> E-Mail:<INPUT TYPE="text" NAME="txtemail" ><BR>
</tr> <INPUT TYPE="submit" value="Enviar"><INPUT
</table> TYPE="Reset" value="Limpiar">
</FORM> </FORM>
</BODY> </BODY>
</HTML> </HTML>
EJEMPLO 10 - Validar con variables: ejem10-js.html resultado.html
<HTML> <html>
<HEAD> <head>
<TITLE>Validación de formularios con variables</TITLE> <title> Resultado</title>
<SCRIPT Type="text/javascript"> </head>
function validar () <body>
{ <h2>Página de Resultado... Envió correcto de datos</h2>
nombre=document.form1.txtnombre.value; </body>
correo=document.form1.txtemail.value; </html>
Docente: Mgr. David Caipa Mamani Prac01 (6 de 6)
