Desarrollo Plataforma Web Ing.

Toms Urbina

Validacin de Formularios HTML

La principal utilidad de JavaScript en el manejo de los formularios es la validacin 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 algn error al rellenar el formulario, se le puede notificar de forma instantnea, sin necesidad de esperar la respuesta del servidor. Notificar los errores de forma inmediata mediante JavaScript mejora la satisfaccin del usuario con la aplicacin (lo que tcnicamente se conoce como "mejorar la experiencia de usuario") y ayuda a reducir la carga de procesamiento en el servidor. Normalmente, la validacin de un formulario consiste en llamar a una funcin de validacin cuando el usuario pulsa sobre el botn de envo del formulario. En esta funcin, se comprueban si los valores que ha introducido el usuario cumplen las restricciones impuestas por la aplicacin. 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 direccin de email indicada sea correcta, que la fecha introducida sea lgica, que se haya introducido un nmero donde as se requiere, etc. A continuacin se muestra el cdigo JavaScript bsico necesario para incorporar la validacin a un formulario:
<form action="" method="" id="" name="" onsubmit="return validacion()"> ... </form>

Y el esquema de la funcin 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. Toms 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 tcnica de validacin se basa en el comportamiento del evento onsubmit de JavaScript. Al igual que otros eventos como onclick y onkeypress, el evento onsubmit vara su comportamiento en funcin del valor que se devuelve. As, si el evento onsubmit devuelve el valor true, el formulario se enva como lo hara normalmente. Sin embargo, si el evento onsubmit devuelve el valor false, el formulario no se enva. La clave de esta tcnica 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 ningn 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 cdigo JavaScript devuelve el valor resultante de la funcin validacion(), el formulario solamente se enviar al servidor si esa funcin devuelve true. En el caso de que la funcin validacion() devuelva false, el formulario permanecer sin enviarse. Dentro de la funcin validacion() se comprueban todas las condiciones impuestas por la aplicacin. Cuando no se cumple una condicin, se devuelve false y por tanto el formulario no se enva. Si se llega al final de la funcin, todas las condiciones se han cumplido correctamente, por lo que se devuelve true y el formulario se enva. La notificacin de los errores cometidos depende del diseo de cada aplicacin. En el cdigo del ejemplo anterior simplemente se muestran mensajes mediante la funcin alert() indicando el error producido. Las aplicaciones web mejor diseadas muestran cada mensaje de error al lado del elemento de formulario correspondiente y tambin suelen mostrar un mensaje principal indicando que el formulario contiene errores. Una vez definido el esquema de la funcin validacion(), se debe aadir a esta funcin el cdigo correspondiente a todas las comprobaciones que se realizan sobre los elementos del formulario. A continuacin, se muestran algunas de las validaciones ms habituales de los campos de formulario.

Desarrollo Plataforma Web Ing. Toms 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 condicin 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 vlido, que el nmero de caracteres introducido sea mayor que cero y que no se hayan introducido slo espacios en blanco. La palabra reservada null es un valor especial que se utiliza para indicar "ningn valor". Si el valor de una variable es null, la variable no contiene ningn valor de tipo objeto, array, numrico, cadena de texto o booleano. La segunda parte de la condicin obliga a que el texto introducido tenga una longitud superior a cero caracteres, esto es, que no sea un texto vaco. Por ltimo, la tercera parte de la condicin (/^\s+$/.test(valor)) obliga a que el valor introducido por el usuario no slo est formado por espacios en blanco. Esta comprobacin se basa en el uso de "expresiones regulares", un recurso habitual en cualquier lenguaje de programacin pero que por su gran complejidad no se van a estudiar. Por lo tanto, slo es necesario copiar literalmente esta condicin, poniendo especial cuidado en no modificar ningn carcter de la expresin.

b) Validar un campo de texto con valores numricos

Se trata de obligar al usuario a introducir un valor numrico en un cuadro de texto. La condicin JavaScript consiste en:
valor = document.getElementById("campo").value; if( isNaN(valor) ) { return false; }

Si el contenido de la variable valor no es un nmero vlido, no se cumple la condicin. La ventaja de utilizar la funcin interna isNaN() es que simplifica las

Desarrollo Plataforma Web Ing. Toms Urbina

comprobaciones, ya que JavaScript se encarga de tener en cuenta los decimales, signos, etc. A continuacin se muestran algunos resultados de la funcin 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 opcin de una lista

