Formulario y Validacion
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.
La aparición de las aplicaciones AJAX ha relevado al tratamiento de formularios como la principal actividad de JavaScript. Ahora, el principal uso de JavaScript es el de las comunicaciones asíncronas con los servidores y el de la manipulación dinámica de las aplicaciones.
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];
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];
La sintaxis de los arrays no siempre es tan concisa. 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.
Una forma de evitar los problemas del método anterior consiste en 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:
var formularioPrincipal = document.formulario;
var primerElemento = document.formulario.elemento;
El siguiente ejemplo utiliza la habitual función document.getElementById() para acceder de forma directa a un formulario y a uno de sus elementos:
var formularioPrincipal = document.getElementById("formulario");
var primerElemento = document.getElementById("elemento");
cada elemento dispone de las siguientes propiedades útiles para el desarrollo de las aplicaciones:
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.
value: permite leer y modificar el valor del atributo value de XHTML.
Por último, 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 ( o
var valor = document.getElementById("parrafo").value;
Radiobutton
La propiedad checked devuelve true para el radiobutton seleccionado y false en cualquier otro caso. Si por ejemplo se dispone del siguiente grupo de radiobuttons:
SI
NO
NS/NC
El siguiente código permite determinar si cada radiobutton ha sido seleccionado o no:
var elementos = document.getElementsByName("pregunta");
for(var i=0; i
}
Checkbox
Los checkbox se pueden seleccionar de forma independiente respecto de los demás.
Si se dispone de los siguientes checkbox:
He leído y acepto las condiciones
He leído la política de privacidad.
Select
Las listas desplegables (
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.
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.
// Obtener la referencia a la lista
var lista = document.getElementById("opciones");
// Obtener el índice de la opción que se ha seleccionado
var indiceSeleccionado = lista.selectedIndex;
// Con el índice y el array "options", obtener la opción seleccionada
var opcionSeleccionada = lista.options[indiceSeleccionado];
// Obtener el valor y el texto de la opción seleccionada
var textoSeleccionado = opcionSeleccionada.text;
var valorSeleccionado = opcionSeleccionada.value;
alert("Opción seleccionada: " + textoSeleccionado + "\n Valor de la opción: " + valorSeleccionado);
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:
document.getElementById("primero").focus();
El campo de formulario que se selecciona no debería ser de tipo hidden:
if(document.forms.length > 0) {
for(var i=0; i < document.forms[0].elements.length; i++) {
var campo = document.forms[0].elements[i];
if(campo.type != "hidden") {
campo.focus();
break;
}
}
}
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:
Cuando se pulsa sobre el botón de envío del formulario, se produce el evento onclick sobre el botón y por tanto, se ejecutan las instrucciones JavaScript contenidas en el atributo onclick:
En primer lugar, se deshabilita el botón mediante la instrucción this.disabled = true;. Esta es la única instrucción necesaria si sólo se quiere deshabilitar un botón.
A continuación, se cambia el mensaje que muestra el botón. Del original "Enviar" se pasa al más adecuado "Enviando..."
Por último, se envía el formulario mediante la función submit() en la siguiente instrucción: this.form.submit()
Limitar el tamaño de caracteres de un textarea
JavaScript permite añadir esta característica de forma muy sencilla. En primer lugar, hay que recordar que con algunos eventos (como onkeypress, onclick y onsubmit) se puede evitar su comportamiento normal si se devuelve el valor false.
Restringir los caracteres permitidos en un cuadro de texto
En ocasiones, puede ser útil bloquear algunos caracteres determinados en un cuadro de texto. Si por ejemplo un cuadro de texto espera que se introduzca un número, puede ser interesante no permitir al usuario introducir ningún carácter que no sea numérico.
Validación
La principal utilidad de JavaScript en el manejo de los formularios es la validación de los datos introducidos por los usuarios. Antes de enviar un formulario al servidor, se recomienda validar mediante JavaScript los datos insertados por el usuario. De esta forma, si el usuario ha cometido algún error al rellenar el formulario, se le puede notificar de forma instantánea, sin necesidad de esperar la respuesta del servidor.
A continuación se muestra el código JavaScript básico necesario para incorporar la validación a un formulario:
Y el esquema de la función validacion() es el siguiente:
function validacion() {
if (condicion que debe cumplir el primer campo del formulario) {
// Si no se cumple la condicion...
alert('[ERROR] El campo debe tener un valor de...');
return false;
}
else if (condicion que debe cumplir el segundo campo del formulario) {
// Si no se cumple la condicion...
alert('[ERROR] El campo debe tener un valor de...');
return false;
}
...
else if (condicion que debe cumplir el último campo del formulario) {
// Si no se cumple la condicion...
alert('[ERROR] El campo debe tener un valor de...');
return false;
}
// Si el script ha llegado a este punto, todas las condiciones
// se han cumplido, por lo que se devuelve el valor true
return true;
}
na vez definido el esquema de la función validacion(), se debe añadir a esta función el código correspondiente a todas las comprobaciones que se realizan sobre los elementos del formulario.
Validar un campo de texto obligatorio
Se trata de forzar al usuario a introducir un valor en un cuadro de texto o textarea en los que sea obligatorio. La condición en JavaScript se puede indicar como:
valor = document.getElementById("campo").value;
if( valor == null || valor.length == 0 || /^\s+$/.test(valor) ) {
return false;
}
Validar un campo de texto con valores numéricos
Se trata de obligar al usuario a introducir un valor numérico en un cuadro de texto. La condición JavaScript consiste en:
valor = document.getElementById("campo").value;
if( isNaN(valor) ) {
return false;
}
Validar que se ha seleccionado una opción de una lista
Se trata de obligar al usuario a seleccionar un elemento de una lista desplegable. El siguiente código JavaScript permite conseguirlo:
indice = document.getElementById("opciones").selectedIndex;
if( indice == null || indice == 0 ) {
return false;
}
Validar una dirección de email
Se trata de obligar al usuario a introducir una dirección de email con un formato válido. Por tanto, lo que se comprueba es que la dirección parezca válida, ya que no se comprueba si se trata de una cuenta de correo electrónico real y operativa. La condición JavaScript consiste en:
valor = document.getElementById("campo").value;
if( !(/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)/.test(valor)) ) {
return false;
}
Validar una fecha
Las fechas suelen ser los campos de formulario más complicados de validar por la multitud de formas diferentes en las que se pueden introducir. El siguiente código asume que de alguna forma se ha obtenido el año, el mes y el día introducidos por el usuario:
var ano = document.getElementById("ano").value;
var mes = document.getElementById("mes").value;
var dia = document.getElementById("dia").value;
valor = new Date(ano, mes, dia);
if( !isNaN(valor) ) {
return false;
}
Validar un número de DNI
Se trata de comprobar que el número proporcionado por el usuario se corresponde con un número válido de Documento Nacional de Identidad o DNI. Aunque para cada país o región los requisitos del documento de identidad de las personas pueden variar, a continuación se muestra un ejemplo genérico fácilmente adaptable. La validación no sólo debe comprobar que el número esté formado por ocho cifras y una letra, sino que también es necesario comprobar que la letra indicada es correcta para el número introducido:
valor = document.getElementById("campo").value;
var letras = ['T', 'R', 'W', 'A', 'G', 'M', 'Y', 'F', 'P', 'D', 'X', 'B', 'N', 'J', 'Z', 'S', 'Q', 'V', 'H', 'L', 'C', 'K', 'E', 'T'];
if( !(/^\d{8}[A-Z]$/.test(valor)) ) {
return false;
}
if(valor.charAt(8) != letras[(valor.substring(0, 8))%23]) {
return false;
}
Validar un número de teléfono
Los números de teléfono pueden ser indicados de formas muy diferentes: con prefijo nacional, con prefijo internacional, agrupado por pares, separando los números con guiones, etc.
El siguiente script considera que un número de teléfono está formado por nueve dígitos consecutivos y sin espacios ni guiones entre las cifras:
valor = document.getElementById("campo").value;
if( !(/^\d{9}$/.test(valor)) ) {
return false;
}
Validar que un checkbox ha sido seleccionado
Si un elemento de tipo checkbox se debe seleccionar de forma obligatoria, JavaScript permite comprobarlo de forma muy sencilla:
elemento = document.getElementById("campo");
if( !elemento.checked ) {
return false;
}
Validar que un radiobutton ha sido seleccionado
Aunque se trata de un caso similar al de los checkbox, la validación de los radiobutton presenta una diferencia importante: en general, la comprobación que se realiza es que el usuario haya seleccionado algún radiobutton de los que forman un determinado grupo. Mediante JavaScript, es sencillo determinar si se ha seleccionado algún radiobutton de un grupo:
opciones = document.getElementsByName("opciones");
var seleccionado = false;
for(var i=0; i
seleccionado = true;
break;
}
}
if(!seleccionado) {
return false;
}