Cmo validar un formulario en una pgina web en el lado del cliente con Javascript

Vamos realizar un ejemplo de un formulario completo para validar. Las validaciones se hacen en el propio navegador antes de enviarlo. Si hubo algn campo no relleno o con informacin errnea, el formulario muestra el campo que est incorrecto y solicita al usuario que lo cambie. Si todos los datos del formulario son correctos se enva el formulario. Hemos querido hacer un formulario sencillo, para que el ejercicio no se haga demasiado complicado. No obstante, se realizan validaciones en campos con distintos valores, para hacerlo ms variado. Se comprueba un campo donde debe figurar un texto, otro donde debe introducirse un nmero mayor que 18 y un ltimo con un campo select donde deben haber seleccionado un valor. Se puede ver el ejemplo en funcionamiento para hacerse una idea ms exacta del objetivo buscado. El cdigo del formulario con el que vamos a trabajar es el siguiente:
<form name="fvalida"> <table> <tr> <td>Nombre: </td> <td><input type="text" name="nombre" size="30" maxlength="100"></td> </tr> <tr> <td>Edad: </td> <td><input type="text" name="edad" size="3" maxlength="2"></td> </tr> <tr> <td>Inters:</td> <td> <select name=interes> <option value="Elegir">Elegir <option value="Comercial">Contacto comercial <option value="Clientes">Atencin al cliente <option value="Proveedores">Contacto de proveedores </select> </td> </tr> <tr> <td colspan="2" align="center"><input type="button" value="Enviar" onclick="valida_envia()"></td> </tr> </table> </form>

Es un formulario cualquiera. Los nicos puntos donde debemos prestar atencin son: El nombre del formulario, "fvalida", que utilizaremos para referirnos al l mediante Javascript.

El botn de enviar, que en lugar de ser un submit corriente, es un botn que llama a una funcin, que se encarga de validar el formulario y enviarlo si todo fue correcto.

Funcin Javascript para validar el formulario

Ahora veremos la funcin que hemos creado para validar el formulario. Se llama valida_envia(). Simplemente, para cada campo del formulario, comprueba que el valor introducido es correcto. Si no es correcto, muestra un mensaje de alerta, pone el foco de la aplicacin en el campo que ha dado el error y abandona la funcin retornando el valor 0. Si todos los campos eran correctos, la funcin contina hasta el final, sin salirse, por no estar ningn campo incorrecto. Entonces ejecuta la sentencia ltima, que es el envo del formulario. Veamos la funcin entera, aunque luego la expliquemos por partes.
function valida_envia(){ //valido el nombre if (document.fvalida.nombre.value.length==0){ alert("Tiene que escribir su nombre") document.fvalida.nombre.focus() return 0; } //valido la edad. tiene que ser entero mayor que 18 edad = document.fvalida.edad.value edad = validarEntero(edad) document.fvalida.edad.value=edad if (edad==""){ alert("Tiene que introducir un nmero entero en su edad.") document.fvalida.edad.focus() return 0; }else{ if (edad<18){ alert("Debe ser mayor de 18 aos.") document.fvalida.edad.focus() return 0; } } //valido el inters if (document.fvalida.interes.selectedIndex==0){ alert("Debe seleccionar un motivo de su contacto.") document.fvalida.interes.focus() return 0; } //el formulario se envia alert("Muchas gracias por enviar el formulario"); document.fvalida.submit(); }

En el primer bloque se valida el campo nombre. La validacin que se hace es simplemente si se ha escrito algo en el campo. Para ello comprueba si el nmero de caracteres escritos en el campo nombre es cero. En ese caso, muestra el mensaje de alerta, sita el foco en el campo de texto y se sale de la funcin devolviendo el valor 0.
Nota: el foco de la aplicacin es el lugar donde est situado el cursor. El foco puede estar en cualquier sitio. Por ejemplo en un campo de texto, en un select, en un enlace o en la propia pgina. Si presionamos una tecla del teclado afecta al lugar donde est situado el foco. Si, por ejemplo, el foco est en un campo de texto, al operar con el teclado estaremos escribiendo en ese campo de texto.

La validacin de la edad mayor que 18 aos tiene dos partes. Primero debemos comprobar que en el campo de texto hay escrito un valor entero. Luego, si tenamos un entero, habra que comprobar que es mayor que 18. Para hacer esta validacin nos vamos a apoyar en una funcin que ya hemos visto en otro artculo de DesarrolloWeb.com, que habla sobre cmo validar un entero en un campo de formulario. Esa funcin devuelve un string vaci en caso de que no sea un entero y el propio entero, si es que lo era. Antes de realizar la validacin de la edad propiamente dicha, se obtiene el valor introducido en el campo de formulario edad y se guarda en una variable llamada edad. Luego se ejecuta la funcin pasando esta edad. Su resultado lo utilizamos para volcarlo otra vez al campo de texto. Entonces, se comprueba si el valor devuelto por la funcin es un string vaco. En ese caso, es que el valor escrito en el formulario no era un entero, por lo que se muestra el mensaje de error, se sita el foco y se sale de la funcin. En caso de que el campo edad contuviese un entero, se debe comprobar a continuacin si es mayor que 18. En caso de que sea menor, se muestra el error y se sale. En caso contrario entonces el valor sera mayor o igual que 18-, se contina con las comprobaciones. Por ltimo se valida el campo select, donde aparece el inters del supuesto visitante, que le motiva para enviarnos el formulario. En ese campo se debe haber seleccionado cualquier opcin menos la primera. Para asegurarnos, simplemente se comprueba si el atributo selectedIndex del campo select tiene el valor 0. Ese atributo almacena el ndice seleccionado en el men desplegable. El primer campo tiene el ndice 0, el segundo el ndice 1... Si se comprueba que selectedIndex vale 0, se muestra un mensaje de alerta, se pone el foco en el campo del formulario y se sale de la funcin. Si hemos llegado hasta este punto sin salirnos de la funcin es que todos los campos del formulario estaban rellenos correctamente. En ese caso se debe enviar el formulario. Antes de enviar el formulario se muestra un mensaje de alerta, agradeciendo que se haya rellenado correctamente. Este mensaje se puede suprimir si se desea. Para enviar el formulario se hace una llamada al mtodo submit() de dicho formulario.

Validacin
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; } // 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.

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

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.

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 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); isNaN("3"); isNaN(3.3545); isNaN(32323.345); isNaN(+23.2); isNaN("-23.2"); isNaN("23a"); isNaN("23.43.54"); // // // // // // // // false false false false false false true true

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.

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. Aunque esta regla valida la mayora de direcciones de correo electrnico utilizadas por los usuarios, no soporta todos los diferentes formatos vlidos de email.

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.

