Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
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.
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>
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.
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.
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
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.
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.
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.
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.
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
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; } } }
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.