Criptonomicón

Suscripción gratis

Susurros

Ariadn@

¿Intimidad?

Artículos

Seguridad

Acceso a BD

Autenticación

Comercio-e

Linux

Navegación segura

Control de acceso

CGI

Java

JavaScript

Cookies

Crashes

Agujeros

Spam

Remailers

Anonimato

Correo seguro

Web seguro

Consejos prácticos

Referencias

Libro de Visitas

Curso de JavaScript

Validar formularios

Añadir JavaScript a una página 

Abrir y cerrar ventanas 

Escribir en la ventana actual 

Validar formularios 

Cambiar imágenes dinámicamente 

Cálculos matemáticos 

Cookies 

La barra de estado 

Menú de navegación 

Los formularios representan una forma rápida y eficaz de enviar información desde el ordenador del usuario hasta el servidor web. Generalmente, constan de varios campos de texto, botones de selección y listas desplegables, que el usuario rellena convenientemente y transmite al servidor pulsando finalmente en un botón de envío. A menudo, muchos de los campos que el usuario debe completar obedecen a un formato determinado, por lo que conviene que el usuario los rellene correctamente para evitar errores al procesar en el servidor los datos recibidos. JavaScript constituye una manera muy conveniente de trasladar esta labor de validación de la información al ordenador del cliente, descargando así al servidor de esta tarea.

En JavaScript, los formularios son objetos form, que dependen a su vez del objeto document. Cuando se crea el formulario utilizando la etiqueta <FORM> de HTML, conviene darle un nombre para poder referenciarlo cómodamente más adelante desde funciones de JavaScript. Asimismo, todos los elementos del formulario, botones, cuadros de texto, listas, etc., deberían ser nombrados por la misma razón. JavaScript se añade a los elementos convencionales del formulario en la forma de gestores de eventos.

En primer lugar, se crea el formulario de manera normal, usando las etiquetas HTML convencionales. En la página de ejemplo aparece el formulario cuyo código se lista a continuación:

<form method = "POST" name = "registro" onSubmit = "return validar(this)" action = "formularios.asp">
Nombre: <input type="text" name="nombre" size="20">
Edad: <input type="text" name="edad" size="2">
Dirección de correo: <input type="text" name="correo" size="20">
<input type="submit" value="Enviar datos" name="enviar">
</form>

que consta de tres campos de entrada y un botón para enviar los datos. Se ha añadido el evento onSubmit, que se produce cuando el usuario pulsa el botón Enviar datos, de manera que se invoca a la función validar antes de transmitir nada. El argumento que toma es this, es decir, el propio formulario. A continuación se presenta el código de dicha función:

function validar(formulario) {
  if (formulario.nombre.value.length < 4) {
    alert("Escriba por lo menos 4 caracteres en el campo \"Nombre\".");
    formulario.nombre.focus();
    return (false);
  }
  var checkOK = "ABCDEFGHIJKLMNÑOPQRSTUVWXYZÁÉÍÓÚ" + "abcdefghijklmnñopqrstuvwxyzáéíóú ";
  var checkStr = formulario.nombre.value;
  var allValid = true;
  for (i = 0; i < checkStr.length; i++) {
    ch = checkStr.charAt(i);
    for (j = 0; j < checkOK.length; j++)
      if (ch == checkOK.charAt(j))
        break;
    if (j == checkOK.length) {
      allValid = false;
      break;
    }
  }
  if (!allValid) {
    alert("Escriba sólo letras en el campo \"Nombre\".");
    formulario.nombre.focus();
    return (false);
  }
  var checkOK = "0123456789";
  var checkStr = formulario.edad.value;
  var allValid = true;
  var decPoints = 0;
  var allNum = "";
  for (i = 0; i < checkStr.length; i++) {
    ch = checkStr.charAt(i);
    for (j = 0; j < checkOK.length; j++)
      if (ch == checkOK.charAt(j))
        break;
    if (j == checkOK.length) {
      allValid = false;
      break;
    }
    allNum += ch;
  }
  if (!allValid) {
    alert("Escriba sólo dígitos en el campo \"Edad\".");
    formulario.edad.focus();
    return (false);
  }
  var chkVal = allNum;
  var prsVal = parseInt(allNum);
  if (chkVal != "" && !(prsVal >= "18" && prsVal <= "30")) {
    alert("Escriba un valor mayor o igual que 18 y menor o igual que 30 en el campo \"Edad\".");
    formulario.edad.focus();
    return (false);
  }
  if ((formulario.correo.value.indexOf ('@', 0) == -1)||(formulario.correo.value.length < 5)) {
    alert("Escriba una dirección de correo válida en el campo \"Dirección de correo\".");
    return (false);
  }
  return (true);
}

Esta función realiza las siguientes comprobaciones:

  1. La longitud del nombre es mayor de cuatro caracteres.
  2. El nombre sólo contiene caracteres del alfabeto español, no contiene números ni caracteres no alfanuméricos.
  3. La edad sólo contiene números.
  4. El valor de la edad está comprendido entre 18 y 30.
  5. La dirección de correo incluye una arroba y su longitud es superior a cinco caracteres.

 

Copyright © 1997-2000 Gonzalo Álvarez Marañón, CSIC. Todos los derechos reservados.

Criptonomicón es un servicio ofrecido libremente desde el Instituto de Física Aplicada del CSIC. Para información sobre privacidad, por favor consulte la declaración de política sobre privacidad. Para sugerencias, comentarios o quejas, acuda al libro de visitas. Para contribuir al Criptonomicón, lea la página de contribuciones.

.