Validar un nmero de DNI

Se trata de comprobar que el nmero proporcionado por el usuario se corresponde con un nmero vlido de Documento Nacional de Identidad o DNI. 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 y una letra, sino que tambin es necesario comprobar que la letra indicada es correcta para el nmero 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; }

La primera comprobacin asegura que el formato del nmero introducido es el correcto, es decir, que est formado por 8 nmeros seguidos y una letra. Si la letra est al principio de los nmeros, la comprobacin sera/^[A-Z]\d{8}$/. Si en vez de ocho nmeros y una letra, se requieren diez nmeros y dos letras, la comprobacin sera /^\d{10}[A-Z]{2}$/ y as sucesivamente.

La segunda comprobacin aplica el algoritmo de clculo de la letra del DNI y la compara con la letra proporcionada por el usuario. El algoritmo de cada documento de identificacin es diferente, por lo que esta parte de la validacin se debe adaptar convenientemente.

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, separando los nmeros con guiones, etc. El siguiente script considera que un nmero de telfono est formado por nueve dgitos consecutivos y sin espacios ni guiones entre las cifras:
valor = document.getElementById("campo").value; if( !(/^\d{9}$/.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 900900900 900-900-900 900 900900 900 90 09 00 Expresin regular /^\d{9}$/ /^\d{3}-\d{3}-\d{3}$/ /^\d{3}\s\d{6}$/ Formato 9 cifras seguidas 9 cifras agrupadas de 3 en 3 y separadas por guiones 9 cifras, las 3 primeras separadas por un espacio

9 cifras /^\d{3}\s\d{2}\s\d{2}\s\d{2}$/ las 3 primeras separadas por un espacio las siguientes agrupadas de 2 en 2 /^\(\d{3}\)\s\d{6}$/ 9 cifras las 3 primeras encerradas por parntesis y un espacio de separacin respecto del resto Prefijo internacional (+ seguido de 2 o 3 cifras) espacio en blanco y 9 cifras consecutivas

(900) 900900

+34 900900900 /^\+\d{2,3}\s\d{9}$/

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

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.