Introducción a Javascript: Formularios

INTRODUCCIÓN A JAVASCRIPT
III
FORMULARIOS

Una de las principales razones por las que se inventó el
lenguaje de programación JavaScript fue la necesidad de
validar los datos de los formularios directamente en el
navegador del usuario.
De esta forma, se evitaba recargar la página cuando el
usuario cometía errores al rellenar los formularios

Propiedades básicas de formularios y
elementos
cuando se carga una página web, el navegador crea
automáticamente un array llamado forms y que contiene
la referencia a todos los formularios de la página.
Para acceder al array forms, se utiliza el objeto
document, por lo que document.forms es el array que
contiene todos los formularios de la página.
document.forms[0]; accede al primer formulario de
la página

• Además del array de formularios, el navegador crea automáticamente un
array llamado elements por cada uno de los formularios de la página.
• Cada array elements contiene la referencia a todos los elementos (cuadros
de texto, botones, listas desplegables, etc.) de ese formulario.
• Utilizando la sintaxis de los arrays, la siguiente instrucción obtiene el primer
elemento del primer formulario de la página:
document.forms[0].elements[0];
• El siguiente ejemplo muestra cómo obtener directamente el último elemento
del primer formulario de la página:
document.forms[0].elements[document.forms[0].elements.length-1];

• En un entorno tan cambiante como el diseño web, es
muy difícil confiar en que el orden de los formularios se
mantenga estable en una página web.
• Por este motivo, siempre debería evitarse el acceso a
los formularios de una página mediante el array
document.forms.
• Es más recomendable acceder a los formularios de una
página a través de su nombre (atributo name) o a
través de su atributo id.
• El objeto document permite acceder directamente a
cualquier formulario mediante su atributo name:
var formularioPrincipal = document.formulario;
var formularioSecundario = document.otro_formulario;

Los elementos de los formularios también se pueden acceder
directamente mediante su atributo name:

También se puede acceder a los formularios y a sus elementos utilizando
las funciones DOM de acceso directo a los nodos.
El siguiente ejemplo utiliza la habitual función
document.getElementById() para acceder de forma directa a un
formulario y a uno de sus elementos:

Cada elemento del formulario dispone de las siguientes propiedades útiles :
• type: indica el tipo de elemento que se trata.
• form: es una referencia directa al formulario al que pertenece
el elemento.
• name: obtiene el valor del atributo name de XHTML. Solamente
se puede leer su valor, por lo que no se puede modificar.
• value: permite leer y modificar el valor del atributo value de
XHTML.

Los eventos más utilizados en el manejo de los formularios son los siguientes:
• onclick: evento que se produce cuando se pincha con el ratón sobre
un elemento.
• onchange: evento que se produce cuando el usuario cambia el valor
de un elemento de texto. También se produce cuando el usuario
selecciona una opción en una lista desplegable (<select>).
• onfocus: evento que se produce cuando el usuario selecciona un
elemento del formulario.
• onblur: evento complementario de onfocus, ya que se produce
cuando el usuario ha deseleccionado un elemento por haber
seleccionado otro

Obtener el valor de los campos de formulario
Cuadro de texto y textarea

Radiobutton
Ejemplo

Checkbox
Ejemplo

Select
Ejemplo
• Lo que se requiere es obtener el valor del atributo value de la opción
(<option>) seleccionada por el usuario.
• Para obtener el valor seleccionado, deben utilizarse las siguientes
propiedades:
• options, es un array creado automáticamente por el navegador para
cada lista desplegable y que contiene la referencia a todas las opciones
de esa lista. De esta forma, la primera opción de una lista se puede
obtener mediante
document.getElementById("id_de_la_lista").options[0].
• selectedIndex, cuando el usuario selecciona una opción, el navegador
actualiza automáticamente el valor de esta propiedad, que guarda el
índice de la opción seleccionada. El índice hace referencia al array
options creado automáticamente por el navegador para cada lista.

Select
• Lo más importante es no confundir el valor de la propiedad
selectedIndex con el valor correspondiente a la propiedad value de la
opción seleccionada.
• En el ejemplo anterior, la primera opción tiene un value igual a 1.
• Sin embargo, si se selecciona esta opción, el valor de selectedIndex será
0, ya que es la primera opción del array options (y los arrays empiezan a
contar los elementos en el número 0).

Establecer el foco en un elemento
Para asignar el foco a un elemento de XHTML, se utiliza la función
focus().
El siguiente ejemplo asigna el foco a un elemento de formulario
cuyo atributo id es igual a primero:

Evitar el envío duplicado de un formulario
Una buena práctica en el diseño de aplicaciones web suele ser
la de deshabilitar el botón de envío después de la primera
pulsación. El siguiente ejemplo muestra el código necesario:
Ejemplo
El botón del ejemplo anterior está definido mediante un botón de tipo
<input type="button" />, ya que el código JavaScript mostrado no funciona
correctamente con un botón de tipo <input type="submit" />.
Si se utiliza un botón de tipo submit, el botón se deshabilita antes de enviar
el formulario y por tanto el formulario acaba sin enviarse.

