PDF de programación - Validación de Formularios HTML

Desarrollo Plataforma Web
Ing. Tomás Urbina
Validación de Formularios HTML

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.

Notificar los errores de forma inmediata mediante JavaScript mejora la satisfacción
del usuario con la aplicación (lo que técnicamente se conoce como "mejorar la
experiencia de usuario") y ayuda a reducir la carga de procesamiento en el servidor.

Normalmente, la validación de un formulario consiste en llamar a una función de
validación cuando el usuario pulsa sobre el botón de envío del formulario. En esta
función, se comprueban si los valores que ha introducido el usuario cumplen las
restricciones impuestas por la aplicación.

Aunque existen tantas posibles comprobaciones como elementos de formulario
diferentes, algunas comprobaciones son muy habituales: que se rellene un campo
obligatorio, que se seleccione el valor de una lista desplegable, que la dirección de
email indicada sea correcta, que la fecha introducida sea lógica, que se haya
introducido un número donde así se requiere, etc.

A continuación se muestra el código JavaScript básico necesario para incorporar la
validación a un formulario:

<form action="" method="" id="" name="" onsubmit="return validacion()">
...
</form>
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;
}


Desarrollo Plataforma Web
Ing. Tomás Urbina
// Si el script ha llegado a este punto, todas las condiciones
// se han cumplido, por lo que se devuelve el valor true
return true;
}

El funcionamiento de esta técnica de validación se basa en el comportamiento del
evento onsubmit de JavaScript. Al igual que otros eventos como onclick y onkeypress, el
evento onsubmit varía su comportamiento en función del valor que se devuelve.
Así, si el evento onsubmit devuelve el valor true, el formulario se envía como lo haría
normalmente. Sin embargo, si el evento onsubmit devuelve el valor false, el formulario
no se envía. La clave de esta técnica consiste en comprobar todos y cada uno de
los elementos del formulario. En cuando se encuentra un elemento incorrecto, se
devuelve el valor false. Si no se encuentra ningún error, se devuelve el valor true.
Por lo tanto, en primer lugar se define el evento onsubmit del formulario como:
onsubmit="return validacion()".

Como el código JavaScript devuelve el valor resultante de la función validacion(), el
formulario solamente se enviará al servidor si esa función devuelve true. En el caso
de que la función validacion() devuelva false, el formulario permanecerá sin enviarse.
Dentro de la función validacion() se comprueban todas las condiciones impuestas por
la aplicación. Cuando no se cumple una condición, se devuelve false y por tanto el
formulario no se envía. Si se llega al final de la función, todas las condiciones se
han cumplido correctamente, por lo que se devuelve true y el formulario se envía.
La notificación de los errores cometidos depende del diseño de cada aplicación. En
el código del ejemplo anterior simplemente se muestran mensajes mediante la
función alert() indicando el error producido. Las aplicaciones web mejor diseñadas
muestran cada mensaje de error al lado del elemento de formulario correspondiente
y también suelen mostrar un mensaje principal indicando que el formulario contiene
errores.

Una 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. A continuación, se muestran algunas de las validaciones
más habituales de los campos de formulario.

Desarrollo Plataforma Web
Ing. Tomás Urbina

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



Nota: Recuerde que si usamos “getElementById” para extraer el objeto del
formulario, este objeto debera tener un nombre identificado con el parametro “id” y
no con “name”, si el nombre del objeto esta definido con “name” entonces debemos
usar “document.formulario.nombreobjeto”

Para que se de por completado un campo de texto obligatorio, se comprueba que el
valor introducido sea válido, que el número de caracteres introducido sea mayor que
cero y que no se hayan introducido sólo espacios en blanco.

La palabra reservada null es un valor especial que se utiliza para indicar "ningún
valor". Si el valor de una variable es null, la variable no contiene ningún valor de tipo
objeto, array, numérico, cadena de texto o booleano.
La segunda parte de la condición obliga a que el texto introducido tenga una
longitud superior a cero caracteres, esto es, que no sea un texto vacío.

Por último, la tercera parte de la condición (/^\s+$/.test(valor)) obliga a que el valor
introducido por el usuario no sólo esté formado por espacios en blanco. Esta
comprobación se basa en el uso de "expresiones regulares", un recurso habitual en
cualquier lenguaje de programación pero que por su gran complejidad no se van a
estudiar. Por lo tanto, sólo es necesario copiar literalmente esta condición, poniendo
especial cuidado en no modificar ningún carácter de la expresión.

b) 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;
}
Si el contenido de la variable valor no es un número válido, no se cumple la
condición. La ventaja de utilizar la función interna isNaN() es que simplifica las

Desarrollo Plataforma Web
Ing. Tomás Urbina

comprobaciones, ya que JavaScript se encarga de tener en cuenta los decimales,
signos, etc.
A continuación se muestran algunos resultados de la función isNaN():
isNaN(3); // false
isNaN("3"); // false
isNaN(3.3545); // false
isNaN(32323.345); // false
isNaN(+23.2); // false
isNaN("-23.2"); // false
isNaN("23a"); // true
isNaN("23.43.54"); // true

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

<select id="opciones" name="opciones">
<option value="">- Selecciona un valor -</option>
<option value="1">Primer valor</option>
<option value="2">Segundo valor</option>
<option value="3">Tercer valor</option>
</select>
A partir de la propiedad selectedIndex, se comprueba si el índice de la opción
seleccionada es válido y además es distinto de cero. La primera opción de la lista (-
Selecciona un valor –) no es válida, por lo que no se permite el valor 0 para esta
propiedad selectedIndex.

d) 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;
}
La comprobación se realiza nuevamente mediante las expresiones regulares, ya
que las direcciones de correo electrónico válidas pueden ser muy diferentes. Por
otra parte, como el estándar que define el formato de las direcciones de correo
electrónico es muy complejo, la expresión regular anterior es una simplificación.

Desarrollo Plataforma Web
Ing. Tomás Urbina

Aunque esta regla valida la mayoría de direcciones de correo electrónico utilizadas
por los usuarios, no soporta todos los diferentes formatos válidos de email.


e) 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;
}
La función Date(ano, mes, dia) es una función interna de JavaScript que permite