Proyecto: JavaScript: validación de formularios

Resumen

Aprender el lenguaje de programación JavaScript. Aprender a manejar el DOM de una página web para acceder a su contenido. Aprender a validar un formulario con el lenguaje de programación JavaScript.

Contenido

  1. Objetivos
  2. ¿Qué tengo que hacer?
  3. ¿Cómo lo hago?
  4. Recomendaciones
  5. Recursos

Objetivos


¿Qué tengo que hacer?

En esta práctica tienes que emplear JavaScript para validar los formularios que has realizado en las prácticas anteriores. En concreto, tienes que programar las siguientes restricciones (validaciones):

Página principal Contiene un formulario (nombre de usuario y contraseña) para acceder como usuario registrado. Antes de enviar el formulario, debes comprobar que el usuario ha escrito algo en ambos campos, pero evita que el usuario escriba únicamente espacios en blanco o tabuladores.

Página con el formulario de registro como nuevo usuario Contiene un formulario con los datos necesarios para registrarse (nombre de usuario, contraseña, repetir contraseña, dirección de email, sexo, fecha de nacimiento, ciudad y país de residencia, foto). Antes de enviar el formulario, debes realizar las siguientes comprobaciones:


¿Cómo lo hago?

JavaScript es un lenguaje de script que comparte la misma sintaxis básica que los lenguajes de programación C, C++ y Java. El código de JavaScript se puede incluir de tres formas en una página web:

Por ejemplo, la siguiente página web contiene dos líneas de código JavaScript que se ejecutan automáticamente al cargar la página web; el atributo type de la etiqueta <script> indica el lenguaje de programación empleado en el código de script:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>Prueba de JavaScript</title>
<script type="text/javascript">
<!--
window.alert("Mensaje 1");
alert("Mensaje 2");
// -->
</script>
</head>
<body>
<p>
Una página web sencilla.
</p>
</body>
</html>

En el ejemplo anterior, el código JavaScript está encerrado en un comentario de HTML para que no sea interpretado por aquellos navegadores que no reconocen JavaScript. Además, la llamada al método alert() que muestra un cuadro de diálogo con un mensaje se realiza de dos formas equivalentes: a través del objeto window y directamente.

Para realizar la validación de formularios lo más correcto es emplear expresiones regulares, pero eso lo haremos en la próxima práctica. En esta práctica no tienes que utilizar expresiones regulares.

Ahora tienes que programar para cada situación el algoritmo de validación apropiado.

Existen varias formas de acceder a un formulario a través del DOM (existe alguna forma más que se empleará en la próxima práctica):

Una vez que se ha seleccionado un formulario, existen varias formas de acceder a los campos que contiene (formu es un objeto que representa un formulario concreto):

Una vez que se ha seleccionado un campo, se tiene que consultar la propiedad value para obtener el valor que almacena en un instante concreto.

Importante: este es el método tradicional de acceder al contenido de un formulario, en una próxima práctica veremos el método actual que emplea document.getElementById().

En el siguiente ejemplo hay un formulario que contiene tres campos de texto para escribir el nombre de tres jugadores, el formulario no se puede enviar si no se han escrito los tres nombres:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Validación un formulario</title>
<script type="text/javascript">
function valida(f) {
  var ok = true;
  var msg = "Debes escribir algo en los campos:\n";
  if(f.elements[0].value == "")
  {
    msg += "- Jugador 1\n";
    ok = false;
  }

  if(f.elements["jugador2"].value == "")
  {
    msg += "- Jugador 2\n";
    ok = false;
  }

  if(f.jugador3.value == "")
  {
    msg += "- Jugador 3\n";
    ok = false;
  }

  if(ok == false)
    alert(msg);
  return ok;
}
</script>
</head>
<body>
<form id="miForm" action="" method="get" onsubmit="return valida(this)">
<p>
Jugador 1: <input type="text" id="jugador1" />
<br />
Jugador 2: <input type="text" id="jugador2" />
<br />
Jugador 3: <input type="text" id="jugador3" />
<br />
<input type="submit" value="Enviar" />
<input type="reset" value="Borrar" />
</p>
</form>
</body>
</html>

