Portada › Javascript › Validar formularios en Javascript

Inicio de sesión

RSS

Distribuir contenido

En línea

En este momento hay 1 usuario y 1 invitado en línea.

Validar formularios en Javascript

Fecha: 
16.10.2007 - 21:58

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

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.
Autor
Nombre: 
Gonzalo Álvarez Marañón
Sitio Web: 
http://www.iec.csic.es
Marcar/Buscar este post con:
  • Delicious
  • Digg
  • Reddit
  • Ma.gnolia.com
  • Newsvine
  • Furl
  • Facebook
  • Google
  • Yahoo
  • Technorati
  • Icerocket

Enviar un comentario nuevo

El contenido de este campo se mantiene como privado y no se muestra públicamente.
  • Las direcciones de las páginas web y las de correo se convierten en enlaces automáticamente.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <i> <b> <h2> <h3> <tt> <blockcode>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>. Beside the tag style "<foo>" it is also possible to use "[foo]". PHP source code can also be enclosed in <?php ... ?> or <% ... %>.
  • Saltos automáticos de líneas y de párrafos.
  • Every instance heading tags will be modified to include an id attribute for anchor linking.
  • Se pueden agregar imágenes a este envío.
  • Every instance of "<!--tableofcontents-->" in the input text will be replaced with a collapsible mediawiki-style table of contents. Accepts options for title, list style, minimum heading level, and maximum heading level as follows: <!--tableofcontents list: ol; title: Table of Contents; minlevel: 1; maxlevel: 3;-->. All arguments are optional and defaults are shown.

Más información sobre opciones de formato


Publicidad