Se trata de obligar al usuario a seleccionar un elemento de una lista desplegable. El siguiente cdigo 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 opcin seleccionada es vlido y adems es distinto de cero. La primera opcin de la lista ( Selecciona un valor ) no es vlida, por lo que no se permite el valor 0 para esta propiedad selectedIndex.

d) Validar una direccin de email

Se trata de obligar al usuario a introducir una direccin de email con un formato vlido. Por tanto, lo que se comprueba es que la direccin parezca vlida, ya que no se comprueba si se trata de una cuenta de correo electrnico real y operativa. La condicin JavaScript consiste en:
valor = document.getElementById("campo").value; if( !(/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)/.test(valor)) ) { return false; }

La comprobacin se realiza nuevamente mediante las expresiones regulares, ya que las direcciones de correo electrnico vlidas pueden ser muy diferentes. Por otra parte, como el estndar que define el formato de las direcciones de correo electrnico es muy complejo, la expresin regular anterior es una simplificacin.

Desarrollo Plataforma Web Ing. Toms Urbina

Aunque esta regla valida la mayora de direcciones de correo electrnico utilizadas por los usuarios, no soporta todos los diferentes formatos vlidos de email.

e) Validar una fecha

Las fechas suelen ser los campos de formulario ms complicados de validar por la multitud de formas diferentes en las que se pueden introducir. El siguiente cdigo asume que de alguna forma se ha obtenido el ao, el mes y el da 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 funcin Date(ano, mes, dia) es una funcin interna de JavaScript que permite construir fechas a partir del ao, el mes y el da de la fecha. Es muy importante tener en cuenta que el nmero de mes se indica de 0 a 11, siendo 0 el mes de Enero y 11 el mes de Diciembre. Los das del mes siguen una numeracin diferente, ya que el mnimo permitido es 1 y el mximo 31. La validacin consiste en intentar construir una fecha con los datos proporcionados por el usuario. Si los datos del usuario no son correctos, la fecha no se puede construir correctamente y por tanto la validacin del formulario no ser correcta.

f) Validar un nmero de DUI

Se trata de comprobar que el nmero proporcionado por el usuario se corresponde con un nmero vlido de Documento nico de Identidad o DUI. Aunque para cada pas o regin los requisitos del documento de identidad de las personas pueden variar, a continuacin se muestra un ejemplo genrico fcilmente adaptable. La validacin no slo debe comprobar que el nmero est formado por ocho cifras, un guin y una cifra mas:
valor = document.getElementById("campo").value; if( !(/^\d{8}-\d{1}$/.test(valor)) ) { return false; }

La comprobacin asegura que el formato del nmero introducido es el correcto, es decir, que est formado por 8 nmeros seguidos, un guin y un digito mas. Si en

Desarrollo Plataforma Web Ing. Toms Urbina

vez de ocho nmeros, guin y digito, se requieren diez nmeros y dos letras, la comprobacin sera /^\d{10}[A-Z]{2}$/ y as sucesivamente.

g) Validar un nmero de telfono

Los nmeros de telfono pueden ser indicados de formas muy diferentes: con prefijo nacional, con prefijo internacional, agrupado por pares, en cuartetos, separando los nmeros con guiones, etc. El siguiente script considera que un nmero de telfono est formado por ocho dgitos consecutivos y sin espacios ni guiones entre las cifras:
valor = document.getElementById("campo").value; if( !(/^\d{8}$/.test(valor)) ) { return false; }

Una vez ms, la condicin de JavaScript se basa en el uso de expresiones regulares, que comprueban si el valor indicado es una sucesin de nueve nmeros consecutivos. A continuacin se muestran otras expresiones regulares que se pueden utilizar para otros formatos de nmero de telfono:

Nmero
90090090 9000-9000

Expresin regular
/^\d{8}$/ /^\d{4}-\d{4}$/

Formato 8 cifras seguidas 8 cifras agrupadas de 4 en 4 y separadas por guiones 11 cifras, las 3 primeras separadas por un espacio 8 cifras separadas por un espacio y agrupadas de 2 en 2 11 cifras las 3 primeras encerradas por parntesis y un espacio de separacin respecto del resto Prefijo internacional (+ seguido de 0 o 1 cifras) espacio en blanco y 8 cifras consecutivas

900 90009000

/^\d{3}\s\d{8}$/

90 90 90 90

/^\d{2}\s\d{2}\s\d{2}\s\d{2}$/

(900) 90009000

/^\(\d{3}\)\s\d{8}$/

+01 90099009

/^\+\d{0,1}\s\d{8}$/

Desarrollo Plataforma Web Ing. Toms Urbina

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