Validación de Usuario y Passwords
• Antes de HTML5, era común usar Javascript para validar campos
requeridos, mail, números, números de documento, etc.
• Con HTML5 podemos diseñar elementos de formulario que se validen en
forma nativa ahorrando mucho trabajo.
• Sin embargo, la validación de las contraseñas aún no se ha establecido
de forma nativa, por tanto es importante ver como hacerlo usando
funciones javascript de acuerdo a nuestros requerimientos.
• Creemos un formulario de esta forma para nuestro ejemplo:
<form ... onsubmit="return checkForm(this);">
<p>Username: <input type="text" name="username"></p>
<p>Password: <input type="password" name="pwd1"></p>
<p>Confirm Password: <input type="password"
name="pwd2"></p>
<p><input type="submit"></p>
</form>

• El método test():
• Es un método muy útil para buscar patrones en una cadena.
• Devuelve un valor Boolean que indica si existe o no un patrón en una
cadena de búsqueda.
• El método test comprueba si existe un patrón dentro de una cadena:
devuelve true si existe y false de lo contrario.
• El método test no modifica las propiedades del objeto RegExp global.
• Sintaxis: rgExp.test(str)
• Parámetros:
rgExp: Obligatorio. Instancia de un objeto Regular Expression que
contiene el patrón de expresión regular y las marcas aplicables.
Str: Obligatorio. Cadena en la que se va a buscar.

• Evitar usuarios en blanco:
if(form.username.value == "") {
alert("Error: El usuario no puede estar en blanco!");
form.username.focus();
return false;
}

• Evitar usuarios con caracteres especiales (/^w+$/):
re = /^w+$/;
if (!re.test (form.username.value)) {
alert("Error: Usuario solo puede contener XXX caracteres!");
form.username.focus();
return false;
}

• Controlar que coincidan los passwords
if(form.pwd1.value != "" && form.pwd1.value ==
form.pwd2.value) {
//Anidado dentro debe ir el resto de validaciones
}

• Que el password tenga más de 6 caracteres:
if(form.pwd1.value.length < 6) {
alert("Error: …Más de 6 caracteres!");
form.pwd1.focus();
return false;
}

• Que el password sea diferente del nombre de usuario:
if(form.pwd1.value == form.username.value) {
alert("Error: …diferente de usuario!");
form.pwd1.focus();
return false;
}

• Que el password contenga al menos un número (0-9):
re = /[0-9]/;
if(!re.test(form.pwd1.value)) {
alert("Error: …por lo menos un n° 0-9)!");
form.pwd1.focus();
return false;
}

• Que el password contenga al menos una letra minúscula (a-z):
re = /[a-z]/;
alert("Error: …al menos una letra(a-z)!");
form.pwd1.focus();
return false;
}

• Que el password contenga al menos una letra mayúscula (A-Z):
re = /[A-Z]/;
alert("Error: …al menos una letra(A-Z)!");
form.pwd1.focus();
return false;
}
Ejemplo

• Validar formulario usando HTML5:
• Unos atributos de formulario simples pueden tener el mismo efecto que
un montón de bibliotecas de código JavaScript.
• Aquí tenemos una versión mejorada del código anterior, donde hemos
añadido atributos “required” y “pattern” para aplicar pruebas de
expresiones regulares en el propio formulario
• También hemos añadido un evento onchange al primer campo de
contraseña que actualiza el patrón requerido por el segundo campo de
contraseña, lo que le obliga a ser idénticos 
• Obs: W es equivalente a[^a-zA-Z0-9_]
Ejemplo

• Cambiar el mensaje de error de HTML5 :
• Dependiendo del navegador, los mensajes para required son “rellene
este campo” y para pattern “ajústese al formato solicitado”.
• Se pueden personalizar estos mensajes agregando unas líneas de código
al ejemplo anterior.
• En el ejemplo, jugamos con el atributo input title, el método
setCustomValidity y la propiedad validity.patternMismatch
Ejemplo

EJERCICIO
Cree un formulario con los campos nombre, apellido,
mail, nombre de usuario y contraseña. Agregue
radiobutton de sexo y ciudades con <select>.
Agregue un estilo personalizado con CSS, CSS3.
Valide como requeridos todos los campos.
Tenga como válida solo una opción en el radiobutton y
el select
Valide las contraseñas como se ha visto en los ejemplos.

FUENTES
• http://www.the-art-of-
web.com/javascript/validate-
password/#box1
• http://librosweb.es/libro/javascript/capitul
o_7.html
• HTML5 FOR MASTERMINDS, JD GAUCHAT
(http://www.amazon.com/HTML5-
Masterminds-2nd-Edition-
revolutionary/dp/1481138502)

Introducción a Javascript: Formularios

Más contenido relacionado

La actualidad más candente (20)

Destacado (14)

Similar a Introducción a Javascript: Formularios (20)

Más de Héctor Estigarribia (15)

Último (20)

Introducción a Javascript: Formularios