En el ejemplo anterior, cuando se llama a la función valida() desde el evento onsubmit se le pasa como valor del parámetro this, que es un objeto que representa al formulario desde el que se invoca al método. En este ejemplo, se ha empleado el atributo id en vez del atributo name para identificar cada elemento, ya que estamos utilizando la versión Strict de XHTML 1.0, que no permite el empleo del atributo name en la etiqueta <form>.

La función valida() debe devolver true o false según la validación haya sido correcta o haya fallado. Este valor debe ser devuelto al navegador: el valor true significa "continúa y envía el formulario al servidor", mientras que false significa "cancela y no envíes el formulario". Por ello, en el código se debe escribir onsubmit="return valida(this)" para reenviar el valor devuelto al navegador.


Recomendaciones

Cuanta mayor separación haya entre las distintas partes que componen una página web (HTML, CSS y JavaScript) mucho mejor. Por ello, el código de JavaScript escríbelo en un fichero a parte e inclúyelo en aquellas páginas donde lo necesites con la etiqueta <script src=""></script>.

En el sitio web W3Schools puedes encontrar el apartado JavaScript Form Validation que explica algunos tipos de validación sencilla de un formulario. Además de esta página existen muchas otras más como:

Para manipular las cadenas en JavaScript existe el objeto String. Consulta la página JavaScript String Object Reference en W3Schools para conocer los métodos y propiedades que posee este objeto. Algunos métodos que puedes necesitar son:

Para trabajar con fechas en JavaScript existe el objeto Date. Consulta la página JavaScript Date Object Reference en W3Schools para conocer los métodos y propiedades que posee este objeto. Algunos métodos que puedes necesitar son:

El objeto Date se puede emplear para validar una fecha introducida por el usuario. ¿Cómo? Utiliza la fecha introducida por el usuario para crear un objeto de tipo Date y compara la fecha introducida con los valores que devuelve el objeto.

Cuando una página contiene un error de JavaScript, los navegadores suelen informar de alguna manera al usuario. Por ejemplo, la siguiente página contiene un error, ya que el bloque de código de la función prueba() no está cerrado (falta una llave).

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>Prueba de JavaScript</title>
<script type="text/javascript">
function prueba() {
  window.alert("Mensaje 1");
  alert("Mensaje 2");
  
  return false;
</script>
</head>
<body>
<p>
Un texto. Pulsa <a href="#" onclick="return prueba()">aquí</a>
para ejecutar la función.
</p>
</body>
</html>

En el navegador Mozilla Firefox existe en el menú Herramientas la opción Consola de errores que muestra la ventana que se puede ver en la Figura 1. En esta ventana se pueden consultar los errores de JavaScript (y de otro tipo, como CSS) que contenga una página web. En este ejemplo aparecen dos mensajes de error, uno por la llave que falta en el código y otro al haber pulsado el enlace, ya que al haber un error en el código no se ha definido la función prueba().

Figura 1: Consola de errores en Mozilla Firefox

En el navegador Microsoft Internet Explorer, cuando una página contiene un error de JavaScript aparece un icono en forma de triángulo y el mensaje Error en la página en la parte izquierda de la barra de estado del navegador, tal como se puede ver en la Figura 2. Al pulsar sobre el icono dos veces, se muestra una ventana donde se especifica la localización y el tipo de error.

Figura 2: Ventana de errores en Microsoft Internet Explorer

Recursos

¿Cuál es la sintaxis de JavaScript? ¿Qué palabras clave existen?

¿Cómo puedo comprobar que el código que escribo es correcto?

¿Cómo puedo esconder mi código JavaScript? No se puede, pero puedes emplear un "ofuscador" para ponérselo difícil al que quiera copiar tu código. Estas herramientas también sirven para comprimir el código JavaScript y reducir su tiempo de descarga.