Si se trata de comprobar que todos los checkbox del formulario han sido seleccionados, es ms fcil utilizar un bucle:
formulario = document.getElementById("formulario"); for(var i=0; i<formulario.elements.length; i++) { var elemento = formulario.elements[i]; if(elemento.type == "checkbox") { if(!elemento.checked) { return false; } } }

i) Validar que un radiobutton ha sido seleccionado

Aunque se trata de un caso similar al de los checkbox, la validacin de los radiobutton presenta una diferencia importante: en general, la comprobacin que se realiza es que el usuario haya seleccionado algn radiobutton de los que forman un determinado grupo. Mediante JavaScript, es sencillo determinar si se ha seleccionado algnradiobutton de un grupo:
opciones = document.getElementsByName("opciones"); var seleccionado = false; for(var i=0; i<opciones.length; i++) { if(opciones[i].checked) { seleccionado = true; break; } } if(!seleccionado) { return false; }

El anterior ejemplo recorre todos los radiobutton que forman un grupo y comprueba elemento por elemento si ha sido seleccionado. Cuando se encuentra el primer radiobutton seleccionado, se sale del bucle y se indica que al menos uno ha sido seleccionado.

Desarrollo Plataforma Web Ing. Toms Urbina

j) Validar el siguiente formulario

Con todo lo visto en las clases anteriores y el material incluido en esta guia intente crear la validacin correspondiente para el siguiente ejemplo de formulario (puede copiar el cdigo HTML). 1) Que no deje campos sin llenar o seleccionar 2) Que respete los formatos indicados 3) Que digite un mail valido 4) Que muestre una ventana de agradecimiento si esta todo correcto 5) Cree la pagina gracias.html con un mensaje de xito 6) Que cambios tendria que hacer para calcular y mostrar la edad del usuario que llena el formulario.

<html> <head> <title>Validacion de Formularios</title> </head> <body> <h2>Formulario de Datos</h2> <form name=frmdatos action="gracias.html" method="post"> <table border="1"> <tr height="50"> <td>Nombre<span lang="en-us">:</span></td> <td> <input name="nombre" type="Text" size="18" maxlength="18"> </td> </tr> <tr height="50"> <td><span lang="en-us">A</span>pellidos<span lang="en-us">:</span></td> <td> <input type="text" name="apellidos" size="48" maxlength="48"> </td> </tr> <tr height="50"> <td><span lang="en-us">F</span>. <span lang="enus">N</span>acimiento<span lang="en-us">:</span> </td> <td> <input name="f_n" type="text" size="18" maxlength="18"> <span lang="en-us">(dd/mm/yyyy)</span></td> </tr> <tr height="50"> <td><span lang="en-us">Direccion:</span></td> <td> <input type="text" name="domicilio" size="48" maxlength="48"> </td>

Desarrollo Plataforma Web Ing. Toms Urbina </tr> <tr height="50"> <td>Correo:</td> <td> <input type="text" name="email" size="48" maxlength="50"> </td> </tr> <tr height="50"> <td><span lang="en-us">Ciudad</span></td> <td> <select name="ciudad"> <option value="1">San Salvador</option> <option value="2">Soyapango</option> <option value="3">Apopa</option> <option value="4">Otra</option> </select> &nbsp; &nbsp; Telfono <input type="text" name="telefono" size="9" maxlength="9">&nbsp; (8888-8888)</td> </tr> <tr height="50"> <td><span lang="en-us">Genero</span></td> <td>Hombre <input type="radio" name="sexo" value="H"> Mujer <input type="radio" name="sexo" value="M"> </td> <tr> <td> Estado Civil: </td> <td> <select name="estado_civil"> <option value="1">Soltero</option> <option value="2">Casado</option> <option value="3">Divorciado</option> <option value="4">Otro</option> </select> <td> </tr> <tr height="50"> <td>Idiomas</td> <td> <input type="checkbox" mane="idiomas" value="E"> Espaol <input type="checkbox" mane="idiomas" value="F"> Francs <input type="checkbox" mane="idiomas" value="I"> Ingls

Desarrollo Plataforma Web Ing. Toms Urbina <input type="checkbox" mane="idiomas" value="A"> Alemn </td> </tr> <tr height="50"> <td>Comentarios <br> Personales</td> <td> <textarea name="comentario" rows="2" cols="44"> </textarea> </td> </tr> <tr height="50"> <td align="center" colspan="2"> <input type="submit" value="Validar los datos"> &nbsp; <input type="reset" value="Borrar los datos"> </td> </tr> </table> </form> </body> </html>