7.3.1.

Validar un campo de texto obligatorio Se trata de forzar al usuario a introducir un valor en un cuadro de texto o text area en los que sea obligatorio. La condicin en JavaScript se puede indicar como: valor = [Link]("campo").value; if( valor == null || [Link] == 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 longi tud 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 v alor introducido por el usuario no slo est formado por espacios en blanco. Esta comprob acin se basa en el uso de "expresiones regulares", un recurso habitual en cualqui er 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. 7.3.2. Validar un campo de texto con valores numricos Se trata de obligar al usuario a introducir un valor numrico en un cuadro de text o. La condicin JavaScript consiste en: valor = [Link]("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 comprobaci ones, 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 7.3.3. Validar que se ha seleccionado una opcin de una lista

Se trata de obligar al usuario a seleccionar un elemento de una lista desplegabl e. El siguiente cdigo JavaScript permite conseguirlo: indice = [Link]("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. 7.3.4. 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 con dicin JavaScript consiste en: valor = [Link]("campo").value; if( !(/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)/.test(valor)) ) { return false; } La comprobacin se realiza nuevamente mediante las expresiones regulares, ya que l as 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 m uy complejo, la expresin regular anterior es una simplificacin. Aunque esta regla val ida la mayora de direcciones de correo electrnico utilizadas por los usuarios, no soporta todos los diferentes formatos vlidos de email. 7.3.5. 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 = [Link]("ano").value; var mes = [Link]("mes").value; var dia = [Link]("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 cons truir 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 mnim o permitido es 1 y el mximo 31. La validacin consiste en intentar construir una fecha con los datos proporcionado

s por el usuario. Si los datos del usuario no son correctos, la fecha no se puede cons truir correctamente y por tanto la validacin del formulario no ser correcta. 7.3.6. Validar un nmero de DNI Se trata de comprobar que el nmero proporcionado por el usuario se corresponde co n un nmero vlido de Documento Nacional de Identidad o DNI. Aunque para cada pas o reg in los requisitos del documento de identidad de las personas pueden variar, a con tinuacin 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 intr oducido: valor = [Link]("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([Link](8) != letras[([Link](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 pri ncipio 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 comp ara 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. 7.3.7. Validar un nmero de telfono Los nmeros de telfono pueden ser indicados de formas muy diferentes: con prefijo n acional, 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 c onsecutivos y sin espacios ni guiones entre las cifras: valor = [Link]("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 Expresin regular Formato 900900900 /^\d{9}$/ 9 cifras seguidas 900-900-900 /^\d{3}-\d{3}-\d{3}$/

9 cifras agrupadas de 3 en 3 y separadas por guiones 900 900900 /^\d{3}\s\d{6}$/ 9 cifras, las 3 primeras separadas por un espacio 900 90 09 00 /^\d{3}\s\d{2}\s\d{2}\s\d{2}$/ 9 cifras las 3 primeras separadas por un espacio las siguientes agrupadas de 2 en 2 (900) 900900 /^\(\d{3}\)\s\d{6}$/ 9 cifras las 3 primeras encerradas por parntesis y un espacio de separacin respecto del resto +34 900900900 /^\+\d{2,3}\s\d{9}$/ Prefijo internacional (+ seguido de 2 o 3 cifras) espacio en blanco y 9 cifras consecutivas 7.3.8. Validar que un checkbox ha sido seleccionado Si un elemento de tipo checkbox se debe seleccionar de forma obligatoria, JavaSc ript permite comprobarlo de forma muy sencilla: elemento = [Link]("campo"); if( ![Link] ) { return false; } Si se trata de comprobar que todos los checkbox del formulario han sido seleccio nados, es ms fcil utilizar un bucle: formulario = [Link]("formulario"); for(var i=0; i<[Link]; i++) { var elemento = [Link][i]; if([Link] == "checkbox") { if(![Link]) { return false; } } } 7.3.9. Validar que un radiobutton ha sido seleccionado Aunque se trata de un caso similar al de los checkbox, la validacin de los radiob utton presenta una diferencia importante: en general, la comprobacin que se realiza es que el Introduccin a JavaScript Captulo 7. Formularios [Link] 96 usuario haya seleccionado algn radiobutton de los que forman un determinado grupo . Mediante JavaScript, es sencillo determinar si se ha seleccionado algn radiobutto n de un grupo:

opciones = [Link]("opciones"); var seleccionado = false; for(var i=0; i<[Link]; i++) { if(opciones[i].checked) { seleccionado = true; break; } } if(!seleccionado) { return false; } El anterior ejemplo recorre todos los radiobutton que forman un grupo y comprueb a elemento por elemento si ha sido seleccionado. Cuando se encuentra el primer r adiobutton seleccionado, se sale del bucle y se indica que al menos uno ha sido seleccionado.