JAVASCRIPT: Formularios

Post sobtr formularios en Javascript








La aparición de Javascript en la programación web fue motivada, en parte, por la necesidad de incluir un mecanismo de control sobre los formularios directamente en el lado del cliente para evitar cargar en exceso el servidor, liberándolo además de esas tareas.

Un formulario HTML permite recolectar información proporcionada directamente por el usuario que visita nuestra página.El tipo de información que se puede recoger es muy variada, siendo desde datos personales hasta una lista de regalos para navidad. Gracias a Javascript estos formularios se hacen dinámicos con la posibilidad de trabajar, acceder y validar los datos introducidos.

El objeto form

Este objeto es el contenedor de todos los elementos del formulario. Como ya vimos al tratar el objeto document, los formularios se agrupan en un array dentro de document. Cada elemento de este array es un objeto de tipo form.

Propiedades

  • action. Es una cadena que contiene la URL del parámetro ACTION del form, es decir, la dirección en la que los datos del formulario serán procesados.
  • elements. Es un array que contiene todos los elementos del formulario, en el mismo orden en el que se definen en el documento HTML. Por ejemplo, si en el formulario hemos puesto, en este orden, una caja de texto, un checkbox y una lista de selección, la caja de texto será elements[0], el checkbox será elements[1] y la lista de selección será elements[2].
  • encoding. Es una cadena que tiene la codificación mime especificada en el parámetro ENCTYPE del form.
  • method. Es una cadena que tiene el nombre del método con el que se va a recibir/procesar la información del formulario (GET/POST).

Métodos

  • reset(). Resetea el formulario: tiene el mismo efecto que si pulsáramos un botón de tipo RESET dispuesto en el form.
  • submit(). Envía el formulario: tiene el mismo efecto que si pulsáramos un botón de tipo SUBMIT dispuesto en el form.

¿Cómo validar formularios en Javascript (código)?

En primer lugar, se crea el formulario de manera normal, usando las etiquetas HTML convencionales. El siguiente ejemplo 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.

<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>

A continuación se presenta el código de dicha función validar(formulario).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.

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);
}

Este post se podría alargar en varias partes,  ya que el concepto de formulario en Javascript es  muy importante además de extenso  pero el objetivo es dar una información eficaz y concreta para identificar y luego profundizar en cada concepto y para ello, os adjunto en la bibliografía o más info con los recursos más útiles

Más info:

Un recurso que nunca puede faltar y donde puedes encontrar la mejor información sobre javascript, es en la web de desarrollo web:
http://www.desarrolloweb.com/manuales/50/
También puedes encontrar más info en:
Libros web: http://www.librosweb.es/javascript/capitulo7/utilidades_basicas_para_formularios.html
Ejemplos de script y códigos en: http://www.elcodigo.net/cgi-bin/DBread.cgi?tabla=scripts&campo=5&clave=1×3

Post: Diana Redondo

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s